Javascript - Change src at onmouseover and onmouseout

I want to do that onmouseover change the image and onmouseout it returns the default image. I use this code:

<div class="home-social-share">
<div style="margin-right:15px;width:11px;float:left;">
    <a href="javascript:void(0)" onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>','Condividi su Facebook','height=300, width=750,scrollbars=no, resizable=yes')">
        <img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/fbshareoff.png" alt="Condividi su Facebook" title="Condividi su Facebook" onmouseover="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/fbshare.png'" onmouseout="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/fbshareoff.png'">
    </a>
</div>
<div style="float:left;margin-right:15px;">
<a href="javascript:void(0)" onclick="window.open('http://twitter.com/share?text=<?php the_title(); ?> &bull; Prima Pagina Online&amp;url=<?php the_permalink(); ?>','Condividi su Twitter','height=300, width=500,scrollbars=no, resizable=yes')">
        <img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/tt-shareoff.png" alt="Condividi su Twitter" title="Condividi su Twitter" onmouseover="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/tt-share.png'" onmouseout="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/tt-shareoff.png'" />
</a>
</div>
<div style="float:left;">
    <a href="<?php the_permalink();?>/#disqus_thread">
        <img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil-off.png" alt="Commenta l'articolo" title="Scrivi un commento sull'articolo" onmouseover="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil.png'" onmouseout="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil-off.png'" />
    </a>
</div>

Now, it works the onclick functions but the images remains the same, so the onmouseover and onmouseout doesn't work.

Thanks

Solution

I'm unsure whether your using Jquery or not, so I'll include examples of both.

<img id="change" src="picture" alt="picture.jpg">

Jquery -

$('#change').on("mouseenter", function() {
    $(this).attr('src', 'picture2');
}).on("mouseleave", function() {
    $(this).attr('src', 'picture');
});

Javascript -

document.getElementById('change').addEventListener("onmouseover", function() { 
  this.src = 'picture2';
}).addEventListener("onmouseout", function() {
  this.src = 'picture';
});

That should get you going!