Where did I went wrong in this script

JavaScript
1

I don’t want the images to load until the link is hovered, so for that here is the script but it’s not working, can someone help me in correcting it?
I added an event listener to each link, and on mouseover called a function that sets the image. To make things more interesting, we can copy lazyload a bit here and also use the data-original property :slight_smile:

For example: this is the HTML
Code:

<li>
       <a href="#" class="tip_trigger">
          <img class="tip" alt="300 Grams"
                  data-original="https://lh5.googleusom/-qCRpw.../300%2520.jpg"
                  src='empty.gif' width="90" height="90"/>
          Alex
       </a>
    </li>

Then, add an event listener:

Code:

// call for each element with the class 'tip' that's being hovered upon
    $('.tip').hover(function()
    {
       // retrieve the image inside this element
       var elem = $(this).find('img');

       // set the 'src' to the 'data-original' value
       elem.attr('src', elem.attr('data-original'));
    });

for a live demo, you can see this page http://bloghutsbeta.blogspot.com/2012/04/testing-slidernav.html
the above part of script is only added to the first letter ALEX in ‘A’ Category.

2

This is what the .find() method says about what it does:
“Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.”

Do you see the problem between that description and how you are using the it?