asp.net ImageMap-鼠标悬停时更改图像

我正在尝试创建一个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>

我确信这很容易做到，但我找不到任何关于如何做到这一点的说明。我找到的最接近的是，但它只替换为一个图像。我希望根据用户在哪个热点上移动来替换我的图像。如果不可能的话，它不必是asp.net。有人有其他建议我可以用吗？我所需要的只是当用户在每个热点上移动鼠标时图像会发生变化。