Rollover sobre imágenes en catálogo de ropa

[Sikaffy]

Qué tal, estoy codificando una web y mi experiencia con javascript es algo corta. Tengo un slider de imágenes, pero sobre cada imagen necesito que se muestren 2-3 cuadros con el nombre del producto, precio y el link para comprar la prenda de ropa.

En la imagen de arriba se puede ver el slider, con 3 fotos separadas (cada modelo es una foto), necesito que cuando se pase el puntero sobre cada imagen se muestren los cuadritos con la información.

Alguien me podría orientar un poco sobre esto? Ando un poco perdido. Gracias!

[stramin]

Puedes hacer las fotos con una ID única, por ejemplo con una llamada a una funcion que podríamos llamar "mostrar" con el número de la id, por ejemplo

Código HTML:

<img id="img1" onmouseover="mostrar(1)">
<img id="img2" onmouseover="mostrar(2)">
 

Deberías hacer los cuadrados invisibles con display:none, y una clase llamada "box" y otra con la id de la imagen anterior, ejemplo

Código HTML:

<style>
.box {
display:none;
}
</style>
 
<!-- cuadrados de la primera imagen -->
<div class="box box1"></div>
<div class="box box1"></div>
 
<!-- cuadrados de la segunda imagen -->
<div class="box box2"></div>
<div class="box box2"></div>
<div class="box box2"></div>
 
<!-- cuadrados de la tercera imagen -->
<div class="box box3"></div>
<div class="box box3"></div>
 

Luego la función mostrar donde primero ocultas todos los box y luego muestras los box con la id seleccionada:

con jquery sería algo así:

Código HTML:

mostrar(id){
jQuery('.box').hide();
jQuery('.box' + id).show();
}
 

con JavaScript así:

Código HTML:

mostrar(id){
document.getElementsByClassName('box').css.display='block';
document.getElementsByClassName('box' + id).css.display='none';
}
 

y eso sería :)

[Sikaffy]

Mil gracias, eh! Ahora mismo lo voy a probar :)