¿Como puedo hacer con jQuery para que al poner el cursor sobre una imagen, ésta cambie a otra?

publicado por: Anonymous

Cuando son pocas imágenes hago lo siguiente. Pero mi duda es cuando son muchas ya que quiero hacer algo como en esta página de ropa

$(document).ready(function(){
  $("img").hover(cambiar, restaurar);
});
function cambiar(e){
  if(e.target==img1){
    $("#img1").attr("src", "saco1.1.jpg");
  }
  if(e.target==img2){
    $("#img2").attr("src", "saco2.1.jpg"); 
  }
} 
function restaurar(e){
  if(e.target==img1){
    $("#img1").attr("src", "saco1.jpg");
  }
  if(e.target==img2){
    $("#img2").attr("src", "saco2.1.jpg"); 
  }
}

solución

Un método posible si tienes las imágenes con nombres relacionados (como parece que es con saco1.jpg y saco1.1.jpg, aunque para el saco 2 parece que hay un fallo porque son la misma imagen), podrías hacer algo que reemplazase en el src sólo la cadena que necesitas.

Por ejemplo, si la imagen en estado normal es sacoX.jpg (donde X es un número) y cuando se pasa el ratón por encima es sacoX.1.jpg, entonces podrías hacer algo como esto:

$(document).ready(function(){
  $("img").hover(cambiar, restaurar);
});
function cambiar(e){
  $(this).attr("src", $(this).attr("src").replace(".jpg", ".1.jpg") );
} 
function restaurar(e){
  $(this).attr("src", $(this).attr("src").replace(".1.jpg", ".jpg") );
}

A todas las imágenes se les aplica la misma función de manera genérica.


Ahora, para esto realmente no hace falta JavaScript, podrías obtener un resultado similar si crearas un contenedor que tuviera las dos imágenes pero sólo se mostrara una en cada momento (usado el atributo display). Por ejemplo, algo como esto:

_x000D_

_x000D_

div { width:200px; height:200px; }_x000D_
div .activa { display:block; }_x000D_
div .oculta { display:none; }_x000D_
div:hover .activa { display:none; }_x000D_
div:hover .oculta { display:block; }

_x000D_

<div>_x000D_
  <img class="activa" src="http://lorempixel.com/200/200/people" />_x000D_
  <img class="oculta" src="http://lorempixel.com/200/200/cats" />_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *