CODEWITHSUNDEEP
jquery
Nate Pet
Nate Pet

Reputation: 46322

jquery hyperlink with image

I have the following code which when I hover over a hyperlink, I like to show the image of it. The problem is that no image comes up.

Here is what it looks like 

      $(document).ready(function () {
      $('a').hover(function (e) {

          var href = $(this).attr('href');
          alert(href); // shows c:/images/jj.gif for that particular record as I have the hyperlinks for a given column within a grid

          $("body").append("<p id='preview'><img src='" + this.href + "' alt='Image preview' /></p>");


      });
  });

Upvotes: 0

Views: 184

Answers (2)

Jai
Jai

Reputation: 74738

This is the updated fiddle: http://jsfiddle.net/w5jLd/1/

$(document).ready(function() {
    $('a').hover(function(e) {

        var href = $(e.target).attr('href');
        $(e.target).next('div').append("<p id='preview'><img src='" + href + "' alt='Image preview' /></p>");

    },function(){   // i have added this when mouse out of the link 
                    // preview will be destroyed.

        $('#preview').remove();

    });
});

You were hovering a link but not capturing the target itself. so e.target selects the hovering item.

Upvotes: 1

Mike
Mike

Reputation: 781

$(document).ready(function () {
      $('a').hover(function (e) {

          var href = $(this).attr('href');
          alert(href); // shows c:/images/jj.gif for that particular record as I have the hyperlinks for a given column within a grid

          $("body").append("<p id='preview'><img src='" + href + "' alt='Image preview' /></p>");


      });
  });

if you've already assigned href to a variable you don't need to reference it as this.href

Upvotes: 1

Related Questions