¿Cómo agregar un enlace a una imagen con efecto hover en HTML?

JoseCuevas Seguir

Iota
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
3 Ago 2012
Mensajes
2.375
Hola.

Ya lo intenté de varias maneras pero no puedo, o no he encontrado la forma.

Lo que hice fue hacer un efecto hover en la imagen, pero lo que quiero es que haya un enlace que dirija a otra parte de la web (otra url), ¿Sabrían cómo?

(Esta es la web) Al pasar el mouse por el cuadro de abajo, se pone otra imagen con el texto Ver más, y al darle clic en la imagen de Ver más dirija a Google por ejemplo.

El efecto lo puse en el primer cuadro, aquí.

68c73e49d7a15198d434150835ea4799.png

Esto utilice:
PHP:
<img src="imagenes/ib1.png" onmouseover="this.src='imagenes/ib2.png';" onmouseout="this.src='imagenes/ib1.png';"/>

ib1 es la imagen que sale al principio (cuando no pasas el raton)
ib2 es cuando sale el texto Ver más
OJO: El efecto está para el primer cuadro.

Espero me pueda ayudar :D!


Por si preguntan, sí, utilicé los colores de forobeta jajaja
 

shadowhck

Lambda
Programador
Verificado por Whatsapp
Desde
18 Ago 2009
Mensajes
2.772
Podrías colocar un flotante en lugar de cambiar la imagen. Con .prepend de jQuery logras algo asi.

Por ejemplo, yo tengo un botón de descarga, si alguien hace click derecho, encima (exacto) del botón se posiciona un cuadro con texto, y desaparece despues de unos segundos.
 

JoseCuevas

Iota
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
3 Ago 2012
Mensajes
2.375
Podrías colocar un flotante en lugar de cambiar la imagen. Con .prepend de jQuery logras algo asi.

Por ejemplo, yo tengo un botón de descarga, si alguien hace click derecho, encima (exacto) del botón se posiciona un cuadro con texto, y desaparece despues de unos segundos.

No tengo conocimiento de jQuery u.u

Lo que quiero es que nadamás dirija a otro sitio, que el texto siga ahí :/
 

Emanuel Andrei

Dseda
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
1 Nov 2013
Mensajes
1.219
Prueba esto [MENTION=26950]JoseCuevas[/MENTION]:
Insertar CODE, HTML o PHP:
<a href="(URL DE TU WEB)" target="_blank"><img src="imagenes/ib1.png" onmouseover="this.src='imagenes/ib2.png';" onmouseout="this.src='imagenes/ib1.png';"/></a>

El target="_blank" es si quieres que la nueva pagina abra en otra pestaña. Para que abra en la misma, le cambias el "_blank" por "_self".
 

JoseCuevas

Iota
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
3 Ago 2012
Mensajes
2.375
Prueba esto [MENTION=26950]JoseCuevas[/MENTION]:
Insertar CODE, HTML o PHP:
<a href="(URL DE TU WEB)" target="_blank"><img src="imagenes/ib1.png" onmouseover="this.src='imagenes/ib2.png';" onmouseout="this.src='imagenes/ib1.png';"/></a>

El target="_blank" es si quieres que la nueva pagina abra en otra pestaña. Para que abra en la misma, le cambias el "_blank" por "_self".

Eres grande hermano! Muchas gracias, con tu código lo solucioné :D
 

CircuitoX

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
2 Sep 2012
Mensajes
156
Arriba