```
$(function () {
    $(".btn").on("mouseover",function(){
        $(this).attr("src", $(this).attr("src").replace("images", "images/hover"));
    });

    $(".btn").on("mouseleave",function(){
        $(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
    });
});

```

The above code is the way I change the image when the user hover on the button, when user click on it , it will redirect to other page. And the Html element is like:

```
<a href="product.php"><img class="btn" src="images/index_03.gif" /></a> 

```

The problem is , I am sure the path is correct , but when the user click on the button , during the time of loading the next page or in some case, when i hover on the image , the hovered image is not shown but broken link, why is it and how to fix it? Thanks for helping