Afficher une image dans un lien

Fermé

janyduchemin - 1 nov. 2021 à 22:02
Artos - 4 nov. 2021 à 15:45

Bsr,
J'ai des liens dans mon site qui pointure vers une page facebook ou un site. Je voudrais que lorsqu'un internaute approchera le curseur sur le lien concernant qu'une image puisse apparaitre ou un petit tableau comme pour les recherches google.
Merci!

A voir également:

Afficher une image dans un lien
Créer un lien pour partager des photos - Guide
Lien url - Guide
Verifier un lien - Guide
Image iso - Guide
Comment agrandir une image - Guide

1 réponse

Réponse 1 / 1

Kivin2003 Messages postés 519 Date d'inscription dimanche 26 août 2018 Statut Contributeur Dernière intervention 13 novembre 2023 189
2 nov. 2021 à 12:32

Hello jany,

Oui c'est possible. Une méthode parmi d'autres serait d'appeler la page en iframe et d'ajouter du CSS et un peu de javascript.

Donc cela donnerait dans ton code HTML :


<a class="tiptext">le texte de ton lien
 <iframe class="description" src="http://www.lesitequetuveuxenimage.com"></iframe>
 </a>

Dans ton fichier CSS tu ajoutes ceci :

.tiptext {
    color:#069; 
    cursor:pointer;
}
.description {
    display:none;
    position:absolute;
    border:1px solid #000;
    width:400px;
    height:400px;
}

Et pour le javascript :

$(".tiptext").mouseover(function(){
    $(this).children(".description").show();
}).mouseout(function(){
    $(this).children(".description").hide();
});

Sinon, j'ai trouvé un script assez simple sur le net à insérer entre tes balises <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>

Ensuite, il suffit d'ajouter <p id=1> au début du paragraphe où tu veux la preview (sans oublier de fermer la balise à la fin </p>, tu mets p1 p2 ou p3 en fonction du type de chargement souhaité. La démo se trouve ici : https://codegena.com/image-link-preview-on-hover/

Artos
4 nov. 2021 à 15:40

Salut,
plus simple encore... pour afficher une image dans un lien mettre une image dans un lien...

Comme ceci:

<a href="monlien.html">
Mon texte
<img src="monimage.jpg">
</a>

Et pour l'affichage au survol encore plus simple cela se fait avec CSS voir la pseudo classe hover par exemple pour faire apparaître une image de fond/changer l'image etc...:

/* bien sûr il s'agit d'un exemple, le sélecteur indiqué agira sur tous les liens, donc le remplacer par une id ou class */
a{
/*propriétés de mon lien*/
/** éventuellement une image vide pour l'état sans survol(exemple une rectangle de la couleur du fond */
}
a:hover{
background-image:url("monimage.jpg");
}

Cette solution a plusieurs avantages sur la solution au dessus:
Elle est plus simple et rapide à mettre en place et ne nécessite aucune bibliothèques de code comme JQuery et le fichier css(image_preview_for_links.css) ce qui rend la page plus légère à charger(et 'exécuter') et donc plus rapide.
Elle se passe de JavaScript.
Elle est en HTML et CSS et se suffit tout en gardant les particularités HTML (comme référencer le lien et l'image ce qui est plus complexe quand ça passe par un script de programmation)
Elle sera donc plus simple aussi à changer et modifier si le cas se présente.
Côté inconvénients il y en a peu je pense...

CSS est la réponse sans aller chercher plus loin sauf si on veut faire quelque chose de trés complexe, sinon l'investissement de temps ne vaut pas la peine(et ne fera que compliquer la vie du développeur+ajouter des chargements et programmes qui auront leur répercussion sur la page(plus de fichiers/poids à charger = vitesse de traitement/affichage ralentie).
Ici cela ne semble pas être justifié surtout dans le cas d'un seul et unique lien.

Et dépendre de sources externes pour des choses triviales(un survol de la souris ce n'est pas une bonne idée):

<quote>
RawGit has reached the end of its useful life
October 8, 2018

RawGit is now in a sunset phase and will soon shut down. It's been a fun five years, but all things must end.

GitHub repositories that served content through RawGit within the last month will continue to be served until at least October of 2019. URLs for other repositories are no longer being served.

If you're currently using RawGit, please stop using it as soon as you can.

</quote>

Artos > Artos
4 nov. 2021 à 15:45

Pour trouver comment faire un survol d'image en CSS les cours/exemples ne manquent pas, par exemple:
https://waytolearnx.com/2019/07/comment-changer-une-image-au-survol-avec-css.html

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

Bien sûr en commençant par apprendre le CSS mais si vous avez fait votre site vous-même(ou voulez le modifier vous-même) je suppose que cette étape est déjà franchie(?).
Si ce n'est pas le cas CSS sert à la mise en page et tout qui s'affiche, positionner des éléments et éventuellement ajouter un peu d'interactivité ou même créer/jouer des animations.

Discussions similaires

"Aucune application permettant d'ouvrir cette URL"

lien copié

Rajout de lien sur plusieurs pages

Impossible d'ouvrir des liens via mon Samsung A71