Results 1 to 3 of 3

Thread: change image and text on mouseover.

  1. #1
    Join Date
    Nov 2006
    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. 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()

    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];}

    <table width="1205" height="548">
    <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>
    <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>

  2. #2
    Join Date
    Dec 2008
    Portsmouth, UK
    Thanked 438 Times in 432 Posts


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <html xmlns="" xml:lang="en" lang="en">
    <script type="text/javascript">
    var myimages=[
     ['',['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','']],
     ['',['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','']],
     ['',['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','']],
     ['',['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++){
     myimages[z0][0]=new Image();
    function changeimage(a){
     var r=document.getElementById('mytable').rows ;
     for (var r=document.getElementById('mytable').rows,c,z0=1;z0<r.length;z0++){
    <a href="#" onMouseover="changeimage(myimages[0],this.href)";><img src="" alt="Most secure remote on market" width="107" height="31" /></a>
                        <a href="#" onMouseover="changeimage(myimages[1],this.href) "><img src="" alt="Most secure remote on market" width="107" height="31" /></a>
                        <a href="#" onMouseover="changeimage(myimages[2],this.href)";><img src="" alt="Most secure remote on market" width="107" height="31" /></a>
                        <a href="#" onMouseover="changeimage(myimages[3],this.href)";><img src="" alt="Most secure remote on market" width="107" height="31" /></a>
                                <p> <p><a href="javascript:warp()"><img src="" 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>
    						      <td>1-Button, Keyring Remote </td>
    						      <td>1-Large Button, Keyring Remote </td>
    						      <td>2-Button, Keyring Remote </td>
    						      <td>4-Button, Keyring Remote </td>
    						      <td>5-Button, Keyring Remote </td>
    						  <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>
    God Loves You and will never love you less.
    If my post has been useful please donate to

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

    Bornfree (09-24-2013)

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


    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, 06: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, 10:28 PM
  3. mouseOver text to change image in display area...
    By Dusty Monkey in forum JavaScript
    Replies: 6
    Last Post: 09-24-2009, 06:44 AM
  4. Change Image and text with mouseover
    By crood58 in forum JavaScript
    Replies: 2
    Last Post: 08-10-2009, 07: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, 09:40 AM


Posting Permissions

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