Ver originales (Francés)

Mostrar una imagen en un enlace

janyduchemin -  
 Artos -
Buenas noches,
Tengo enlaces en mi sitio que apuntan a una página de Facebook o a un sitio. Me gustaría que cuando un internauta pase el cursor sobre el enlace, aparezca una imagen o una pequeña tabla como en las búsquedas de Google.
¡Gracias!

1 respuesta

Respuesta 1 / 1
Kivin2003 Mensajes publicados 682 Fecha de registro   Estado Colaborador Última intervención   191
 
Hola jany,

Sí es posible. Una de las métodos, entre otras, sería llamar a la página en un iframe y añadir CSS y un poco de JavaScript.

Entonces quedaría en tu código HTML: 

<a class="tiptext">el texto de tu enlace
 <iframe class="description" src="http://www.lesitequetuveuxenimage.com"></iframe>
 </a>


En tu archivo CSS añades esto: 
.tiptext {
 color:#069; 
 cursor:pointer;
}
.description {
 display:none;
 position:absolute;
 border:1px solid #000;
 width:400px;
 height:400px;
}


Y para el JavaScript: 
$(".tiptext").mouseover(function(){
 $(this).children(".description").show();
}).mouseout(function(){
 $(this).children(".description").hide();
});


Si no, he encontrado un script bastante sencillo en la red para insertar entre tus etiquetas <head></head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"</script>
 <link href="https://rawgit.com/shaneapen/Image-Preview-for-Links/master/image_preview_for_links.css" rel="stylesheet"> 
 <script type="text/javascript">
 $(function(){
 $('#p1 a').miniPreview({ prefetch: 'pageload' });
 $('#p2 a').miniPreview({ prefetch: 'parenthover' });
 $('#p3 a').miniPreview({ prefetch: 'none' });
 });
 </script> <script src="https://rawgit.com/shaneapen/Image-Preview-for-Links/master/image_preview_for_links.js"></script>


Luego, basta con añadir <p id=1> al inicio del párrafo donde quieres la preview (sin olvidar cerrar la etiqueta al final </p>, pones p1 p2 o p3 según el tipo de carga deseado. La demo se encuentra aquí: https://codegena.com/image-link-preview-on-hover/
--
La caza es, de todos los deportes, el más cínico. Es incluso el único que realmente lo es. - Alexandre Vialatte
0
Artos
 
Hola,
aún más simple... para mostrar una imagen dentro de un enlace coloca una imagen dentro de un enlace...

Como esto: 
 <a href="monlien.html"> Mi texto <img src="monimage.jpg"> </a>


Y para la visualización al pasar el cursor aún más simple se logra con CSS, ver la pseudo-clase hover, por ejemplo para hacer aparecer una imagen de fondo/cambiar la imagen, etc...: 

 /* por supuesto es un ejemplo, el selector indicado actuará sobre todos los enlaces, así que cámbialo por una id o class */ a{ /*propiedades de mi enlace*/ /** opcionalmente una imagen vacía para el estado sin pasar el cursor (ejemplo un rectángulo del color de fondo */ } a:hover{ background-image:url("monimage.jpg""); }


Esta solución tiene varias ventajas sobre la solución anterior:
Es más simple y rápida de implementar y no requiere ninguna biblioteca de código como JQuery y el archivo css (image_preview_for_links.css) lo que hace que la página cargue más liviana y por lo tanto más rápida de cargar/ejecutar.
Se vale de JavaScript.
Está en HTML y CSS y se basta a sí misma manteniendo las particularidades de HTML (como referenciar el enlace y la imagen, lo cual es más complejo cuando pasa por un script de programación)
Por lo tanto también será más fácil de cambiar y modificar si surge la necesidad.
En cuanto a desventajas hay pocas, creo...

CSS es la respuesta sin ir más lejos, a menos que quieras hacer algo muy complejo, de lo contrario la inversión de tiempo no vale la pena (y solo complicará la vida del desarrollador+añadirá cargas y programas que repercutirán en la página (más archivos/peso a cargar = velocidad de procesamiento/visualización ralentizada).
Aquí eso parece no estar justificado, sobre todo en el caso de un único y único enlace.


Y depender de fuentes externas para cosas triviales (un simple pasar el cursor no es una buena idea):

<quote>
RawGit ha llegado al fin de su vida útil
8 de octubre de 2018

RawGit está ahora en una fase de cierre y pronto se apagará. Han sido cinco años divertidos, pero todo tiene un final.

Los repositorios de GitHub que sirvieron contenido a través de RawGit durante el último mes seguirán sirviéndose al menos hasta octubre de 2019. Las URL para otros repositorios ya no se sirven.

Si actualmente estás usando RawGit, deja de usarlo lo antes posible.

</quote>
0
Artos > Artos
 
Para saber cómo hacer un sobrevuelo de imagen en CSS no faltan cursos/ejemplos, por ejemplo:
https://waytolearnx.com/2019/07/comment-changer-une-image-au-survol-avec-css.html

O https://www.google.com/search?q=changer_image_au_survol_css

Por supuesto empezando por aprender CSS, pero si ya hiciste tu sitio tú mismo (o quieres modificarlo tú mismo) supongo que ese paso ya está superado(?).
Si no es así, CSS sirve para el diseño y todo lo que se muestra, posicionar elementos y, posiblemente, añadir un poco de interactividad o incluso crear/reproducir animaciones.
0