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

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>
</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

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>
</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

Thread: DOM Image Rollover on text link

Thread Tools

Search Thread

DOM Image Rollover on text link

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

Bookmarks

Bookmarks

Posting Permissions