PDA

View Full Version : Images with Switch Menu II



Markxxx
05-24-2006, 03:24 AM
This questions refers to this script

http://www.dynamicdrive.com/dynamicindex1/switchmenu2.htm



Instead of using text I wanted to use an image and make it a link

This was no issue. The pics and links work fine. But there is one issue. Until the images load it messes up the menus

Once the images have loaded (and they aren't very big) you can click to close the menu tree and click to open it and it all looks great

Two questions, would preloading the images help it any. And if so how to write a script. I tried to do a script modifying other preloads but failed.

If anyone can tell me if this is possible let me know

So basically all I did was substitute an image (which is a clickable link) for the text in the original script (which is a clickable link)

And as I said once the images are fully loaded the script runs great. Just wondering if the preloading would help it

jscheuer1
05-24-2006, 06:14 AM
This generally works:


<script type="text/javascript">
var ims, preloadedimages;
function setItUp(){
if(document.getElementById&&document.images){
document.write('<style type="text/css">\
#someID {\
visibility:hidden;\
}\
<\/style>')

ims=new Array()
//define images. You can have as many as you want:
ims[0]="image1.jpg"
ims[1]="image2.jpg"
ims[2]="image3.jpg"

preloadedimages=new Array()
for (var i=0;i<ims.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=ims[i]
}
}
}
setItUp();

function reveal(){
if(!document.images||!document.getElementById)
return;
for (var i_tem = 0; i_tem < preloadedimages.length; i_tem++)
if (typeof preloadedimages[i_tem].complete=='boolean'&&!preloadedimages[i_tem].complete){
setTimeout("reveal();", 2000)
return;
}
document.getElementById('someID').style.visibility='visible';
}
</script>

Configure your images in the above where indicated.

Wrap the problematic HTML code on your page that requires the images be loaded in a div:


<div id="someID">

Problematic HTML goes here

</div>

Add reveal(); to your page's onload event(s).

Markxxx
05-26-2006, 02:00 AM
thanks worked great