change the image of a link for active , hover(mouseover) and mouseleave in MVC masterpage

In my requirement i want to change the background image of a link for hover,mouse out and active in my master page i tried a couple ways but it is not giving a right solution for me .Kindly any one guide me to get the solution and my format is like the below

    <a href='<%: Url.Action("ListTask", "Task") %>'>
<img id="taskImage" src='<%: Url.Content("~/Content/Images/MasterPage/TaskMenuNormal.png") %>' onmouseover="this.src='../Content/Images/MasterPage/TaskMenuHover.png'"
onmouseout="this.src='../Content/Images/Mast开发者_如何学JAVAerPage/TaskMenuNormal.png'"  /></a>

the above code will work fine and here i need to fix the hover image at the active of the link and not to be changed at the time of active view(MVC) in the master page.(This code will be in the master page).

can anyone provide solution in javascrip or jqery. Thanks.

you could do:

$('#taskImage').hover(function(){
      $(this).attr('src','../Content/Images/MasterPage/TaskMenuHover.png');
}

$('#taskImage').mouseout(function(){
      $(this).attr('src','../Content/Images/MasterPage/TaskMenuNormal.png');
}

Use the hover function. The first parameter is used on mouseover, the second on mouseout.

HTML

<a href="<%: Url.Action("ListTask", "Task") %>"><img id="taskImage" src="<%: Url.Content("~/Content/Images/MasterPage/TaskMenuNormal.png") %>" /></a>

jQuery

$('#taskImage').hover(
    function() {
        $(this).attr('src','../Content/Images/MasterPage/TaskMenuHover.png');
    },
    function() {
        $(this).attr('src','../Content/Images/MasterPage/TaskMenuNormal.png');
    }
);

Personally, I'd amend your markup to include the image in the A tag as a background in CSS. then you can use A:hover, and A:active CSS states to amend your link. This then means no javascript needs to be used.