asp.net ImageMap - change image on mouse over

Question

I'm trying to create an ImageMap that changes as users mouse over certain parts of the image. I have the following ImageMap where users are able to click on a color and go to a different page:

I created 4 additional images that are all the same size, and would like to swap out the image on mouseover. For example, when I mouseover the blue I want the image to look like this:

And when I mouse over the green part, I want it to look like this:

What is the best way to accomplish what I'm trying to do? I planned on using asp.net for the implementation but have been unable to do so.

Here is the code for the ImageMap/hotspot:

<asp:ImageMap ID="ImageMap1" runat="server" Height="300px" HotSpotMode="Navigate" ImageAlign="Middle" ImageUrl="~/images/hotspot-logo.png" Width="303px">
                            <asp:PolygonHotSpot AlternateText="orange" Coordinates="151,8,220,78,150,150,78,78" HotSpotMode="Navigate" NavigateUrl="~/orange.aspx" />
                            <asp:PolygonHotSpot AlternateText="red" Coordinates="220,78,150,150,222,222,292,150" HotSpotMode="Navigate" NavigateUrl="~/red.aspx" />
                            <asp:PolygonHotSpot AlternateText="green" Coordinates="78,78,150,150,78,222,8,150" HotSpotMode="Navigate" NavigateUrl="~/green.aspx" />
                            <asp:PolygonHotSpot AlternateText="blue" Coordinates="150,150,78,222,150,292,222,222" HotSpotMode="Navigate" NavigateUrl="~/blue.aspx" />
                        </asp:ImageMap>