View original (French)

Display an image in a link

janyduchemin -  
 Artos -
Good evening,
I have links on my site that point to a Facebook page or a site. I would like when a user hovers the cursor over the link that an image or a small table appears like in Google searches.
Thank you!

1 answer

  1.
    Kivin2003 Posted messages 682 Registration date   Status Contributor Last intervention   191
     
    Hello jany,

    Yes, it's possible. One method among others would be to call the page in an iframe and add some CSS and a bit of JavaScript.

    So this would give you in your HTML code: 

    <a class="tiptext">the text of your link
     <iframe class="description" src="http://www.yoursiteyouwantinimage.com"></iframe>
     </a>


    In your CSS file, you add this: 
    .tiptext {
     color:#069; 
     cursor:pointer;
    }
    .description {
     display:none;
     position:absolute;
     border:1px solid #000;
     width:400px;
     height:400px;
    }


    And for the JavaScript: 
    $(".tiptext").mouseover(function(){
     $(this).children(".description").show();
    }).mouseout(function(){
     $(this).children(".description").hide();
    });


    Otherwise, I found a pretty simple script online to insert between your <head></head> tags 
    <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>


    Then, you just need to add <p id=1> at the beginning of the paragraph where you want the preview (remembering to close the tag at the end </p>, you put p1, p2, or p3 depending on the desired loading type. The demo is here: https://codegena.com/image-link-preview-on-hover/
    --
    Hunting is, of all sports, the most cynogenic. It's even the only one that really is. - Alexandre Vialatte
    0
    1. Artos
       
      Hello,
      even simpler... to display an image in a link, put an image in a link...

      Like this: 
       <a href="monlien.html"> My text <img src="monimage.jpg"> </a>


      And for the display on hover, even simpler, this is done with CSS, see the hover pseudo-class for example to show a background image/change the image, etc.: 

       /* of course this is an example, the indicated selector will act on all links, so replace it with an id or class */ a{ /*properties of my link*/ /** possibly an empty image for the non-hover state (for example a rectangle the color of the background */ } a:hover{ background-image:url("monimage.jpg"); }


      This solution has several advantages over the one above:
      It is simpler and quicker to implement and does not require any code libraries like JQuery and the CSS file (image_preview_for_links.css), making the page lighter to load (and 'run') and therefore faster.
      It does not rely on JavaScript.
      It is in HTML and CSS and stands on its own while keeping the HTML specifics (like referencing the link and the image, which is more complex when it goes through a programming script)
      It will therefore be easier to change and modify if needed.
      As for disadvantages, there are few I think...

      CSS is the answer without looking further unless we want to do something very complex; otherwise, the time investment is not worth it (and will only complicate the developer's life + add load times and programs that will have repercussions on the page (more files/weight to load = slower processing/display speed).
      Here, it does not seem justified, especially in the case of a single link.


      And depending on external sources for trivial things (a mouse hover is not a good idea):

      <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>
      0
      1. Artos > Artos
         
        To find out how to create an image hover effect in CSS, there are plenty of courses/examples available, for instance:
        https://waytolearnx.com/2019/07/comment-changer-une-image-au-survol-avec-css.html

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

        Of course, starting by learning CSS is recommended, but if you have built your own website (or want to modify it yourself), I assume you have already completed this step(?).
        If not, CSS is used for layout and everything that displays, positioning elements, and possibly adding some interactivity or even creating/playing animations.
        0