8
im producing a banner and want the banner to rotate and fade in and out to the next image. i want to link each image to a SEPERATE site! I can get it to work with out the fading effect and can get them all to link to one site with fading! both images and links are in seperate arrays! please help someone!
code below:
[HTML]<html>
<body onLoad="runSlideShow()" >
<SCRIPT LANGUAGE="JavaScript">
var slideShowSpeed = 10000;
var Pic = new Array(5);
Pic[0] = "1.jpg";
Pic[1] = "2.jpg";
Pic[2] = "3.jpg";
Pic[3] = "4.jpg";
Pic[4] = "5.jpg";
var url = new Array(5);
url[0] = "http://www.google.com";
url[1] = "http://www.yahoo.com";
url[2] = "http://www.lovecargo.com";
url[3] = "http://www.257oops.com";
url[4] = "http://www.257group.com";
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
var crossFadeDuration = 8;
var counter = 0;
var timer = null;
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans (duration=2)";
document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply ();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play( );
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
function banner() {
timer=setTimeout("banner()", 4000);
counter++;
if (counter >= 3)
counter = 0;
document.bannerad.src = Pic[counter];
}
function gothere() {
counter2 = counter;
window.location.href = url[counter2];
}
}
</script>
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150 >
<a href="javascript:gothere()"><img src="1.jpg" name='SlideShow'></a>
</td>
</tr>
</table>
</center>
</body>
</html>
[/HTML]
cheers
