Log in

View Full Version : change image and text on mouseover.


Bornfree
09-18-2013, 10:51 PM
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>
vwphillips
09-19-2013, 12:10 PM
<!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>
Bornfree
09-24-2013, 10:27 PM
Thank you so very much. Does exactly what i want