Rollover sobre imágenes en catálogo de ropa

[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 :)