On MouseOver change of images sometimes "flashes"

Question

I use an imagemap with the following code:

<img name="team" src="team.jpg" width="2560" height="1600" border="0" usemap="#team" alt="" />

<map name="team">
<area shape="rect" coords="495,308,887,794" alt="" onMouseOver="document.team.src='team_a.jpg'" onMouseOut="document.team.src='team.jpg'" >
<area shape="rect" coords="1022,513,1342,897" alt="" onMouseOver="document.team.src='team_b.jpg'" onMouseOut="document.team.src='team.jpg'" >
<area shape="rect" coords="1510,480,1679,691" alt="" onMouseOver="document.team.src='team_c.jpg'" onMouseOut="document.team.src='team.jpg'" >
</map>

This works fine, but often the change of images "flashes".

Is there anything that can be added to the code? Should I preload the images? Are perhaps the images to big?

Answer 1

The solution is to preload the images. If you are using jQuery you can count on Lazyload.

Anyways, there are a lot of alternatives and not only with Javascript. In this article is pretty well explained.