Ver Mensaje Individual
  #8 (permalink)  
Antiguo 22/04/2008, 16:06
Avatar de Mikmoro
Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: Botón efecto over

A ver si es esto más o menos lo que te gustaría hacer. Tú pruébalo y luego modifica sobre él.

En primer lugar, tienes en la css mucho código repetido. La puedes hacer mucho más eficiente poniendo esto en lugar de toda la parte de las imágenes:

Cita:
a#bt-imagen1 { background-image: url(images/copas-platos.jpg);}
a#bt-imagen1:hover { background-image: url(images/copas-platos-h.jpg);}
a#bt-imagen2 { background-image: url(images/servilletas.jpg);}
a#bt-imagen2:hover { background-image: url(images/servilletas-h.jpg);}
a#bt-imagen3 { background-image: url(images/cocina.jpg);}
a#bt-imagen3:hover { background-image: url(images/cocina-h.jpg);}
a#bt-imagen4 { background-image: url(images/maquinas.jpg);}
a#bt-imagen4:hover { background-image: url(images/maquinas-h.jpg);}
a#bt-imagen5 { background-image: url(images/silla-mesa.jpg);}
a#bt-imagen5:hover { background-image: url(images/sillas-mesa-h.jpg);}
a#bt-imagen6 { background-image: url(images/maquinas.jpg);}
a#bt-imagen6:hover { background-image: url(images/maquinas-h.jpg);}
Ahora añade estas 4 nuevas clases:

Cita:
a.cuadro { border-style: solid;
border-color: rgb(246, 210, 174) rgb(193, 194, 196) rgb(193, 194, 196);
border-width: 3px;
float: left;
width: 180px;
margin-right: 8px;
text-align: center;
margin-bottom: 30px;
height: 134px;
background-color: transparent;
text-decoration: none;
}
a.cuadro:hover { border-top: 3px solid rgb(247, 147, 30);
}
a.cuadro span { padding: 4px 2px;
display: block;
background-color: rgb(255, 153, 0);
text-decoration: none;
color: rgb(255, 255, 255);
width: 180px;
margin-left: -2px;
margin-top: 138px;
visibility: hidden;
}
a.cuadro:hover span { visibility: visible;}
Y para que esto funcione, ahora reemplaza los enlaces de las imágenes por esto otro:

Cita:
<div class="caja-galeria">

<a id="bt-imagen1" class="cuadro" href="menaje-cristaleria.html"><span>menaje-cristaleria.html</span></a>
<a id="bt-imagen2" class="cuadro" href="un-solo-uso.html"><span>un-solo-uso.html</span></a>
<a id="bt-imagen3" class="cuadro" href="utensilios-cocina.html"><span>utensilios-cocina.html</span></a>
<a id="bt-imagen4" class="cuadro" href="un-solo-uso.html"><span>un-solo-uso.html</span></a>
<a id="bt-imagen5" class="cuadro" href="un-solo-uso.html"><span>un-solo-uso.html</span></a>
<a id="bt-imagen6" class="cuadro" href="un-solo-uso.html"><span>un-solo-uso.html</span></a>
</div>
Cópialo y pégalo todo con cuidado sobre una copia de tu página y tu css. Pruébalo y a ver qué te parece.

Mikel.

P.D.: si te gusta y lo quieres adaptar necesitará unos retoques para IE6, como siempre.