悬停时如何更改图像的一部分？

Question

我想在鼠标悬停时更改图像的一部分。

我已经为图像定义了一个地图，有 2 个区域（圆圈）。

对于第一个，我尝试通过 onmouseover 在该区域上悬停圆圈时更改图像的 src。但它在 Firefox 上闪烁，所以它似乎不起作用。

对于第二个，我让一张图片出现在另一张图片之上。它在 Firefox 上工作正常（除非我用 onmousemove 添加工具提示，然后它也会不停地闪烁）。

这两种情况在 Edge 上似乎都不起作用。它甚至没有进入 page_bar_mousehover(...) 函数。我不明白为什么，因为地图和区域似乎受支持。

如何使这个工作和跨浏览器兼容？

function page_bar_mousehover(item) {
    switch (item) {
        case "tooltips_choices":
            document.getElementById('page_bottom_right_bar').src = "./resources/page_bottom_right_bar_hover_tooltips.png";
            break;
        case "hexes_choices":
            if (document.getElementById('page_bottom_right_bar_hover_hexes_img').style != "") {
                document.getElementById('page_bottom_right_bar_hover_hexes_img').style = "";
            }
            break;
    }
}

function page_bar_mouseout() {
    document.getElementById('page_bottom_right_bar').src = "https://i.ibb.co/zS1g5jK/page-bottom-right-bar.png";
    document.getElementById('page_bottom_right_bar_hover_tooltips_img').style = "display:none;";
    document.getElementById('page_bottom_right_bar_hover_hexes_img').style = "display:none;";
}

html {
  height:100%;
}

body {
  min-height:100%;
  background-color: black;
  margin: 0;
}

#page_bottom_right_bar_hover_hexes_img, #page_bottom_right_bar_hover_tooltips_img {
  position:fixed;
  right:0;
  bottom:0;
}

<div id="main">
  <img id="page_bottom_right_bar" src="https://i.ibb.co/zS1g5jK/page-bottom-right-bar.png" style="position:fixed;right:0;bottom:0;" usemap="#page_bottom_right_bar" />
  <img id="page_bottom_right_bar_hover_hexes_img" src="https://i.ibb.co/Dt8b5Vb/page-bottom-right-bar-hover-hexes.png" usemap="#page_bottom_right_bar" style="display:none;" />
  <img id="page_bottom_right_bar_hover_tooltips_img" src="https://i.ibb.co/5Gm0PTK/page-bottom-right-bar-hover-tooltips.png" usemap="#page_bottom_right_bar" style="display:none;" alt="coucou" />
  <map id="page_bottom_right_bar">
    <area id="page_bottom_right_bar_hover_hexes_area" shape="circle" coords="26,132,21" alt="Tooltips choices" href="#tooltips_choices" onmouseover="page_bar_mousehover('tooltips_choices');" onmouseout="page_bar_mouseout()">
    <area id="page_bottom_right_bar_hover_tooltips_area" shape="circle" coords="26,177,21" alt="Hexes choices" href="#hexes_choices" onmouseover="page_bar_mousehover('hexes_choices');" onmouseout="page_bar_mouseout();;">
  </map>
</div>

Answer 1

你的问题主要是map元素没有正确应用，必须要有name属性才能被引用。更详细的可以参考这篇文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map#attributes

在你的例子中，只需要修改<map>id属性为name，或者添加name属性：

<map name="page_bottom_right_bar">

悬停时如何更改图像的一部分？

How to change part of an image when it is hovered?

html

css

cross-browser

microsoft-edge