I have a problem using the onmouseover and onmouseout events that when passing the mouse it does the swapping of the images but it is very slow it takes a lot, there is another way to do this by following the example below. p>
<img src="imagens/img01/time011pb.png" id="img2" onmouseover="this.src='imagens/img01/time011.png'" onmouseout="this.src='imagens/img01/time011pb.png'"/>
Have you tried with css ? I'll give you an example.
span.switch {
border: 1px solid black;
cursor: pointer;
display: block;
width: 40px;
height: 40px;
background: url('http://thumb10.shutterstock.com/photos/thumb_large/546601/113982157.jpg') no-repeat 0px 0px
}
span.switch:hover {
background-position: 0px -37px;
}<html>
<head></head>
<body>
<span class="switch"></span>
</body>
</html>In this way, there is only a single image that is loaded once. When we hover over the image, CSS only changes the position of the background.
It may be the case of preloading the secondary image before displaying the primary. The images below are 900 and 700 KB, larger images can be found here .
function preloadImagem( url )
{
var img = new Image();
img.src = url;
img.onload = function () {
var container = document.getElementById('img2');
container.style.display = 'block';
};
}
preloadImagem( 'http://upload.wikimedia.org/wikipedia/commons/5/59/Blomster.jpg?v=3' );<img
src="http://upload.wikimedia.org/wikipedia/commons/9/90/Blomstereng-NAN.jpg?v=3"id="img2"
onmouseover="this.src='http://upload.wikimedia.org/wikipedia/commons/5/59/Blomster.jpg?v=3'"
onmouseout="this.src='http://upload.wikimedia.org/wikipedia/commons/9/90/Blomstereng-NAN.jpg?v=3'"
width="300"
hidden />Use img: hover, set a background-image pro img, and then another background-image for img: hover, I would at least do so.
If it helps, link