Display change photo link on avatar mouseover

Hi, can someone please help me with a mouseover code, i want to display change your picture link on mouseover avatar. something similar to facebook change profile pic. i am using wordpress.


regards

 

$('img').live('hover', function() {
    var newSrc = $(this).attr("src").replace("image.jpg", "hover.jpg");
    $(this).attr("src", newSrc); 
});

Code (markup):

 

Hi Leet, thanks so much for your reply, can you please elaborate a bit on this code. i am not good in this field. sorry for being noob.

Regards

 

can someone please help me out. this is the code am trying to use. but to seems to work. it shows the link but the hover aspect is not working.


<div style="width: 150px; overflow: hidden; float: left; padding-right: 20px; height:200px;" id="item-header-avatar">
<?php if(bp_is_my_profile()){ ?>
<span style="font-weight: bold; text-align: center; background:none repeat scroll 0pt 0pt rgb(255, 255, 255); z-index: 10000; position: relative; left: 0px; padding: 4px 25px; top: 150px;">
<a href="<?php echo bp_user_link(); ?>profile/change-avatar/">Change Picture</a>
</span>
<script type="text/javascript">
// change avatar
$(document).ready(function(){
$("#item-header-avatar").hover(function(){
$("span", this).stop().animate({top:"130px"},{queue:false,duration:200});
}, function() {
$("span", this).stop().animate({top:"160px"},{queue:false,duration:200});
});
});
</script>
<?php } ?>