PDA

View Full Version : DOM Image Rollover on text link



dmwhipp
02-10-2011, 11:13 PM
1) Script Title: DOM Image Rollover II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex15/domroll2.htm

3) Describe problem: I would like the image to switch when clicking a text link

I have the image rollover working perfectly here: http://www.flimpact.org/seahc/data.html

I would also like the images to switch when you click on the "view data >" links too.

Thanks,
Deborah

vwphillips
02-11-2011, 11:09 AM
<!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>
</head>

<body>

<input type="button" name="" value="Mouse Over Image" onmousedown="SI.SwapImage(0,2);"/>
<input type="button" name="" value="Mouse Down Image" onmousedown="SI.SwapImage(0,3);"/>
<input type="button" name="" value="Mouse Out Image" onmousedown="SI.SwapImage(0,1);"/>
<br />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Img" class="mouseover:http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg mousedown:http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Img" class="mouseover:http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg mousedown:http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" />


<script type="text/javascript">
/*<![CDATA[*/

function zxcRollOver(){
var imgs=document.body.getElementsByTagName('IMG'),z0=0,z0a,cls,i,s,o,preload=[],z1,src;
this.ary=[];
for (;z0<imgs.length;z0++){
this.ary[z0]=[imgs[z0]];
cls=imgs[z0].className;
if (cls){
cls=cls.split(/\s/);
for (z0a=0;z0a<cls.length;z0a++){
i=cls[z0a].indexOf(':')
if (i>4){
this.ary[z0][1]=imgs[z0].src;
o=cls[z0a].substring(0,i).toLowerCase();
if (o=='mouseover'){
this.ary[z0][2]=cls[z0a].substring(i+1);
preload.push(this.ary[z0][2]);
this.addevt(imgs[z0],'mouseover','SwapImage',z0);
this.addevt(imgs[z0],'mouseout','SwapImage',z0);
}
if (o=='mousedown'){
preload.push(this.ary[z0][2]);
this.ary[z0][3]=cls[z0a].substring(i+1);
this.addevt(imgs[z0],'mousedown','SwapImage',z0);
this.addevt(imgs[z0],'mouseup','SwapImage',z0);
}
}
}
}
}
for (;z1<preload.length;z1++){
src=preload[z1];
preload[z1]=new Image();
preload[z1].src=src;
}
}

zxcRollOver.prototype={

SwapImage:function(nu,e){
var inu,ary=this.ary[nu];
if (ary){
if (typeof(e)=='number'){
inu=e;
}
else {
inu=e.type=='mouseout'?1:e.type=='mouseover'?2:e.type=='mousedown'?3:ary[2]?2:1;
}
if (ary[inu]){
ary[0].src=ary[inu];
}
}
},


addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}


}


function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}


SI=new zxcRollOver()

/*]]>*/
</script>

</body>

</html>

dmwhipp
02-11-2011, 01:46 PM
Hi Vic,
Thanks for the reply, but I don't understand how this could perform what I need.

Here's my page: http://www.flimpact.org/seahc/data.html

Right now, when you mouseover the photo of the baby foot, it switches to an image of textual data.

What I need is for when you click the text "view data", beneath the baby foot photo, that also would make the image switch from the baby foot to the image of textual data.

Here's the page with your code installed: http://www.flimpact.org/seahc/data2.html

Can this script be edited to do what I need?

Thanks,
Deborah

vwphillips
02-11-2011, 02:38 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>
</head>

<body>

<a href="#" onmousedown="SI.SwapImage(0,2); return false;" >Image 0 Over</a>
<a href="#" onmousedown="SI.SwapImage(0,1); return false;" >Image 0 Out</a>
<br />
<a href="#" onmousedown="SI.SwapImage(1,2); return false;" >Image 1 Over</a>
<a href="#" onmousedown="SI.SwapImage(1,1); return false;" >Image 1 Out</a>
<br />
<a href="#" onmousedown="SI.SwapImage(2,2); return false;" >Image 2 Over</a>
<a href="#" onmousedown="SI.SwapImage(2,1); return false;" >Image 2 Out</a>


<table class="data" width="100%" cellpadding="10" cellspacing="0" border="0">
<tr>
<td class="dataimage" width="239"><img src="http://www.flimpact.org/seahc/graphics/data-birthweight.png" class="mouseover:http://www.flimpact.org/seahc/graphics/ro-birthweight.gif" width="219" height="219" border="0" alt="Low Birth Weight Data"></td>
<td width="10"><img src="http://www.flimpact.org/seahc/seahc/graphics/1x1.gif" width="10" height="1" border="0" alt=""></td>
<td class="dataimage" width="239"><img src="http://www.flimpact.org/seahc/graphics/data-obesity.png" class="mouseover:http://www.flimpact.org/seahc/graphics/ro-obesity.gif" width="219" height="219" border="0" alt="Obesity Data"></td>
<td width="10"><img src="http://www.flimpact.org/seahc/seahc/graphics/1x1.gif" width="10" height="1" border="0" alt=""></td>
<td class="dataimage" width="239"><img src="http://www.flimpact.org/seahc/graphics/data-diabetes.png" class="mouseover:http://www.flimpact.org/seahc/graphics/ro-diabetes.gif" width="219" height="219" border="0" alt="Diabetes Data"></td>

</tr>

</table>

<script type="text/javascript">
/*<![CDATA[*/

function zxcRollOver(){
var imgs=document.body.getElementsByTagName('IMG'),z0=0,z0a,cls,i,s,o,preload=[],z1,src,cnt=0;
this.ary=[];
for (;z0<imgs.length;z0++){
cls=imgs[z0].className;
if (cls){
cls=cls.split(/\s/);
for (z0a=0;z0a<cls.length;z0a++){
i=cls[z0a].indexOf(':')
if (i>4){
this.ary[cnt]=[imgs[z0]];
this.ary[cnt][1]=imgs[z0].src;
o=cls[z0a].substring(0,i).toLowerCase();
if (o=='mouseover'){
this.ary[cnt][2]=cls[z0a].substring(i+1);
preload.push(this.ary[cnt][2]);
this.addevt(imgs[z0],'mouseover','SwapImage',cnt);
this.addevt(imgs[z0],'mouseout','SwapImage',cnt);
}
if (o=='mousedown'){
this.ary[cnt][3]=cls[z0a].substring(i+1);
preload.push(this.ary[cnt][3]);
this.addevt(imgs[z0],'mousedown','SwapImage',cnt);
this.addevt(imgs[z0],'mouseup','SwapImage',cnt);
}
cnt++;
}
}
}
}
for (;z1<preload.length;z1++){
src=preload[z1];
preload[z1]=new Image();
preload[z1].src=src;
}
}

zxcRollOver.prototype={

SwapImage:function(nu,e){
var inu,ary=this.ary[nu];
if (ary){
if (typeof(e)=='number'){
inu=e;
}
else {
inu=e.type=='mouseout'?1:e.type=='mouseover'?2:e.type=='mousedown'?3:ary[2]?2:1;
}
if (ary[inu]){
ary[0].src=ary[inu];
}
}
},


addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}


}




SI=new zxcRollOver()

/*]]>*/
</script>

</body>

</html></body>

</html>

dmwhipp
02-11-2011, 07:27 PM
Thank you!

I did remove the script from that page and call it externally, but it's working perfectly with no coding errors: http://www.flimpact.org/seahc/data.html

This is exactly what they wanted.
Thanks again,
Deborah