5

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"); 
  }
}
1
  • 4
    Creo que hasta con css solamente podrias hacerlo pienso yo, cuando estes sobre la imagen, que se oculte y muestre el fondo Commented el 18 may. 2016 a las 2:40

3 respuestas 3

3

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:

div { width:200px; height:200px; }
div .activa { display:block; }
div .oculta { display:none; }
div:hover .activa { display:none; }
div:hover .oculta { display:block; }
<div>
  <img class="activa" src="http://lorempixel.com/200/200/people" />
  <img class="oculta" src="http://lorempixel.com/200/200/cats" />
</div>

1
  • Funciono perfecto con CSS pero me surgio una duda. ¿Por que al ponerlo asi .activa:hover{ display: none} no funciona, y al poner un div como en tu ejemplo, si funciona? Commented el 21 may. 2016 a las 19:44
2

Otra forma de hacerlo es con mouseenter y mouseleave:

Ver Demo

HTML:

<img id="img" src="https://www.gstatic.com/webp/gallery3/1.png">

JQUERY:

$(document).on({        
    mouseenter: function() { $(this).attr('src', 'https://www.gstatic.com/webp/gallery3/2.png'); },
    mouseleave: function() { $(this).attr('src', 'https://www.gstatic.com/webp/gallery3/1.png'); }
}, '#img');

O en puro Javascript:

<img src='https://www.gstatic.com/webp/gallery3/1.png' onmouseover="this.src='https://www.gstatic.com/webp/gallery3/2.png';" onmouseout="this.src='https://www.gstatic.com/webp/gallery3/1.png';" width="200" height="200">

0

La única manera lógica que encontré para hacerlo, es añadiendo algún numero o algo por el estilo al parámetro. Aunque, no logre separar la parte "necesaria" es decir tomar lo anterior al .png/jpg/etc.

Lo que hice fue lo siguiente, tome como parametro IMG (de HTML) usando la función mouseover hice que pida el atributo SRC y para reemplazar la parte necesaria por el mismo mas un "1". Hice lo mismo con la función mouseleave, espero que sea lo que buscabas.

Probado y funcionando: https://jsfiddle.net/LautaroCuello/jn6dcy03/1/ (Si preguntas por que el fixed, es costumbre).

Si alguien puede añadir alguna forma de seleccionar lo que este despues del "/" y antes de ".png" seria de mucha ayuda.

Espero que no me puntúen mal, hace 2 días que comencé a aprender esto.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.