Where did I went wrong in this script

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

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>

Code (markup):

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'));
    });

Code (markup):

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.

 

It is working, it's just that the images show up way over on the left when you hover. Adjust using CSS.