[RESOLVED] OnMouseOver image loading works only 2nd time

[Laslow]

Hi,
I use DIV tags with onMouseOver action on the DIV-s. I want to download and show a photo if an onMouseOver activates. This is simple and works but there is a problem.

First time I move my mouse cursor on the DIV the photo doesn't appear, only its border. When I move the mouse off and back again, the photo appears right. I want to show the photo first time well.

There is a solution: preloading images with JavaScript invoked with the onLoad event of the BODY tag. But I would have numerous (100+) photos, so it's a bad idea to preload all the photos (and users usually want to see only a few, not all of them). It is acceptable to wait a second or two after activating onMouseOver while the photo is downloading but it's not acceptable to do TWO onMouseOver actions for a photo.

The testpage with only five photos: http://teszt8.elin.hu/proba/

The problem when I move the mouse cursor on a DIV first time: http://teszt8.elin.hu/proba/hiba.jpg (Only the border appears, the photo doesn't.)

After the browser downloads the photos it works well for some minutes or for the next browser restart. I've tried with IE8 and Firefox 3.6.8, works bad with both.

Please help, what's the solution?

[Sterling Isfine]

function showimage(image, show, e) {
// Download image:
var newImg2 = new Image();
newImg2.src = image;
var imageheight = newImg2.height;
var imagewidth = newImg2.width;

You have a preloading function that you choose not to use.
This means that when you try to get the dimensions of the image, it has not loaded, so the height and width are probably zero, which will cause an error when later you use those values as divisors.

[Laslow]

That's right, this is the problem! Really thank you, have a nice day!