How to alter rotating image script for multiple uses, and for more images

**ronicastro** · 05-18-2010, 08:09 PM

I'm totally ignorant of how javascript works so this might be a stupid question. Nevertheless, I need help or I'm going to cry.

I got this script online somewhere and don't know how or if I can modify it for my purposes. It allows me to rotate thru 3 different images and have each image link to a different page on my site. This is great, but I need it to do 4 images. I tried to just type in a fourth image, but that didn't work.

I also need to use this effect in 3 different areas (all with different images and links).

Here's the script:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

I also put this <body onload="feature()"> in, well, obviously, the <body> tag.

and then this:

<a href="javascript:gothere()" target="_blank"><IMG SRC="../MuniPortal/images/image.jpg" WIDTH="345" HEIGHT="100" BORDER="0" NAME="feature"></a>

(I added the target command. It didn't work.)

So anyway, how do I get it to show the 4th image? And question 2, how can I duplicate this for use with other graphics in another spot on the same page?

Thank you for any help.

**vwphillips** · 05-19-2010, 08:07 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>
<a href="#" target="_blank"><IMG id="feature" SRC="../MuniPortal/images/image.jpg" WIDTH="345" HEIGHT="100" BORDER="0" ></a>
<a href="#" target="_blank"><IMG id="feature2" SRC="../MuniPortal/images/image.jpg" WIDTH="345" HEIGHT="100" BORDER="0" ></a>

<script  type="text/javascript">

ads = [
"http://www.vicsjavascripts.org.uk/StdImages/One.gif",
"http://www.vicsjavascripts.org.uk/StdImages/Two.gif",
"http://www.vicsjavascripts.org.uk/StdImages/Three.gif",
"http://www.vicsjavascripts.org.uk/StdImages/Four.gif",
"http://www.vicsjavascripts.org.uk/StdImages/Zero.gif"
];

newplace = [
"http://www.vicsjavascripts.org.uk/StdImages/Five.gif",
"http://www.vicsjavascripts.org.uk/StdImages/Six.gif",
"http://www.vicsjavascripts.org.uk/StdImages/Seven.gif",
"http://www.vicsjavascripts.org.uk/StdImages/Eight.gif",
"http://www.vicsjavascripts.org.uk/StdImages/Nine.gif"
];

ads2 = [
"http://www.vicsjavascripts.org.uk/StdImages/One.gif",
"http://www.vicsjavascripts.org.uk/StdImages/Two.gif",
"http://www.vicsjavascripts.org.uk/StdImages/Three.gif",
"http://www.vicsjavascripts.org.uk/StdImages/Four.gif"
];

function Feature(o) {
 this.img=document.getElementById(o.ID);
 this.cnt=0;
 this.ms=o.Duration||1000;
 this.ary1=o.Array1;
 this.ary2=o.Array2;
 this.timer=null;
}

Feature.prototype.Rotate=function() {
 var oop=this;
 this.timer=setTimeout( function(){ oop.Rotate(); },this.ms);
 this.cnt=++this.cnt%this.ary1.length;
 this.img.src = this.ary1[this.cnt];
 this.img.parentNode.href=this.ary2[this.cnt]||this.ary1[this.cnt];
}


var S1=new Feature({
 ID:'feature',
 Array1:ads,
 Array2:newplace,
 Duration:1000
});

S1.Rotate();


var S2=new Feature({
 ID:'feature2',
 Array1:ads2,
 Array2:newplace,
 Duration:4000
});

S2.Rotate();

/*]]>*/
</script>

</body>

</html>

**ronicastro** · 05-19-2010, 02:37 PM

I actually figured out how to implement this in my page. You are very awesome for helping me. Thank you so much!

Thread: How to alter rotating image script for multiple uses, and for more images

Thread Tools

Search Thread

How to alter rotating image script for multiple uses, and for more images

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

I'm sure I screwed it up

Bookmarks

Bookmarks

Posting Permissions