Foros del Web » Creando para Internet » CSS »

imagen con hover + link

Estas en el tema de imagen con hover + link en el foro de CSS en Foros del Web. lo que no se hacer es como agrgar un link a una imagen y ademas esta cambie de estado al poner el cursor sobre ella...... ...
  #1 (permalink)  
Antiguo 18/12/2009, 13:17
 
Fecha de Ingreso: septiembre-2008
Mensajes: 101
Antigüedad: 15 años, 6 meses
Puntos: 4
imagen con hover + link

lo que no se hacer es como agrgar un link a una imagen y ademas esta cambie de estado al poner el cursor sobre ella...... alguien me dari un ejemplo....
  #2 (permalink)  
Antiguo 18/12/2009, 13:35
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 14 años, 4 meses
Puntos: 17
Respuesta: imagen con hover + link

html:

Código HTML:
Ver original
  1. <a href="#"><div id="img_link">Aqui el contenido de la imagen</div></a>

css:

Código CSS:
Ver original
  1. #img_link{
  2. width:500px;
  3. height:500px;
  4. background-image:url(images/imagen.png);
  5. }
  6. #img_link:hover{
  7. background-image:url(images/imagen2.png);
  8. }

Listo, cualquier cosa avisame... ;)

Saludos.
  #3 (permalink)  
Antiguo 18/12/2009, 16:35
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años, 1 mes
Puntos: 1329
Respuesta: imagen con hover + link

Está mal el código que puso PrendekZ, no puedes meter un elemento de bloque dentro de un elemento inline. Lo correcto es esto:

Código HTML:
Ver original
  1. <a href="http://www.forosdelweb.com"><span>Foros del Web</span></a>

Código CSS:
Ver original
  1. a {
  2. width: 150px;  /* Ancho de la imagen */
  3. height: 150px; /* Alto de la imagen */
  4. display: block;
  5. background: url(images/forosdelweb.png) no-repeat; /* Imagen en estado normal */
  6. }
  7.  
  8. a:hover {
  9. background: url(images/forosdelweb_hover.png) no-repeat; /* Imagen en estado hover */
  10. }
  11.  
  12. a span {
  13. display: none;
  14. }

Saludos
__________________
Grupo Telegram Docker en Español
  #4 (permalink)  
Antiguo 23/04/2011, 12:57
 
Fecha de Ingreso: abril-2011
Ubicación: San Jerónimo
Mensajes: 30
Antigüedad: 13 años
Puntos: 0
Respuesta: imagen con hover + link

Gracias me a sido de gran utilidad pero como podría crear un menú aplicando estas etiquetas sin cambiar los efectos.

e intentado de muchas formas pero no me da me podrían ayudar
  #5 (permalink)  
Antiguo 23/04/2011, 14:17
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: imagen con hover + link

Cita:
Iniciado por kilatex123 Ver Mensaje
Gracias me a sido de gran utilidad pero como podría crear un menú aplicando estas etiquetas sin cambiar los efectos.

e intentado de muchas formas pero no me da me podrían ayudar
y que te parece si mejor muestras tu codigo actual para ver las posibles soluciones, digo a mi no me queda claro que es lo que deseas obtener... la solución que ya te dieron es mas que suficiente para hacer tu menú salvo que tengas algo en el que te lo impida.
  #6 (permalink)  
Antiguo 23/04/2011, 14:29
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: imagen con hover + link

Para ampliar tus conocimientos:
http://www.cristalab.com/tutoriales/...-listas-c130l/

Ejemplos: www.araudi.net
Y millones más en San google
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 24/04/2011, 12:13
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 824
Antigüedad: 13 años
Puntos: 116
Respuesta: imagen con hover + link

para crear un menu utiliza "listas desordenadas" (ul > li)

Y bueno, no se que más poner, las respuestas dadas estan, y una buena es la de C2am.
__________________
Programador jQuery & PHP
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 04:27.