swapping text on mouseclick/mousedown... how

  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi,
I'm using Dreamweaver MX to build a site.
When clicking on a thumbnail pic, a behaviour is set to change a larger pic, showing an enlargement of that thumbnail. I also want it to change typed text (without making the text an image which swaps). Can I do that? I'm sure I can get text to swap but I don't know how.

Any ideas??


Thanks.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

You might try a javascript function that changes the innerHTML of a span tag (or any innermost tag I think) and then call it from the onlick handler:

Code: [ Select ]
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function changeCaption(text) {
    if(document.getElementById) {
        document.getElementById("caption").innerHTML=text;
    }
}
// -->
</script>
</head>
<body>
<img onclick="changeCaption('text for image 1')" src="test.gif" alt="">
<br>
<br>
<span id="caption">Default Message</span>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script type="text/javascript">
  5. <!--
  6. function changeCaption(text) {
  7.     if(document.getElementById) {
  8.         document.getElementById("caption").innerHTML=text;
  9.     }
  10. }
  11. // -->
  12. </script>
  13. </head>
  14. <body>
  15. <img onclick="changeCaption('text for image 1')" src="test.gif" alt="">
  16. <br>
  17. <br>
  18. <span id="caption">Default Message</span>
  19. </body>
  20. </html>


Clicking on a test gif in the example above should change the text inside the span tag to "text for image 1"
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Ooh, sounds a bit beyond me at first glance but I've copied your post and will go over it carefully soon and see if I can do it.

Thank you
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi,
ok, tried that and must have gone horribly wrong somewhere. I ended up with the text and thumbnail displaying above my webpage! Even then I didn't know how to get it to swap it. I'm overlooking something obvious.

I'm trying to have different text for each of the horizonal thumbnails, the text and the larger image changing when thumbnail is clicked. The enlarged image changes work fine (I just used behaviours in Dreamweaver to do them). At the moment, the text in that page is a graphic, as an example, but I want to do it as swapping text instead.

One page in the site has 16 thumbnails so I really must crack this, I can't use images for 16 blocks of swapping text, it's image heavy enough without that.

I don't know how to attach an image here, it's not uploaded so has no url. I'll highlight the images I mean in the code below (by separating their sections with line breaks - if you scroll quite far down the code to where the big spaces are, separating them out, you'll spot them). I don't know how else to make it stand out here with the HTML disabled in the post.

If it's not asking too much (which I kinda feel it is), would you show me where to put the code you gave me and how to apply it to all three images, if that's not obvious from doing just one? I can then follow that example in all the other pages

Sorry to be so dense with this one, I am a real novice with code. (Not any better at posting posts here, it seems).



I disabled html in this post so I hope pasting the code doesn't do anything horrible here!

Ok,page code is as follows...
Code: [ Select ]

<html>
<head>
<title>Costume</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Fireworks MX Dreamweaver MX target. Created Sun Mar 14 22:56:59 GMT+0000 (GMT Standard Time) 2004-->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="CSS/ejcss.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#ffffff" onLoad="MM_preloadImages('images/portheads/profhead.gif', 'images/portheads/setshead.gif', 'images/portheads/sculhead.gif', 'images/portheads/painhead.gif', 'images/ejthumhi/thumgif/homehi.gif', 'images/enlarport/cos/dgchor.gif', 'images/enlarport/cos/dgcoat.gif', 'images/portheads/inthead.gif', 'images/portheads/costhead.gif', 'images/enlarport/cos/dgrobe.gif')">
<table width="830" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
 <!-- fwtable fwsrc="bport01.png" fwbase="bport01.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
 <tr>
  <td><img src="port/images/spacer.gif" width="12" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="3" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="10" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="62" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="4" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="10" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="11" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="8" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="3" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="10" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="11" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="61" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="5" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="11" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="10" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="11" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="15" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="32" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="13" height="1" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="1" height="1" border="0" alt=""></td>
 </tr>

 <tr>
  <td colspan="27">&nbsp;</td>
  <td><img src="port/images/spacer.gif" width="1" height="16" border="0" alt=""></td>
 </tr>
 <tr>
  <td rowspan="21">&nbsp;</td>
  <td rowspan="2" colspan="3"><a href="home.htm"><img src="port/images/bport01_r2_c2.gif" alt="" name="bport01_r2_c2" width="75" height="40" border="0" onMouseDown="MM_swapImage('bport01_r2_c2','','images/ejthumhi/thumgif/homehi.gif',1)" onMouseUp="MM_swapImgRestore()"></a></td>
  <td colspan="23"><img src="port/images/spacer.gif" width="743" height="2" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="1" height="2" border="0" alt=""></td>
 </tr>
 <tr>
  <td rowspan="2" colspan="21"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
     <td><div align="right"><img src="images/portheads/blnkhead.gif" name="heading" width="218" height="16" id="heading"></div></td>
    </tr>
   </table>
  </td>
  <td rowspan="3"><a href="prof.htm"><img src="port/images/bport01_r3_c26.gif" alt="" name="bport01_r3_c26" width="66" height="68" border="0" onMouseOver="MM_swapImage('heading','','images/portheads/profhead.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>
  <td rowspan="20">&nbsp;</td>
  <td><img src="port/images/spacer.gif" width="1" height="38" border="0" alt=""></td>
 </tr>
 <tr>
  <td colspan="3">&nbsp;</td>
  <td><img src="port/images/spacer.gif" width="1" height="7" border="0" alt=""></td>
 </tr>
 <tr>
  <td rowspan="9" colspan="15"><img src="images/enlarport/cos/dgchor.gif" name="bigpic" width="457" height="312" id="bigpic" onMouseDown="MM_swapImage('bigpic','','images/enlarport/cos/dgchor.gif',1)" onMouseUp="MM_swapImgRestore()"></td>
  <td rowspan="11" colspan="8">&nbsp;</td> <td rowspan="18">&nbsp;</td>
  <td><img src="port/images/spacer.gif" width="1" height="23" border="0" alt=""></td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td><img src="port/images/spacer.gif" width="1" height="10" border="0" alt=""></td>
 </tr>
 <tr>
  <td><a href="portint.htm"><img src="port/images/bport01_r7_c26.gif" width="66" height="68" border="0" onMouseOver="MM_swapImage('heading','','images/portheads/inthead.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>
  <td><img src="port/images/spacer.gif" width="1" height="68" border="0" alt=""></td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td><img src="port/images/spacer.gif" width="1" height="10" border="0" alt=""></td>
 </tr>
 <tr>
  <td><img src="port/images/bport01_r9_c26.gif" alt="" name="bport01_r9_c26" width="66" height="68" border="0" onMouseOver="MM_swapImage('heading','','images/portheads/profhead.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
  <td><img src="port/images/spacer.gif" width="1" height="68" border="0" alt=""></td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td><img src="port/images/spacer.gif" width="1" height="9" border="0" alt=""></td>
 </tr>
 <tr>
  <td><img src="port/images/bport01_r11_c26.gif" alt="" name="bport01_r11_c26" width="66" height="68" border="0" onMouseOver="MM_swapImage('heading','','images/portheads/setshead.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
  <td><img src="port/images/spacer.gif" width="1" height="68" border="0" alt=""></td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td><img src="port/images/spacer.gif" width="1" height="9" border="0" alt=""></td>
 </tr>
 <tr>
  <td rowspan="2"><img src="images/ejthumhi/thumgif/costhhi.gif" width="67" height="68" onMouseOver="MM_swapImage('heading','','images/portheads/costhead.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
  <td><img src="port/images/spacer.gif" width="1" height="47" border="0" alt=""></td>
 </tr>
 <tr>
  <td rowspan="3" colspan="15">&nbsp;</td>
  <td><img src="port/images/spacer.gif" width="1" height="21" border="0" alt=""></td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td><img src="port/images/spacer.gif" width="1" height="10" border="0" alt=""></td>
 </tr>
 <tr>
  <td colspan="8">&nbsp;</td> <td rowspan="2"><img src="port/images/bport01_r16_c26.gif" alt="" name="bport01_r16_c26" width="66" height="68" border="0" onMouseOver="MM_swapImage('heading','','images/portheads/sculhead.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
  <td><img src="port/images/spacer.gif" width="1" height="12" border="0" alt=""></td>
 </tr>
 <tr>
  <td rowspan="3" colspan="2">&nbsp;</td>
  <td rowspan="2" colspan="2">&nbsp;</td> <td rowspan="3">&nbsp;</td>




  <td rowspan="2">&nbsp;</td> <td rowspan="3">&nbsp;</td>
  <td rowspan="2">&nbsp;</td> <td rowspan="3" colspan="2">&nbsp;</td>
  <td rowspan="2"><img class="hand" src="port/images/bport01_r17_c12.gif" alt="" name="bport01_r17_c12" width="66" height="68" border="0" onMouseDown="MM_swapImage('bigpic','','images/enlarport/cos/dgchor.gif',1)"></td>




  <td rowspan="6">&nbsp;</td>




  <td rowspan="2"><img class="hand" src="port/images/bport01_r17_c14.gif" alt="" name="bport01_r17_c14" width="66" height="68" border="0" onMouseDown="MM_swapImage('bigpic','','images/enlarport/cos/dgcoat.gif',1)"></td>



  <td rowspan="6">&nbsp;</td>



  <td rowspan="2" colspan="2"><img class="hand" src="port/images/bport01_r17_c16.gif" alt="" name="bport01_r17_c16" width="66" height="68" border="0" onMouseDown="MM_swapImage('bigpic','','images/enlarport/cos/dgrobe.gif',1)"></td>



  <td rowspan="6">&nbsp;</td>
  <td rowspan="2">&nbsp;</td> <td rowspan="6">&nbsp;</td>
  <td rowspan="2">&nbsp;</td> <td rowspan="6">&nbsp;</td>
  <td rowspan="2">&nbsp;</td> <td rowspan="6">&nbsp;</td>
  <td><img src="port/images/spacer.gif" width="1" height="56" border="0" alt=""></td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td><img src="port/images/spacer.gif" width="1" height="12" border="0" alt=""></td>
 </tr>
 <tr>
  <td colspan="2">&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td>
  <td rowspan="4">&nbsp;</td>
  <td rowspan="4">&nbsp;</td> <td rowspan="4" colspan="2">&nbsp;</td> <td rowspan="4">&nbsp;</td> <td rowspan="4">&nbsp;</td> <td rowspan="4">&nbsp;</td> <td rowspan="2"><img src="port/images/bport01_r19_c26.gif" alt="" name="bport01_r19_c26" width="66" height="68" border="0" onMouseOver="MM_swapImage('heading','','images/portheads/painhead.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
  <td><img src="port/images/spacer.gif" width="1" height="43" border="0" alt=""></td>
 </tr>
 <tr>
  <td rowspan="3"><img src="port/images/spacer.gif" width="3" height="75" border="0" alt=""></td>
  <td rowspan="2" colspan="8"><img name="bport01_r20_c3" src="port/images/bport01_r20_c3.gif" width="237" height="26" border="0" alt=""></td>
  <td rowspan="3"><img src="port/images/spacer.gif" width="3" height="75" border="0" alt=""></td>
  <td><img src="port/images/spacer.gif" width="1" height="25" border="0" alt=""></td>
 </tr>
 <tr>
  <td rowspan="2">&nbsp;</td>
  <td><img src="port/images/spacer.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td colspan="8">&nbsp;</td>
  <td><img src="port/images/spacer.gif" width="1" height="49" border="0" alt=""></td>
 </tr>
</table>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Costume</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <!-- Fireworks MX Dreamweaver MX target. Created Sun Mar 14 22:56:59 GMT+0000 (GMT Standard Time) 2004-->
  6. <script language="JavaScript" type="text/JavaScript">
  7. <!--
  8. function MM_preloadImages() { //v3.0
  9.  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  10.   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  11.   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  12. }
  13. function MM_swapImgRestore() { //v3.0
  14.  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  15. }
  16. function MM_findObj(n, d) { //v4.01
  17.  var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  18.   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  19.  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  20.  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  21.  if(!x && d.getElementById) x=d.getElementById(n); return x;
  22. }
  23. function MM_swapImage() { //v3.0
  24.  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  25.   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  26. }
  27. //-->
  28. </script>
  29. <link href="CSS/ejcss.css" rel="stylesheet" type="text/css">
  30. </head>
  31. <body bgcolor="#ffffff" onLoad="MM_preloadImages('images/portheads/profhead.gif', 'images/portheads/setshead.gif', 'images/portheads/sculhead.gif', 'images/portheads/painhead.gif', 'images/ejthumhi/thumgif/homehi.gif', 'images/enlarport/cos/dgchor.gif', 'images/enlarport/cos/dgcoat.gif', 'images/portheads/inthead.gif', 'images/portheads/costhead.gif', 'images/enlarport/cos/dgrobe.gif')">
  32. <table width="830" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
  33.  <!-- fwtable fwsrc="bport01.png" fwbase="bport01.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
  34.  <tr>
  35.   <td><img src="port/images/spacer.gif" width="12" height="1" border="0" alt=""></td>
  36.   <td><img src="port/images/spacer.gif" width="3" height="1" border="0" alt=""></td>
  37.   <td><img src="port/images/spacer.gif" width="10" height="1" border="0" alt=""></td>
  38.   <td><img src="port/images/spacer.gif" width="62" height="1" border="0" alt=""></td>
  39.   <td><img src="port/images/spacer.gif" width="4" height="1" border="0" alt=""></td>
  40.   <td><img src="port/images/spacer.gif" width="10" height="1" border="0" alt=""></td>
  41.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  42.   <td><img src="port/images/spacer.gif" width="11" height="1" border="0" alt=""></td>
  43.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  44.   <td><img src="port/images/spacer.gif" width="8" height="1" border="0" alt=""></td>
  45.   <td><img src="port/images/spacer.gif" width="3" height="1" border="0" alt=""></td>
  46.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  47.   <td><img src="port/images/spacer.gif" width="10" height="1" border="0" alt=""></td>
  48.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  49.   <td><img src="port/images/spacer.gif" width="11" height="1" border="0" alt=""></td>
  50.   <td><img src="port/images/spacer.gif" width="61" height="1" border="0" alt=""></td>
  51.   <td><img src="port/images/spacer.gif" width="5" height="1" border="0" alt=""></td>
  52.   <td><img src="port/images/spacer.gif" width="11" height="1" border="0" alt=""></td>
  53.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  54.   <td><img src="port/images/spacer.gif" width="10" height="1" border="0" alt=""></td>
  55.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  56.   <td><img src="port/images/spacer.gif" width="11" height="1" border="0" alt=""></td>
  57.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  58.   <td><img src="port/images/spacer.gif" width="15" height="1" border="0" alt=""></td>
  59.   <td><img src="port/images/spacer.gif" width="32" height="1" border="0" alt=""></td>
  60.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  61.   <td><img src="port/images/spacer.gif" width="13" height="1" border="0" alt=""></td>
  62.   <td><img src="port/images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  63.  </tr>
  64.  <tr>
  65.   <td colspan="27">&nbsp;</td>
  66.   <td><img src="port/images/spacer.gif" width="1" height="16" border="0" alt=""></td>
  67.  </tr>
  68.  <tr>
  69.   <td rowspan="21">&nbsp;</td>
  70.   <td rowspan="2" colspan="3"><a href="home.htm"><img src="port/images/bport01_r2_c2.gif" alt="" name="bport01_r2_c2" width="75" height="40" border="0" onMouseDown="MM_swapImage('bport01_r2_c2','','images/ejthumhi/thumgif/homehi.gif',1)" onMouseUp="MM_swapImgRestore()"></a></td>
  71.   <td colspan="23"><img src="port/images/spacer.gif" width="743" height="2" border="0" alt=""></td>
  72.   <td><img src="port/images/spacer.gif" width="1" height="2" border="0" alt=""></td>
  73.  </tr>
  74.  <tr>
  75.   <td rowspan="2" colspan="21"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  76.     <tr>
  77.      <td><div align="right"><img src="images/portheads/blnkhead.gif" name="heading" width="218" height="16" id="heading"></div></td>
  78.     </tr>
  79.    </table>
  80.   </td>
  81.   <td rowspan="3"><a href="prof.htm"><img src="port/images/bport01_r3_c26.gif" alt="" name="bport01_r3_c26" width="66" height="68" border="0" onMouseOver="MM_swapImage('heading','','images/portheads/profhead.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>
  82.   <td rowspan="20">&nbsp;</td>
  83.   <td><img src="port/images/spacer.gif" width="1" height="38" border="0" alt=""></td>
  84.  </tr>
  85.  <tr>
  86.   <td colspan="3">&nbsp;</td>
  87.   <td><img src="port/images/spacer.gif" width="1" height="7" border="0" alt=""></td>
  88.  </tr>
  89.  <tr>
  90.   <td rowspan="9" colspan="15"><img src="images/enlarport/cos/dgchor.gif" name="bigpic" width="457" height="312" id="bigpic" onMouseDown="MM_swapImage('bigpic','','images/enlarport/cos/dgchor.gif',1)" onMouseUp="MM_swapImgRestore()"></td>
  91.   <td rowspan="11" colspan="8">&nbsp;</td> <td rowspan="18">&nbsp;</td>
  92.   <td><img src="port/images/spacer.gif" width="1" height="23" border="0" alt=""></td>
  93.  </tr>
  94.  <tr>
  95.   <td>&nbsp;</td>
  96.   <td><img src="port/images/spacer.gif" width="1" height="10" border="0" alt=""></td>
  97.  </tr>
  98.  <tr>
  99.   <td><a href="portint.htm"><img src="port/images/bport01_r7_c26.gif" width="66" height="68" border="0" onMouseOver="MM_swapImage('heading','','images/portheads/inthead.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>
  100.   <td><img src="port/images/spacer.gif" width="1" height="68" border="0" alt=""></td>
  101.  </tr>
  102.  <tr>
  103.   <td>&nbsp;</td>
  104.   <td><img src="port/images/spacer.gif" width="1" height="10" border="0" alt=""></td>
  105.  </tr>
  106.  <tr>
  107.   <td><img src="port/images/bport01_r9_c26.gif" alt="" name="bport01_r9_c26" width="66" height="68" border="0" onMouseOver="MM_swapImage('heading','','images/portheads/profhead.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
  108.   <td><img src="port/images/spacer.gif" width="1" height="68" border="0" alt=""></td>
  109.  </tr>
  110.  <tr>
  111.   <td>&nbsp;</td>
  112.   <td><img src="port/images/spacer.gif" width="1" height="9" border="0" alt=""></td>
  113.  </tr>
  114.  <tr>
  115.   <td><img src="port/images/bport01_r11_c26.gif" alt="" name="bport01_r11_c26" width="66" height="68" border="0" onMouseOver="MM_swapImage('heading','','images/portheads/setshead.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
  116.   <td><img src="port/images/spacer.gif" width="1" height="68" border="0" alt=""></td>
  117.  </tr>
  118.  <tr>
  119.   <td>&nbsp;</td>
  120.   <td><img src="port/images/spacer.gif" width="1" height="9" border="0" alt=""></td>
  121.  </tr>
  122.  <tr>
  123.   <td rowspan="2"><img src="images/ejthumhi/thumgif/costhhi.gif" width="67" height="68" onMouseOver="MM_swapImage('heading','','images/portheads/costhead.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
  124.   <td><img src="port/images/spacer.gif" width="1" height="47" border="0" alt=""></td>
  125.  </tr>
  126.  <tr>
  127.   <td rowspan="3" colspan="15">&nbsp;</td>
  128.   <td><img src="port/images/spacer.gif" width="1" height="21" border="0" alt=""></td>
  129.  </tr>
  130.  <tr>
  131.   <td>&nbsp;</td>
  132.   <td><img src="port/images/spacer.gif" width="1" height="10" border="0" alt=""></td>
  133.  </tr>
  134.  <tr>
  135.   <td colspan="8">&nbsp;</td> <td rowspan="2"><img src="port/images/bport01_r16_c26.gif" alt="" name="bport01_r16_c26" width="66" height="68" border="0" onMouseOver="MM_swapImage('heading','','images/portheads/sculhead.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
  136.   <td><img src="port/images/spacer.gif" width="1" height="12" border="0" alt=""></td>
  137.  </tr>
  138.  <tr>
  139.   <td rowspan="3" colspan="2">&nbsp;</td>
  140.   <td rowspan="2" colspan="2">&nbsp;</td> <td rowspan="3">&nbsp;</td>
  141.   <td rowspan="2">&nbsp;</td> <td rowspan="3">&nbsp;</td>
  142.   <td rowspan="2">&nbsp;</td> <td rowspan="3" colspan="2">&nbsp;</td>
  143.   <td rowspan="2"><img class="hand" src="port/images/bport01_r17_c12.gif" alt="" name="bport01_r17_c12" width="66" height="68" border="0" onMouseDown="MM_swapImage('bigpic','','images/enlarport/cos/dgchor.gif',1)"></td>
  144.   <td rowspan="6">&nbsp;</td>
  145.   <td rowspan="2"><img class="hand" src="port/images/bport01_r17_c14.gif" alt="" name="bport01_r17_c14" width="66" height="68" border="0" onMouseDown="MM_swapImage('bigpic','','images/enlarport/cos/dgcoat.gif',1)"></td>
  146.   <td rowspan="6">&nbsp;</td>
  147.   <td rowspan="2" colspan="2"><img class="hand" src="port/images/bport01_r17_c16.gif" alt="" name="bport01_r17_c16" width="66" height="68" border="0" onMouseDown="MM_swapImage('bigpic','','images/enlarport/cos/dgrobe.gif',1)"></td>
  148.   <td rowspan="6">&nbsp;</td>
  149.   <td rowspan="2">&nbsp;</td> <td rowspan="6">&nbsp;</td>
  150.   <td rowspan="2">&nbsp;</td> <td rowspan="6">&nbsp;</td>
  151.   <td rowspan="2">&nbsp;</td> <td rowspan="6">&nbsp;</td>
  152.   <td><img src="port/images/spacer.gif" width="1" height="56" border="0" alt=""></td>
  153.  </tr>
  154.  <tr>
  155.   <td>&nbsp;</td>
  156.   <td><img src="port/images/spacer.gif" width="1" height="12" border="0" alt=""></td>
  157.  </tr>
  158.  <tr>
  159.   <td colspan="2">&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td>
  160.   <td rowspan="4">&nbsp;</td>
  161.   <td rowspan="4">&nbsp;</td> <td rowspan="4" colspan="2">&nbsp;</td> <td rowspan="4">&nbsp;</td> <td rowspan="4">&nbsp;</td> <td rowspan="4">&nbsp;</td> <td rowspan="2"><img src="port/images/bport01_r19_c26.gif" alt="" name="bport01_r19_c26" width="66" height="68" border="0" onMouseOver="MM_swapImage('heading','','images/portheads/painhead.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
  162.   <td><img src="port/images/spacer.gif" width="1" height="43" border="0" alt=""></td>
  163.  </tr>
  164.  <tr>
  165.   <td rowspan="3"><img src="port/images/spacer.gif" width="3" height="75" border="0" alt=""></td>
  166.   <td rowspan="2" colspan="8"><img name="bport01_r20_c3" src="port/images/bport01_r20_c3.gif" width="237" height="26" border="0" alt=""></td>
  167.   <td rowspan="3"><img src="port/images/spacer.gif" width="3" height="75" border="0" alt=""></td>
  168.   <td><img src="port/images/spacer.gif" width="1" height="25" border="0" alt=""></td>
  169.  </tr>
  170.  <tr>
  171.   <td rowspan="2">&nbsp;</td>
  172.   <td><img src="port/images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  173.  </tr>
  174.  <tr>
  175.   <td colspan="8">&nbsp;</td>
  176.   <td><img src="port/images/spacer.gif" width="1" height="49" border="0" alt=""></td>
  177.  </tr>
  178. </table>
  179. </body>
  180. </html>


If someone can tell me how to attach a .jpg here in a forum post, I'll post it so you can see what I'm trying to achieve and where, if that makes it clearer

Thanks. I hope this isn't too vague and I'm not asking too much.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Ok, I don't need the actual images to take a look at it, but I need to know which image you're currently using as a placeholder for the text. I can see where the three horizontal images you want to have the effect on should appear, but I'm a little uncertain where you want the text to show up. It looks like maybe the image called "heading" is the one, but some of the vertical images seem to be changing that too, so I'm a little confused. Just tell me which image that you want to replace with changing text and I'll try to modify it for you.
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi,
Thanks for looking at that.

there is a vertical band of 7 thumbnails down the right side of the page, which, on mouseover, swap an image near the top right of the page (img src="images/portheads/blnkhead.gif) called 'heading' (one vertical thumbnail shows an image heading saying profile, another props, another costumes etc, all headings are text that is done as graphics). These hrizontal thumbnails also have links activated on mousedown, to new pages with those titles.

The three separated out in the code I posted, the horizontal ones... (port/images/bport01_r17_c12.gif
port/images/bport01_r17_c14.gif
and
port/images/bport01_r17_c16.gif)
...swap an image called 'bigpic', initially set to the first horizontal thumbnail's enlargement pic... img src="images/enlarport/cos/dgchor.gif", on entering the page

Currently, there is just an image of the main page text... port/images/bport01_r5_c17.gif. That's just there for layout. I want that removed and to be actual text which changes to suitable text (just a small amount of text for each one) on mousedown...

port/images/bport01_r17_c12.gif
port/images/bport01_r17_c14.gif
and
port/images/bport01_r17_c16.gif

... as well as them changing the enlargement image to the appropriate one at mousedown.

I can get the 3 thumbnails to change the larger image when I click them, that's easy using Dreamwever's behaviours, but not a clue to how to get a small amount of text to change.

Everything I look up about it seems to be talking about servers etc.

Thanks. I hope that's clear, wouldn't be surprised if it's not.
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi,
I may be getting ahead of myself here but I also want the swapping text to be formatted by my CSS, two to three slight variations of style in each little block of text. Can one include that instruction in the code? I'm not sure where I 'keep' the text until it is needed on the page so don't know if it's 'preformatted' in the code. I assume it is.

I'm guessing all the text required (16 different bits for one page and fewer for the other 5 pages which need it) is actually already in the page code and just accessed as required, not stored elsewhere. I could be completely wrong as all I find when I read up on it is info about text stored on servers and accessed from there.

The more I learn, the more I realise how little I know :shock:

Thank you.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I can't find that image code anywhere in the code you posted before, but just for the sake of testing it out I'm going to assume that you want the text to appear above the big image. I made some simple color images just to make sure the big image was still swapping after I added the new function.

Take a look and click on the horizontal images (I didn't bother creating the small images just click on the empty boxes where they should be) and see if this is the behaviour you wanted.

[removed]

If this is what you want let me know and I'll explain how to add it to your pages.
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

hi,
That is EXACTLY what I want, only difference is mine will be in a table cell to the right of the big image.

Now, can I get my head around how to do it???? :roll:

Thank you for doing that example.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

First copy the function that does the text and css swapping and add it to the dreamweaver-created code. It can go anywhere inside the script tag and outside of the dreamweaver functions that are already there - in the example I put it at the end, but it really doesn't matter. If you're not sure what I mean view the source of the example page and you'll see where I put it.

Code: [ Select ]
function changeCaption(text, className) {
  if(document.getElementById) {
   document.getElementById("caption").innerHTML=text;
     document.getElementById("caption").className=className;
  }
}
  1. function changeCaption(text, className) {
  2.   if(document.getElementById) {
  3.    document.getElementById("caption").innerHTML=text;
  4.      document.getElementById("caption").className=className;
  5.   }
  6. }


Then add the css classes to your style sheet. You can change these to whatever fonts, colors, etc. that you want after you get it working. You can also create as many additional classes as you want.

Code: [ Select ]
.class1 {
font-family: verdana, arial, sans-serif;
color: #f5f5f5;
}
.class2 {
font-family: tahoma, arial, sans-serif;
color: #f5f5dc;
}
.class3 {
font-family: arial, sans-serif;
color: #ff0000;
}
  1. .class1 {
  2. font-family: verdana, arial, sans-serif;
  3. color: #f5f5f5;
  4. }
  5. .class2 {
  6. font-family: tahoma, arial, sans-serif;
  7. color: #f5f5dc;
  8. }
  9. .class3 {
  10. font-family: arial, sans-serif;
  11. color: #ff0000;
  12. }


Then replace the img tag that you are currently using as a placeholder for the text with this:

Code: [ Select ]
<div id="caption" class="class1">&nbsp;</div>


Then go to the horizontal images in your page that you want to have active the effect. These images are already calling one of the dreamweaver functions (behaviors), so you will add the new function call after that. Right now they look like this:

Code: [ Select ]
onMouseDown="MM_swapImage('bigpic','','images/enlarport/cos/dgcoat.gif',1)"


You will need to add a semicolon between the last parantheses and the closing double quote and then add the function call:

Code: [ Select ]
onMouseDown="MM_swapImage('bigpic','','images/enlarport/cos/dgcoat.gif',1);changeCaption('Your text goes here for this image dgcoat.gif','class2')"


So the text is stored here within the call to the function that will swap it along with the name of the css class that you want to change along with the text. Remember to only use single quotes around the text and class name (and don't put a dot before the class name like you would inside a style sheet).

You can use this last bit of code as a template to create your function calls:

Code: [ Select ]
;changeCaption('Your text message','yourClassName')


replace the generic terms with whatever text you want and a css class name and then paste it into the current OnMouseDown just before the closing double quote.
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi.
Thank you so much, I got it to work. Despite your fabulously clear instructions and even an example page to follow, it took me hours to get it right..... d'oh! Sometimes I wonder about myself! :oops:

I have three further questions now, I'm afraid.

The site, as far as it's done to date, is temporarily at
http://elainemjohnston.mysite.freeserve.com/

If, in the home page, you click on the 5th thumbnail from the left, the Costumes one, to go to that page, you will see it. I've only added text to the first horizontal thumbnail, as yet.

What I need to know now is...

1. how do I have the text that is now 'attached' to the first thumbnail, visible when the page is entered, as well as returning when the first horizontal thumbnail is clicked? I want it to show on entry and change when the other thumbnails are clicked, then change back when the first one is clicked.


2. How do I format the text in a single block, with 3 styles on the stylesheet? I need the first line to be in style/class1, the second in class3 and the third in class2, all in that one block of swapped text. I tried numerous things but all failed.


3. How do I space out the text out as it looks there? I tried paragraphs as well as line breaks but it didn't work. I ended up putting in masses of line breaks to achieve what I want but that can't be right.


Thank you so much for having taken the time to do the example and explain it to me so clearly. I really appreciate it. The 'eureka!!' feeling when it worked was wonderful. :D
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

I've just noticed the text sits in a different position in Firefox from the position in IE and Netscape.

That may be due to my use of lind breaks to shunt it up the cell to nearer the top. I don't know how else to do that. There are differing amounts of text to fit in that area when it swaps.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I think the only thing you really want to have in that td cell is the div tag that will contain the swapped text. To make the text align to the top of the cell I would add valign="top" to that td tag. To make the text for your first thumbnail appear when the page loads just replace the &nbsp; character inside the div with the same text that you are passing to the swapping function when the first thumbnail image is clicked.

If you want to have different formatting applied to the same block of text you will have to pass html tags along with the text and specify the class names (instead of swapping just one class for the whole thing). For this example I used a h1 and a couple of p tags, but you could set it up anyway you want.

So instead of:

Code: [ Select ]
<div id="caption" class="class1">&nbsp;</div>


You would put something like:

Code: [ Select ]
<div id="caption"><h1 class=redhead>Your header</h1><p class=class1>Your text goes here for the first thumbnail.</p><p class=class2>Your text goes here for the first thumbnail</p>


And then you would change the text inside the function calls. The function call that matches the image that is displayed when the page is loaded (presumably the first one on the left) would pass the same text as that which you put inside the div tag itself - that way the default message will show when the page is loaded and if the user clicks on the first thumbnail later on after it has been replaced by something else it will reappear.

Code: [ Select ]
changeCaption('<h1 class=redhead>Your header</h1><p class=class1>Your text goes here for the first thumbnail</p><p class=class2>Your text goes here for the first thumbnail</p>','')


Note that I removed the className that I was passing to the function after the text and replaced it with a blank string '' since we're not using it anymore - that's two single quotes not one double quotation mark. I also didn't put any quotes around the class=redhead part because it will cause the function call to break. I usually do use them as it's good practice and required in newer xhtml documents, but in this particular case you must leave them unquoted..

Another minor note: if you use header tags like I did in this example then you probably want to add margin-top: 0px; to whatever class you are using with them so they will appear nice and flush with the top of the td table cell.

I don't have firefox installed at the moment to test it, but it shows up in exactly the same place for IE6, Mozilla 1.6 and Opera 7, so hopefully it will in firefox too.
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi,
absolutely perfect!! Just what I wanted. I even got it to work pretty much straight away this time, once I'd finally got some sleep and could think straight again.

Thank you so much. You chose the right profession, you are very patient and explain things very clearly. An ideal teacher. Greatly appreciated.

Now just a zillion other thumbnails to apply the code to by yesterday........ :shock:

Thanks again.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I'm glad it worked out for you. :thumbsup:

:D
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi.

Aha, a new question has arisen.
Some of the text that swaps, requires words with apostrophes (e.g. Nico's) but when I put in an apostrophe it affects the code, rather than just being part of a word in the text, and stops the swapping text working.

How can I add apostrophes to words without it affecting the code? Without them text has punctuation errors which I really can't leave.

Thanks
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Hmm, well you could store the messages inside variables and pass those to the function instead. You would only have to do this for the ones with the apostrophes although you might decide to do it for all of the messages in the long run for consistency. You could declare the variables at the end of the script right after the last function (or anywhere in the script tag outside of the functions) like this:

Code: [ Select ]
var message2 = "<h1 class=bluehead>Your header</h1><p class=class3>Nico's text goes here for the second thumbnail</p><p class=class4>Nico's text goes here for the second thumbnail</p>";


and then call the function for that thumb with:

Code: [ Select ]
changeCaption(message2,'')


You can use single quotes inside a string declared as a variable like that as long as it begins and ends with the double quotes.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

A string in JavaScript can be surrounded in double quotes or signle quotes, so you can do as Rich says, or if you need both inside the string, you can "escape" them by putting a backslash (\) before them.

This works with man characters:
\' = single quote IF the string is surounded in single quotes (otherwise take the \ away).
example: 'Fred\'s cat is black'
\" = double quote IF the string is surounded in double quotes (otherwise take the \ away).
example: "Fred's cat is called \"Tommy\"."
\n = new line.
example: "Line one.\nLine two."
whan you actually want \n to appear in the string just like that, you need to escape the backslash: \\ = \ (e.g. \n = new line but \\n = the actual characters "\n" ).
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Yay! I have apostrophes. I couldn't have borne to leave them out.

Thank you!!
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi,
I got the text to swap on mouseclick, be formatted and include punctuation, much to my delight. However, two further questions have now arisen...

Q1. The text swapping is perfect in IE but in Netscape and Mozilla, the inital text on display, when the page opens, is slightly differently positioned than the text attached to the horizontal thumbnails, you can see it 'jump' when one is clicked. Any way round this? I tried various things but with no success.


Q2. How do I include a linked url in the swapping text?


The site is temporarily at...

http://elainemjohnston.mysite.freeserve.com/


While I'm here, digressing a tad, can anyone advise me on how to make an animation with a pic that fades in, look smooth, I tried in Flash but it wasn't great, it was jerky and the quality of the image deteriorated badly, and I tried in Image Ready, which I know even less about than Flash, but, although the image quality is fine, the fade in is mighty jerky. I've messed about with frame rates but I don't seem to be getting it right.



Thank you.
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Ah, just realised that Q2. was not particularly clear.

What I mean is, how do I include a piece of text in my swapping text which is inked to elsewhere, like another page or site? E.g. if I had the phrase, Ozzu forum site, in the swapping text with a link to the forum site, how would I write that into the swapping text?

Thanks.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

#1 - I'd have to see it to get an idea.

#2 - Lets see the code for the swapping text.
But if it's in a JavaSCript string then just do it as normal but escape the double-quotes <a href=\"www.url.com\">...
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

hi LJ,
you can see the site and get to its code here...
http://elainemjohnston.mysite.freeserve.com/

its temporary home until I move it to its own domain, where there will be no frame with the Freeserve banner at the top.

Thanks for having a look for me.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

well #1 I can't really tell what stops it working, that code is so badly layed out and made hard to read!

#2 you are currently swapping an image not text.

so I recommend getting some better (and more suited) scripting done.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

The text swapping is taking place on subpages like this one:

http://elainemjohnston.mysite.freeserve.com/prop.html

(The main page is just using dreamweaver functions to swap an image of text.)

On the subpages when onmousedown occurs over the horizontal thumbnails a function is called that changes the innerHTML of a div with the id "caption" that is being used as a container.


Code: [ Select ]
function changeCaption(text, className) {
  if(document.getElementById) {
   document.getElementById("caption").innerHTML=text;
   document.getElementById("caption").className=className;
  }
}
  1. function changeCaption(text, className) {
  2.   if(document.getElementById) {
  3.    document.getElementById("caption").innerHTML=text;
  4.    document.getElementById("caption").className=className;
  5.   }
  6. }


The changing of className was discarded because it didn't suit cerio's needs and the second argument is being passed as an empty string. The div itself has no longer has a css class applied to it, so I don't think that's what causes the text to change position. Also I didn't experience the problem when I tested it. so I think the problem is most likely related to the html that is being passed to the function.

I'm not sure why escape characters are being mixed with regular html tags like in this example:

Code: [ Select ]
onMouseDown="changeCaption('&lt;h1 class=redhead&gt; Props &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;/h1&gt;&lt;p class=class3&gt; Don Giovanni <br/><br/> Scottish Opera<br/> <br/> &lt;br/&gt;&lt;br/&gt;&lt;/p&gt;&lt;p class=class2&gt; Bed on lowering trap\, <br/> with pyrotechnics &lt;/p&gt;','')


The only thing you need to escape is quotation marks that would break the function call and as LazyJim pointed out you can do that by placing a backslash before the quotes.

I also noticed the use of linebreaks (<br>) inside h1 tags to create spacing. Rather than putting linebreaks inside the h1 tag I think it would be better to apply a css class to the h1's that appear inside the caption div and use margin-bottom to create the spacing.

I also noticed that <br/> tags are being used which is technically incorrect because there should be a space between the r and the forward slash, i. e. <br />. I'm not sure what ramifications that has but since regular <br> is being used as well and the document does not appear to be intended to conform to xhtml I would just use the plain <br> tag.

I think that if the string of html being passed to the function is cleaned up and css is used to create your spacing that the problems with text shifting will go away. It looks like mozilla is ignoring at least one of the line breaks after the swapping occurs - although I'm really not certain why.

As far as passing a link I think you should be able to do that just by passing the a tag and escaping the quotes in the manner that LazyJim recommended.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

ah my apologies - I forgot it was onCLick - I couldn't see any text changing on the sub pages :lol:
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi,
thanks for replies.

Can anyone tell me why code changes? all those &lt;br/&gt; in there were not originally like that, they were <br/> but seem to have changed all by themselves. Only the later ones added, stayed as typed. It's not the / that does it, I don't think, as I've had them change when <br> is typed too.

Someone told me to type <br/> rather than <br> but I'll revert to just putting <br> as you say the other is not quite right and unneccesary anyway. I tend to tamper with code very little, as I know almost nothing about it, I leave as much as I can to Dreamweaver.
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi,
'I think that if the string of html being passed to the function is cleaned up and css is used to create your spacing that the problems with text shifting will go away. It looks like mozilla is ignoring at least one of the line breaks after the swapping occurs - although I'm really not certain why. '

...I'm afraid I don't know what that means. I assume the cleaning up is reverting all the <br> that seem to have changed to &lt;br/&gt; back to their original form.

I know nothing about CSS, other than using it to format text within Dreamweaver, which writes it for me, so I haven't a clue how to use css to create spacing. I'll see what I can find out about that.

Thanks for your help. Soooooo much to learn.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

The first thing I would try is fixing and moving the line breaks out of the h1 tag. Where you have:

Code: [ Select ]
<br/><br/><br/><br/></h1>


change it to:

Code: [ Select ]
</h1><br><br><br><br>


Since the escape characters for the angle brackets (<>) are apparently being converted before they are passed - since the text wouldn't show up correctly at all if they weren't - it might not be necessary to edit them all. However, it would make it a lot easier to read if they were cleaned up.

Replacing the linebreaks with css entirely would reduce the amount of html markup and also make it easier to read. In Dreamweaver you could edit the class that you already use to format the h1 and add the spacing by going into the box category where you will find the margin and padding properties that can be used to add space inside and outside an element.
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

hi.
Great, I'll have a go at that. I'll carry out your first suggestion, which looks pretty fool-proof, then try the second. At least if I mess up the second, the first will still be an improvement.

Again, your explanation is nice and clear. Thank you so much.

I'll get the hang of this stuff someday!

Post Information

  • Total Posts in this topic: 35 posts
  • Users browsing this forum: No registered users and 23 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.