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?