Foros del Web » Creando para Internet » CSS »

Botón efecto over

Estas en el tema de Botón efecto over en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/04/2008, 07:46
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 10 años, 11 meses
Puntos: 1
Pregunta Botón efecto over

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.
  #2 (permalink)  
Antiguo 22/04/2008, 10:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Botón efecto over

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.
  #3 (permalink)  
Antiguo 22/04/2008, 12:59
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 10 años, 11 meses
Puntos: 1
Re: Botón efecto over

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!!
  #4 (permalink)  
Antiguo 22/04/2008, 13:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Botón efecto over

¿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.
  #5 (permalink)  
Antiguo 22/04/2008, 14:13
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 10 años, 11 meses
Puntos: 1
Re: Botón efecto over

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!
  #6 (permalink)  
Antiguo 22/04/2008, 14:19
 
Fecha de Ingreso: marzo-2008
Mensajes: 6
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Botón efecto over

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
  #7 (permalink)  
Antiguo 22/04/2008, 15:10
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 10 años, 11 meses
Puntos: 1
Re: Botón efecto over

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?
  #8 (permalink)  
Antiguo 22/04/2008, 17:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #9 (permalink)  
Antiguo 22/04/2008, 17:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Botón efecto over

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

Mikel.
  #10 (permalink)  
Antiguo 22/04/2008, 18:40
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 10 años, 11 meses
Puntos: 1
De acuerdo Re: Botón efecto over

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!!!!!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:50.