jquery image tooltip
<p>What I'm trying to achieve here is an image tooltip. When I hover over a link, the corresponding image will show up. </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;style type='text/css'&gt;
.tooltipcontent{
position:absolute;
display:none;
opacity:0.0;

}

&lt;/style&gt;
&lt;script type='text/javascript' src='jq.js'&gt;&lt;/script&gt;
&lt;script type='text/javascript'&gt;
$(function(){

$('a').hover(

    function(){
         var currentimg= $(this).html();
         var offset =$('#link1').offset();
         $("div img[src='" + currentimg +".jpg']").css('top', offset.top).css('left', offset.left).css('display','block');
         $("div img[src='" + currentimg +".jpg']").animate({opacity: 1.0}, 300);


    },
    function(){}


);
});



&lt;/script&gt;


&lt;/head&gt;
&lt;body&gt;
&lt;div class='tooltipcontent' id='tooltip1'&gt;
&lt;img src='numone.jpg'&gt;&lt;/img&gt;
&lt;img src='numtwo.jpg'&gt;&lt;/img&gt;
&lt;/div&gt;

&lt;div id='link1'&gt;&lt;a href='numone' target='_blank' id='viewlarger'&gt;numone&lt;/a&gt;&lt;/div&gt;
&lt;div id='link2'&gt;&lt;a href='numtwo' target='_blank' id='viewlarger'&gt;numtwo&lt;/a&gt;&lt;/div&gt;

 &lt;input type='text' value='a'&gt;&lt;/input&gt;
&lt;div id='forimage'&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
