asp.net ImageMap - 在鼠标上方更改图像

Question

我正在尝试创建一个随用户鼠标悬停在图像的某些部分上而变化的ImageMap。我有以下ImageMap，用户可以在其中单击颜色并转到其他页面：

我创建了4个大小相同的其他图像，并希望在鼠标悬停时换出图像。例如，当我将鼠标悬停在蓝色上时，我希望图像看起来像这样：

当我将鼠标移到绿色部分上时，我希望它看起来像这样：

完成我想要做的事情的最佳方法是什么？我计划使用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>