asp.net ImageMap-изменение изображения при наведении курсора мыши

---

Я пытаюсь создать карту изображений, которая меняется по мере того, как пользователи наводят курсор мыши на определенные части изображения. У меня есть следующая карта изображений, где пользователи могут нажать на цвет и перейти на другую страницу:

http://i.stack.imgur.com/hXJSC.png[^]

Я создал 4 дополнительных изображения, которые все имеют одинаковый размер, и хотел бы поменять изображение при наведении курсора мыши. Например, когда я наведу курсор мыши на синий цвет, я хочу, чтобы изображение выглядело так:

http://i.stack.imgur.com/gwb3q.png[^]

И когда я наведу курсор мыши на зеленую часть, я хочу, чтобы она выглядела так:

http://i.stack.imgur.com/EptjR.png[^]

Каков наилучший способ выполнить то, что я пытаюсь сделать? Я планировал использовать asp.net для реализации, но не смогли этого сделать.

Вот код для 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>

---