1. <img src="~/Content/images/export_menu.png" id="jq-export-menu" alt="" style="float:right"/

and my goal is when I hover the image with the mouse it will change to another image.. and when my mouse leaving the the image
it will back to the first image. The idea is like context menu in firefox..

Normal State
 

Hover State


Click State


The color from the image will be different depends on state it has..

I am trying something like this.. but it doesnt work. 

1. $('#jq-export-menu').mouseover(function () {             var newSrc = $(this).attr("src").replace("~/Content/images/export_menu.png", "~/Content/images/export_menu_hover.gif");           
   
2.  $(this).attr("src", newSrc);         
   
3.   });       
   
4.  $('#jq-export-menu').mouseout(function () {             var newSrc = $(this).attr("src").replace("~/Content/images/ export_menu_hover.png", "~/Content/images/export_menu.png");            
   
5.             $(this).attr("src", newSrc);       
   
6. });