Botón efecto over

marilinadg · #1 (**permalink**) 22/04/2008, 06:46

Hola a todos,me metí en un lio.
Hice un diseño que el cliente aprobó pero ahora no se como implementarlo con CSS...

Pero bueno,viendo el lado positivo del asunto,creo que es una buena oportunidad para aprender algo nuevo.

El botón es asi:
En estado de reposo es una imagen con una opacidad del 40% y en estado mouseover la imagen cambia quedando sin opacidad,es decir que se ve tal cual es.
Hasta ahi todo bien,creé las dos imagenes y funciona ok el botón.
El tema es que en el diseño cuando paso el mouse por encimadebería aparecerun pequeño rectángulo naranja debajo del recuadro de la imagen, del mismo ancho, con el nombre del link al que corresponde ese botón.
Me pareción que iba a sersimple,peroestoy delepensar y pensar y no logro sacar cual sea la mejor manera.

Les agradezco a todos cualquier orientación al respecto.

Mikmoro · #2 (**permalink**) 22/04/2008, 09:14

Para recibir una ayuda más precisa creo que deberías poner el código html y css que tienes actualmente, y a poder ser una imagen de cómo debería quedar el hover, si no es difícil saber cómo lo quieres hacer exactamente.

Mikel.

marilinadg · #3 (**permalink**) 22/04/2008, 11:59

http://www.estudioblazar.com.ar/monyair/index.html

Este es el link donde aparecen los botones, son los de las imágenes, se ve el efecto over cuando se pasa el mouse por encima.
Lo que no puedo darme cuenta como hacer es que al pasar el mouse por encima,además de cambiar la imagen ,como ya cambia, aparezca debajo del recuadro de la foto (pegado) un rectángulo de color naranja, del ancho del recuadro de la foto que dentro diga el nombre del link al que se dirige ese botón-.
Espero que esto aclare un poco el primer post, supongo que el link va a ser más práctico para ver el ejemplo, Gracias nuevamente!!

Mikmoro · #4 (**permalink**) 22/04/2008, 12:26

¿Debajo del recuadro de la foto? No hay espacio, y eso desplazaría el resto de las fotos.

- ¿En la parte inferior de la foto pero dentro de ella?
- ¿Debajo de todo el recuadro que contiene todas las fotos?
- ¿Un recuadro que empuje el resto de fotos hacia abajo?

Tú lo tienes muy claro en tu cabeza, pero los demás no podemos verlo. Si nos aclaras cómo lo quieres hacer te lo resolveremos rápido (creo

).

Mikel.

marilinadg · #5 (**permalink**) 22/04/2008, 13:13

Tenés toda la razón Mikel.
Es verdad que no hay espacio debajo,eso es algo que tengo que ajustar con algún margin... pero si, la separación entre la primer fila de fotos y la segunda ( y asi sucesivamente) va a ser mayor como para que entre bien este rectángulo en cuestión.
Sería un rectángulo debajo de cada recuadro de foto.
Me gustaría subir un jpg como para que veas exactamente la idea,pero no veo como hacerlo...

Gracias!

moixcruz · #6 (**permalink**) 22/04/2008, 13:19

pues si, no se ve muy bien donde quieres que aparezca el texto, debajo de las imagnees no hay sitio.
Explicanos un poquillo mas y a ver si se soluciona, de todas maneras te comento que una posible solucion q se me ocurre (aunque no se si te valdra o es tu idea), y es utilizar un tooltip del estilo <a href="http://www.walterzorn.com/tooltip/tooltip_e.htm" title="tooltip">tooltip</a> con javascript, creo recordar que se le podia configurar la posicion en la que querias que apareciera

marilinadg · #7 (**permalink**) 22/04/2008, 14:10

moixcruz, no es eso exactamente lo que necesito hacer,pero gracias por el link!! está genial!!!

Por otra parte fijate que en elpost anterior aclaré que si,debe haber mayor espacio entre las filas de fotos,es un detalle a corregir, que no lo hice todavía porque intento averiguar primero cómo hacer ese bendito rectángulo!

Como decia anteriormenteme gustaría subir un jpg...no hay forma de "pegarlo" acá no?

Mikmoro · #8 (**permalink**) 22/04/2008, 16:06

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">menaje-cristaleria.html</a>
<a id="bt-imagen2" class="cuadro" href="un-solo-uso.html">un-solo-uso.html</a>
<a id="bt-imagen3" class="cuadro" href="utensilios-cocina.html">utensilios-cocina.html</a>
<a id="bt-imagen4" class="cuadro" href="un-solo-uso.html">un-solo-uso.html</a>
<a id="bt-imagen5" class="cuadro" href="un-solo-uso.html">un-solo-uso.html</a>
<a id="bt-imagen6" class="cuadro" href="un-solo-uso.html">un-solo-uso.html</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.

Mikmoro · #9 (**permalink**) 22/04/2008, 16:18

Aquí te pongo un ejemplo de cómo quedaría.

Mikel.

marilinadg · #10 (**permalink**) 22/04/2008, 17:40

Mikmoro, sos un geeeeeeenio!!!!!!
Es exactamente lo que quiero hacer.
Te digo la verdad,vi el ejemplo y está perfecto, ahora ya esmuy tarde aquí pero mañana me pongo a analizar en detalle todo el código que transcribiste a ver si logro descifrarlo y darme maña en donde poner cada cosa...
Cualquier cosa volveré a molestarte una vez más.

Nuevamente Gracias!!!!!!