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

View Full Version : 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

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