Java Script question

slideshow that's triggered onMouseOver

[pauliv]

I need to do the following:
OnMouseOver i have a new image appeared. I wanna have this image left untill the next MouseOver.
How can i do this?

Thanx in advance.

[joshie76]

Hi Pauliv,

Sorry, I'm not entirely sure what you're after:

Do you mean that, for example, you have three links. When you mouseover link 1 you want to show picture 1. Picture 1 should remain shown until someone mouses over link 2 or 3 when picture 2 or 3 should be shown?

If so, then this is pretty easy (if you can already change images*) just don't have an onMouseOut event that restores the picture back to it's default.

*if not this should get you started:
[hotwired.lycos.com...]
Just search for 'Javascript rollovers' for more...

J

[pauliv]

Ok. that's not quite this, but I've found what i needed!

check it out on:
[monmouth.com...] and try to roll over images a couple of times.

[tedster]

That's what I thought you might be after -- a kind of slideshow that's triggered onMouseOver instead of onClick.

Here's some food for thought. Pre-loading all the possible images can take a lot of bandwidth. If you don't pre-load (as in the example page) a mouseover may create a blank space for some period of time, especially on dial-up connections.

I'd think about preloading the next image into the cache at the same time that the mouseover displays a new current image, unless you're not designing for Internet access.

[pauliv]

Thanks for your advice!

But how is it can be done:
preloading into the cache at the same time that the mouseover displays a new current image?

Nevertheless, if i put 6-9 images into preload, would this mean a lot of bandwidth?

[tedster]

I'm going to assume we're looking a the code for the page you referenced.

The basic javascript to cache a new 50x50 image without rendering it is this:

imgLoad() {
image01=new Image(50,50);
image01.src="[insert the image's URL here]";
}

If you only use this effect in one place, you could preload all the images you're going to use in the HEAD section using this code, and that's the end of it.

But if you want to use the effect in many places on one page, that probably won't work very well unless the file size of your images is very small. It's just too many images and people may well mouseover a spot before their next image is ready in the cache -- they'll get the blank spot.

So, if you are using this in more than one spot, the first thing you want to do is preload all the #2 images right away from the HEAD section, using the code above.

Then, each time the function is called by a mouseover event you want to preload the next image for that spot. To do this we can define another variable (lets call it preImage) and use that to preload the next image in line. The best place to insert this code snippet is right at the end of the "if (document.image)" section in the existing code. Note that this only uses "if count<5" instead of 6.

if (count<5) {
preImage="images/" + imgName + "Flake" + (count+2) + ".gif"
image01=new Image(50,50);
image01.src=preImage;
}