0

Estou com um problema ao utilizar os eventos onmouseover e onmouseout que ao passar o mouse ele faz a troca das imagens mas ele é muito lento demora muito, existe outra forma para fazer isso seguindo o exemplo abaixo.

<img src="imagens/img01/time011pb.png" id="img2" onmouseover="this.src='imagens/img01/time011.png'" onmouseout="this.src='imagens/img01/time011pb.png'"/>
2
  • Bruno, tens mais imagens que precisem dessa funcionalidade ou é só uma caso único?
    – Sergio
    Commented 20/10/2014 às 16:47
  • Você quer trocar as imagens ou só colocá-la em escala de cinza? Se for só escala de cinza, não precisa ser outra imagem
    – Caputo
    Commented 20/10/2014 às 17:18

3 Respostas 3

1

Já tentou com css? Vou dar um exemplo.

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>

Dessa maneira, existe apenas uma única imagem que é carregada uma única vez. Quando passamos o mouse por cima da imagem, o CSS apenas muda a posição do background.

1

Talvez seja o caso de fazer um preload da imagem secundária antes de mostrar a primária. As imagens abaixo tem 900 e 700 KB, imagens maiores podem ser encontradas aqui.

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 />

Referência: JavaScript Preloading Images

0

Usa o img:hover, define um background-image pro img, e depois outra background-image para o img:hover, eu pelo menos faria assim.

Se ajudar, http://www.corelangs.com/css/box/hover.html

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .