Results 1 to 3 of 3

Thread: change image and text on mouseover.

  1. #1
    Join Date
    Nov 2006
    Posts
    116
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default change image and text on mouseover.

    Hi Guys,

    I need a little help. I have a set of images which change on mouseover. The thumbnails and in a different location to where the image changes. The bigger images are in a different table cell and the smaller thimb are in a different cell. Now i want to show different text for each image on a different cell. How can i do this? Its like showing the description for each image but in a different cell. I'm using the following code and you can see the effect here. http://www.elsema.com/auto/pentafob.htm. Go to colors tab.

    <script language="JavaScript1.1">
    var myimages=new Array()
    var gotolink="#"

    function preloadimages(){
    for (i=0;i<preloadimages.arguments.length;i++){
    myimages[i]=new Image()
    myimages[i].src=preloadimages.arguments[i]
    }
    }


    preloadimages("photos/is300.jpg","photos/is300-1.jpg","photos/is300-2.jpg","photos/is300-3.jpg")
    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>





    <table width="1205" height="548">
    <tr>
    <th width="598" scope="col"><a href="javascript:warp()"><img src="photos/is300.jpg" alt="" name="targetimage" border="0" id="targetimage2" /></font></a></th>
    <th width="595" height="357" scope="col"><a href="javascript:warp()"></a></th>
    </tr>
    <tr>
    <td><a href="photos/is300.jpg" target="_blank" onmouseover="changeimage(myimages[0],this.href); changetext(myimage[0],this.href)";><img src="images/is300.jpg" alt="Most secure remote on market" width="150" height="150"/></a><a href="#" onmouseover="changeimage(myimages[1],this.href)";><img src="images/is300-1.jpg" alt="Most secure remote on market" width="150" height="150" /></a><a href="#" onmouseover="changeimage(myimages[2],this.href)";><img src="images/is300-2.jpg" alt="Most secure remote on market" width="150" height="150" /></a><a href="#" onmouseover="changeimage(myimages[3],this.href)";><img src="images/is300-3.jpg" alt="Most secure remote on market" width="150" height="150" /></a></td>
    <td><div class="imglisting">
    <div class="smlthumb"></td>
    </tr>
    </table>

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,772
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var myimages=[
     ['http://www.elsema.com/photos/foborg.jpg',['FOB43301','1-Button, Keyring Remote'],['FOB43301L','1-Large Button, Keyring Remote'],['FOB43302','2-Button, Keyring Remote',''],['FOB43304','4-Button, Keyring Remote',''],['FOB43305','5-Button, Keyring Remote','']],
     ['http://www.elsema.com/photos/fobblk.jpg',['FOB43301BLACK','1-Button, Keyring Remote Black'],['FOB43301LBLACK','1-Large Button, Keyring Remote Black'],['FOB43302BLACK','2-Button, Keyring Remote Black',''],['FOB43304BLACK','4-Button, Keyring Remote Black',''],['FOB43305BLACK','5-Button, Keyring Remote Black','']],
     ['http://www.elsema.com/photos/fobblu.jpg',['FOB43301BLUE','1-Button, Keyring Remote Blue'],['FOB43301LBLUE','1-Large Button, Keyring Remote Blue'],['FOB43302BLUE','2-Button, Keyring Remote Blue',''],['FOB43304BLUE','4-Button, Keyring Remote Blue',''],['FOB43305BLUE','5-Button, Keyring Remote Blue','']],
     ['http://www.elsema.com/photos/fobred.jpg',['FOB43301RED','1-Button, Keyring Remote Red'],['FOB43301LRED','1-Large Button, Keyring Remote Red'],['FOB43302RED','2-Button, Keyring Remote Red',''],['FOB43304RED','4-Button, Keyring Remote Red',''],['FOB43305RED','5-Button, Keyring Remote Red','']]
    ];
    
    for (var src,z0=0;z0<myimages.length;z0++){
     src=myimages[z0][0];
     myimages[z0][0]=new Image();
     myimages[z0][0].src=src;
    }
    
    function changeimage(a){
     document.getElementById('targetimage').src=a[0].src;
     var r=document.getElementById('mytable').rows ;
     for (var r=document.getElementById('mytable').rows,c,z0=1;z0<r.length;z0++){
      c=r[z0].cells;
      c[0].innerHTML=a[z0][0];
      c[1].innerHTML=a[z0][1];
     }
    }
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    
    <p>
    <a href="#" onMouseover="changeimage(myimages[0],this.href)";><img src="http://www.elsema.com/auto/../images/orange.jpg" alt="Most secure remote on market" width="107" height="31" /></a>
                        <a href="#" onMouseover="changeimage(myimages[1],this.href) "><img src="http://www.elsema.com/auto/../images/black.jpg" alt="Most secure remote on market" width="107" height="31" /></a>
                        <a href="#" onMouseover="changeimage(myimages[2],this.href)";><img src="http://www.elsema.com/auto/../images/blue.jpg" alt="Most secure remote on market" width="107" height="31" /></a>
                        <a href="#" onMouseover="changeimage(myimages[3],this.href)";><img src="http://www.elsema.com/auto/../images/red.jpg" alt="Most secure remote on market" width="107" height="31" /></a>
    
                      <p>&nbsp;</p>
                                <p> <p><a href="javascript:warp()"><img src="http://www.elsema.com/auto/../photos/foborg.jpg" id="targetimage" border=0></a><br />
    							      </p>&nbsp; </p>
                              <table width="562" border="1" align="center" id="mytable" >
    						    <tr bgcolor="#FF6633">
    						      <th width="132" bgcolor="#FF9933" scope="col">Part Number</th>
    						      <th width="361" bgcolor="#FF9933" scope="col">Description </th>
    					        </tr>
    						    <tr>
    						      <td><strong>FOB43301</strong></td>
    						      <td>1-Button, Keyring Remote </td>
    					        </tr>
    						    <tr>
    						      <td><strong>FOB43301L</strong></td>
    						      <td>1-Large Button, Keyring Remote </td>
    					        </tr>
    						    <tr>
    						      <td><strong>FOB43302</strong></td>
    						      <td>2-Button, Keyring Remote </td>
    					        </tr>
    						    <tr>
    						      <td><strong>FOB43304</strong></td>
    						      <td>4-Button, Keyring Remote </td>
    					        </tr>
    						    <tr>
    						      <td><strong>FOB43305</strong></td>
    						      <td>5-Button, Keyring Remote </td>
    					        </tr>
    					      </table>
    						  <p>&nbsp;</p>
    						  <p><em><span lang="EN-US" xml:lang="EN-US">The FOB remotes are available in            different colours. Add the            colour code to the end of the part</span></em></p>
                              <p><em><span lang="EN-US" xml:lang="EN-US">number            to order a different colour. No colour code in the part number            is the standard            orange.</span></em></p>
                              <p><span class="red"><strong><span lang="EN-US" xml:lang="EN-US">RED = Red </span><span lang="EN-US" xml:lang="EN-US"></span></strong></span><strong><span lang="EN-US" xml:lang="EN-US">             <span class="blue">BLU = Blue</span>            <span class="black">BLK            = Black</span>           <span class="orange"> xxx =              Orange</span></span></strong></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    						</div>
    
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    Bornfree (09-24-2013)

  4. #3
    Join Date
    Nov 2006
    Posts
    116
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Thank you so very much. Does exactly what i want

Similar Threads

  1. Change Text Color with Mouseover
    By vkbarefoot in forum Looking for such a script or service
    Replies: 3
    Last Post: 12-18-2012, 05:32 PM
  2. Resolved Change Table BG image upon mouseover of text/image
    By lrickyutah in forum CSS
    Replies: 6
    Last Post: 11-16-2010, 09:28 PM
  3. mouseOver text to change image in display area...
    By Dusty Monkey in forum JavaScript
    Replies: 6
    Last Post: 09-24-2009, 05:44 AM
  4. Change Image and text with mouseover
    By crood58 in forum JavaScript
    Replies: 2
    Last Post: 08-10-2009, 06:27 PM
  5. on mouseover to change image and text in cell?
    By sleric in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-19-2005, 08:40 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •