PDA

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">
<!-- Beginning of JavaScript -

if (document.images) {
ads = new Array(3);
ads[0] = "../MuniPortal/images/image.jpg";
ads[1] = "../MuniPortal/images/image2.jpg";
ads[2] = "../MuniPortal/images/image3.jpg";
ads[3] = "../MuniPortal/images/image4.jpg";
}

newplace = new Array(3);
newplace[0] = "../MuniPortal/FeatureTD.html"
newplace[1] = "../MuniPortal/FeatureVid.html"
newplace[2] = "../MuniPortal/FeatureWeb.html"
newplace[3] = "../MuniPortal/FeatureWP.html"

var timer = null
var counter = 0

function feature() {
timer=setTimeout("feature()", 4000);
counter++;
if (counter >= 3)
counter = 0;
document.feature.src = ads[counter];
}

function gothere() {
counter2 = counter;
window.location.href = newplace[counter2];
}

// - End of 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!