Back To Website Design Forum

swapping text on mouseclick/mousedown... how

  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Joined: Feb 07, 2004
  • Posts: 263
  • Loc: UK
  • Status: Offline

Post March 14th, 2004, 11:59 pm

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.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 14th, 2004, 11:59 pm

  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post March 15th, 2004, 2:51 am

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"
Free Programming Resources
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Joined: Feb 07, 2004
  • Posts: 263
  • Loc: UK
  • Status: Offline

Post March 15th, 2004, 3:55 am

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
  • Joined: Feb 07, 2004
  • Posts: 263
  • Loc: UK
  • Status: Offline

Post March 15th, 2004, 8:16 am

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>
  2. <html>
  3. <head>
  4. <title>Costume</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <!-- Fireworks MX Dreamweaver MX target. Created Sun Mar 14 22:56:59 GMT+0000 (GMT Standard Time) 2004-->
  7. <script language="JavaScript" type="text/JavaScript">
  8. <!--
  9. function MM_preloadImages() { //v3.0
  10.  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  11.   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  12.   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  13. }
  15. function MM_swapImgRestore() { //v3.0
  16.  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  17. }
  19. function MM_findObj(n, d) { //v4.01
  20.  var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  21.   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  22.  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  23.  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  24.  if(!x && d.getElementById) x=d.getElementById(n); return x;
  25. }
  27. function MM_swapImage() { //v3.0
  28.  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  29.   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  30. }
  31. //-->
  32. </script>
  33. <link href="CSS/ejcss.css" rel="stylesheet" type="text/css">
  34. </head>
  35. <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')">
  36. <table width="830" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
  37.  <!-- fwtable fwsrc="bport01.png" fwbase="bport01.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
  38.  <tr>
  39.   <td><img src="port/images/spacer.gif" width="12" height="1" border="0" alt=""></td>
  40.   <td><img src="port/images/spacer.gif" width="3" height="1" border="0" alt=""></td>
  41.   <td><img src="port/images/spacer.gif" width="10" height="1" border="0" alt=""></td>
  42.   <td><img src="port/images/spacer.gif" width="62" height="1" border="0" alt=""></td>
  43.   <td><img src="port/images/spacer.gif" width="4" height="1" border="0" alt=""></td>
  44.   <td><img src="port/images/spacer.gif" width="10" height="1" border="0" alt=""></td>
  45.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  46.   <td><img src="port/images/spacer.gif" width="11" height="1" border="0" alt=""></td>
  47.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  48.   <td><img src="port/images/spacer.gif" width="8" height="1" border="0" alt=""></td>
  49.   <td><img src="port/images/spacer.gif" width="3" height="1" border="0" alt=""></td>
  50.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  51.   <td><img src="port/images/spacer.gif" width="10" height="1" border="0" alt=""></td>
  52.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  53.   <td><img src="port/images/spacer.gif" width="11" height="1" border="0" alt=""></td>
  54.   <td><img src="port/images/spacer.gif" width="61" height="1" border="0" alt=""></td>
  55.   <td><img src="port/images/spacer.gif" width="5" 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="10" height="1" border="0" alt=""></td>
  59.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  60.   <td><img src="port/images/spacer.gif" width="11" height="1" border="0" alt=""></td>
  61.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  62.   <td><img src="port/images/spacer.gif" width="15" height="1" border="0" alt=""></td>
  63.   <td><img src="port/images/spacer.gif" width="32" height="1" border="0" alt=""></td>
  64.   <td><img src="port/images/spacer.gif" width="66" height="1" border="0" alt=""></td>
  65.   <td><img src="port/images/spacer.gif" width="13" height="1" border="0" alt=""></td>
  66.   <td><img src="port/images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  67.  </tr>
  69.  <tr>
  70.   <td colspan="27">&nbsp;</td>
  71.   <td><img src="port/images/spacer.gif" width="1" height="16" border="0" alt=""></td>
  72.  </tr>
  73.  <tr>
  74.   <td rowspan="21">&nbsp;</td>
  75.   <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>
  76.   <td colspan="23"><img src="port/images/spacer.gif" width="743" height="2" border="0" alt=""></td>
  77.   <td><img src="port/images/spacer.gif" width="1" height="2" border="0" alt=""></td>
  78.  </tr>
  79.  <tr>
  80.   <td rowspan="2" colspan="21"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  81.     <tr>
  82.      <td><div align="right"><img src="images/portheads/blnkhead.gif" name="heading" width="218" height="16" id="heading"></div></td>
  83.     </tr>
  84.    </table>
  85.   </td>
  86.   <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>
  87.   <td rowspan="20">&nbsp;</td>
  88.   <td><img src="port/images/spacer.gif" width="1" height="38" border="0" alt=""></td>
  89.  </tr>
  90.  <tr>
  91.   <td colspan="3">&nbsp;</td>
  92.   <td><img src="port/images/spacer.gif" width="1" height="7" border="0" alt=""></td>
  93.  </tr>
  94.  <tr>
  95.   <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>
  96.   <td rowspan="11" colspan="8">&nbsp;</td> <td rowspan="18">&nbsp;</td>
  97.   <td><img src="port/images/spacer.gif" width="1" height="23" border="0" alt=""></td>
  98.  </tr>
  99.  <tr>
  100.   <td>&nbsp;</td>
  101.   <td><img src="port/images/spacer.gif" width="1" height="10" border="0" alt=""></td>
  102.  </tr>
  103.  <tr>
  104.   <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>
  105.   <td><img src="port/images/spacer.gif" width="1" height="68" border="0" alt=""></td>
  106.  </tr>
  107.  <tr>
  108.   <td>&nbsp;</td>
  109.   <td><img src="port/images/spacer.gif" width="1" height="10" border="0" alt=""></td>
  110.  </tr>
  111.  <tr>
  112.   <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>
  113.   <td><img src="port/images/spacer.gif" width="1" height="68" border="0" alt=""></td>
  114.  </tr>
  115.  <tr>
  116.   <td>&nbsp;</td>
  117.   <td><img src="port/images/spacer.gif" width="1" height="9" border="0" alt=""></td>
  118.  </tr>
  119.  <tr>
  120.   <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>
  121.   <td><img src="port/images/spacer.gif" width="1" height="68" border="0" alt=""></td>
  122.  </tr>
  123.  <tr>
  124.   <td>&nbsp;</td>
  125.   <td><img src="port/images/spacer.gif" width="1" height="9" border="0" alt=""></td>
  126.  </tr>
  127.  <tr>
  128.   <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>
  129.   <td><img src="port/images/spacer.gif" width="1" height="47" border="0" alt=""></td>
  130.  </tr>
  131.  <tr>
  132.   <td rowspan="3" colspan="15">&nbsp;</td>
  133.   <td><img src="port/images/spacer.gif" width="1" height="21" border="0" alt=""></td>
  134.  </tr>
  135.  <tr>
  136.   <td>&nbsp;</td>
  137.   <td><img src="port/images/spacer.gif" width="1" height="10" border="0" alt=""></td>
  138.  </tr>
  139.  <tr>
  140.   <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>
  141.   <td><img src="port/images/spacer.gif" width="1" height="12" border="0" alt=""></td>
  142.  </tr>
  143.  <tr>
  144.   <td rowspan="3" colspan="2">&nbsp;</td>
  145.   <td rowspan="2" colspan="2">&nbsp;</td> <td rowspan="3">&nbsp;</td>
  150.   <td rowspan="2">&nbsp;</td> <td rowspan="3">&nbsp;</td>
  151.   <td rowspan="2">&nbsp;</td> <td rowspan="3" colspan="2">&nbsp;</td>
  152.   <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>
  157.   <td rowspan="6">&nbsp;</td>
  162.   <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>
  166.   <td rowspan="6">&nbsp;</td>
  170.   <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>
  174.   <td rowspan="6">&nbsp;</td>
  175.   <td rowspan="2">&nbsp;</td> <td rowspan="6">&nbsp;</td>
  176.   <td rowspan="2">&nbsp;</td> <td rowspan="6">&nbsp;</td>
  177.   <td rowspan="2">&nbsp;</td> <td rowspan="6">&nbsp;</td>
  178.   <td><img src="port/images/spacer.gif" width="1" height="56" border="0" alt=""></td>
  179.  </tr>
  180.  <tr>
  181.   <td>&nbsp;</td>
  182.   <td><img src="port/images/spacer.gif" width="1" height="12" border="0" alt=""></td>
  183.  </tr>
  184.  <tr>
  185.   <td colspan="2">&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td>
  186.   <td rowspan="4">&nbsp;</td>
  187.   <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>
  188.   <td><img src="port/images/spacer.gif" width="1" height="43" border="0" alt=""></td>
  189.  </tr>
  190.  <tr>
  191.   <td rowspan="3"><img src="port/images/spacer.gif" width="3" height="75" border="0" alt=""></td>
  192.   <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>
  193.   <td rowspan="3"><img src="port/images/spacer.gif" width="3" height="75" border="0" alt=""></td>
  194.   <td><img src="port/images/spacer.gif" width="1" height="25" border="0" alt=""></td>
  195.  </tr>
  196.  <tr>
  197.   <td rowspan="2">&nbsp;</td>
  198.   <td><img src="port/images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  199.  </tr>
  200.  <tr>
  201.   <td colspan="8">&nbsp;</td>
  202.   <td><img src="port/images/spacer.gif" width="1" height="49" border="0" alt=""></td>
  203.  </tr>
  204. </table>
  205. </body>
  206. </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
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post March 15th, 2004, 2:03 pm

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.
Free Programming Resources
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Joined: Feb 07, 2004
  • Posts: 263
  • Loc: UK
  • Status: Offline

Post March 15th, 2004, 3:07 pm

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
  • Joined: Feb 07, 2004
  • Posts: 263
  • Loc: UK
  • Status: Offline

Post March 15th, 2004, 3:28 pm

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
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post March 15th, 2004, 4:47 pm

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.
Free Programming Resources
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Joined: Feb 07, 2004
  • Posts: 263
  • Loc: UK
  • Status: Offline

Post March 15th, 2004, 5:16 pm

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
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post March 15th, 2004, 5:49 pm

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.
Free Programming Resources
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Joined: Feb 07, 2004
  • Posts: 263
  • Loc: UK
  • Status: Offline

Post March 16th, 2004, 9:25 pm

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
  • Joined: Feb 07, 2004
  • Posts: 263
  • Loc: UK
  • Status: Offline

Post March 16th, 2004, 10:35 pm

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
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post March 17th, 2004, 12:37 am

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.
Free Programming Resources
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Joined: Feb 07, 2004
  • Posts: 263
  • Loc: UK
  • Status: Offline

Post March 17th, 2004, 11:59 pm

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
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post March 18th, 2004, 12:47 am

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

:D
Free Programming Resources
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 18th, 2004, 12:47 am

1, 2, 3

Post Information

  • Total Posts in this topic: 35 posts
  • Users browsing this forum: No registered users and 172 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.