How do I display an image when a user hovers over a link using JQuery

Question

I've got a list of products.

<ul>
<li><a href="chair.php">CHAIR</a></li>
<li><a href="table.php">TABLE</a></li>
<li><a href="sofa.php">SOFA</a></li>
<li><a href="bookshelf.php">BOOKSHELF</a></li>
<ul>

On mouseover I want to display a thumbnail image of the product in a div #preview.

I don't want to hardcode the jquery for each image. Rather I'd like to write JQuery that would grab the image location and insert into the DOM. I have no idea how I would mark up the HTML to include the image location. Any ideas?

@you want to show a chair one mouseover of chair and table picture on mouseover of table?? — kobe, Dec 06 '10 at 06:46
it should be pretty easy , if nobody answers your question , i will reply after my dinner hmmm — kobe, Dec 06 '10 at 06:47
@but keep in mind that you need to have some mapping for each href to image or store a hidden span with image path for each object — kobe, Dec 06 '10 at 06:48
Check this post-http://codegena.com/image-link-preview-on-hover/ — Shan Eapen Koshy, Aug 13 '15 at 16:43

Domenic · Accepted Answer · 2015-10-05T15:24:39.010

7

I'd suggest using the new HTML5 data attributes, like so:

<a href="chair.php" data-thumbnail-src="chair.jpg">CHAIR</a>

Then you could set up the jQuery code as follows:

$(function () {
    var $preview = $("#preview");

    $("ul#products a").hover(function () {
        $preview.attr("src", $(this).attr("data-thumbnail-src"));
    }, function () {
        $preview.attr("src", "");
    });
});

In jQuery 1.4.3 and higher, I believe $(this).data("thumbnail-src") will also work.

edited Oct 05 '15 at 15:24

answered Dec 06 '10 at 06:48

Domenic

110,262
41
219
271

it won't support all browsers , as it is HTML5 – kobe Dec 06 '10 at 06:49
1

Actually, HTML5 is specifically designed to be backward-compatible; all browsers since Netscape 1.0 recognize new custom attributes. If he tried to use the `dataset` DOM property, that wouldn't work in older browsers; however, using jQuery's `attr` or `data` methods works just fine. – Domenic Dec 06 '10 at 06:51
Perfect! Thank you. I had no idea about the custom data tag. I was tempted to use a "rel" tag, but that just didn't feel right. – poleposters Dec 07 '10 at 15:14

score 2 · Answer 2 · answered Apr 17 '14 at 09:37

2

its is old , but i got here with google search . i believe the best solution would be this : http://james.padolsey.com/demos/imgPreview/full/

answered Apr 17 '14 at 09:37

M.R.Safari

1,857
3
30
47

Unfortunately the download link is dead now. – Josh Mountain Sep 22 '14 at 20:02

score 1 · Answer 3 · edited May 23 '17 at 10:26

Hopefully this is a decent solution. Im using the JQuery Metadata plugin

Here is the stuff live : http://jsfiddle.net/giddygeek/VqL65/14/

Html:

<script type="text/javascript" src="https://github.com/jquery/jquery-metadata/raw/master/jquery.metadata.js"></script>
<ul class="pics">
<li class="pic {url:'chair.jpg'}">
    <a href="chair.php">CHAIR</a></li>
<li class="pic {url:'table.jpg'}">
    <a href="table.php">TABLE</a></li>
<li>
    <a href="sofa.php">SOFA</a></li>
<li>
    <a href="bookshelf.php">BOOKSHELF</a></li>
<ul>
<div id="preview">
<img src="" />
<div/>

JQuery

$(document).ready(function()
    {
       $("ul.pics li").hover(
           function()
           {//on hover over
              var data = $(this).metadata();//get the metadata 
               if(data.url) {//check if it exists
                   $("#preview img").attr("src",data.url)//set the url to it
               }

           },
           function()
           {//on hover OUT
               $("#preview img").attr("src","");//set the img src to nothing
           }
           );
    }
);

Notes:

Ive heard this is W3C compliant and might be compatible with Html5
Do add a class for each <li> named pic {url:'something'}.
Set the url to your favorite picture.
In the JQuery, the hover out sets the img src to nothing-> "". Here you should set it to a NONE pic or do something else.
Oh and download the metadata plugin (I used a raw link from github)

Hope this helped.

Thanks for taking the time to answer. This definitely works, but the other answer has the advantage of not needing a plugin. :) — poleposters, Dec 08 '10 at 08:31
@pole true. Actually while answering I thought using an HTML5 attribute would not be fully supported or would cause problems. Then I came across this post later: http://stackoverflow.com/questions/1355082/is-html-5-supported-by-all-the-main-browsers — gideon, Dec 08 '10 at 09:38

How do I display an image when a user hovers over a link using JQuery

3 Answers3