Events onmouseover and onmouseout slow to exchange images

Asked

Viewed 5,268 times

0

I have a problem using the events onmouseover and onmouseout that when passing the mouse it makes the exchange of the images but it is very slow takes too long, there is another way to do this by following the example below.

<img src="imagens/img01/time011pb.png" id="img2" onmouseover="this.src='imagens/img01/time011.png'" onmouseout="this.src='imagens/img01/time011pb.png'"/>
javascript html

  • Bruno, do you have more images that need this functionality or is it just a unique case?

  • Do you want to change the images or just grayscale it? If it’s just grayscale, it doesn’t have to be another image

3 answers

1

Have you tried with css? Let me 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>

That way, there is only one image that is loaded once. When you hover over the image, the CSS only changes the background position.

1

Perhaps it is the case to make a preview of the secondary image before showing 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 />

Reference: Javascript Preloading Images

0

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.