How to change image on mouseover in prduct list in magento

 Paste below script on product list page.

<script>
function imgover(obj) {
var id1 = obj.id;

    document.getElementById(id1).style.display = 'none';
    document.getElementById('hover_' + id1).style.display = 'block';
 
}

function imgout(h_obj) {
var id1 = h_obj.id;
var myarr = id1.split("_");

      document.getElementById(myarr[1]).style.display = 'block';
      document.getElementById(id1).style.display = 'none';
}
</script>

<div class="pro-img">   

<a href="<?php echo $_product->getProductUrl() ?>" id="<?php echo $i;?>" onmouseover="imgover(this);"  title="<?php echo $this->htmlEscape($_product->getName()) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135) ?>" width="135" height="135"  alt="<?php echo $this->htmlEscape($_product->getName()) ?>"  /></a>//default---image---of----prduct.