Ultimate fade-in slideshow question

[nycguurl]

Ultimate fade-in slideshow
http://www.dynamicdrive.com/dynamici...nslideshow.htm

In this script (which I love!) is there any way in the images part to also add a mouseover, so not only will the images be clickable to a certain URL, but on mouseover one of them can change to an image I specify?


This is the part I mean:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""]
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""]
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"]

[jscheuer1]

Not precisely. You could include the mouseover images there, like so:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", "", "photo1_over.jpg"]
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", "", "photo2_over.jpg"] 
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new", "photo3_over.jpg"]

But that would just be the beginning. Like any other mouseover images, they would need to be preloaded. Here would be a good place:

 . . . tion() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
this.overimages=new Array() //preload mouseover images
for (var o=0;o<theimages.length;o++)
if(theimages[o][3]){
this.overimages[o]=new Image()
this.overimages[o].src=theimages[o][3]
}

Then mouseover/mouseout code would need to be added here:

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
if (this.theimages[picindex][3])
slideHTML+='<img src="'+this.postimages[picindex].src+'" onmouseover="this.src=\''+this.overimages[picindex].src+'\';" onmouseout="this.src=\''+this.postimages[picindex].src+'\';" border="'+this.imageborder+'">'
else
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

[nycguurl]

Wow. I don't have the highest hopes that I'll be able to follow, but you bet your bottom dollar I'm gonna try. Thank you so much!

[jpneruda]

Hi,
Is there any way to start fadeshow() when page finishes loading? like window.onload event ...
My images are something big (kb size) and take too mucho to load.. I want to render all page first.

[jscheuer1]

Hi,
Is there any way to start fadeshow() when page finishes loading? like window.onload event ...
My images are something big (kb size) and take too mucho to load.. I want to render all page first.

No. The fadeshow() function uses the document.write() method to write HTML code to the page as it is being parsed by the browser. If you wait until after the page has loaded to do that, it will obliterate everything else that is already on the page.

If you have only one slide show on the page, you could remove this from fadeshow():

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}

And make an onload event:

window.onload=function(){
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
fadearray[0].startit();
else{
fadearray[0].curimageindex++;
setInterval("fadearray[0].rotateimage()", fadearray[0].delay);
}
};

Of course, if you already have another onload event, you will have to prevent any conflict with it.

More Importantly, this might not solve your problem (although it may, I'm just not sure what you are going for). You might be better off with Swiss Army:

http://www.dynamicdrive.com/dynamici...army/index.htm

which only preloads a few images at first, and then incrementally preloads future images as you are viewing current ones until all images are cached.

Swiss Army may be configured to look exactly like U-Fade, if desired.