有没有办法读取图像在 javascript 中用于 if 语句的图像映射？

Question

所以我正在使用图像映射为我正在进行的项目制作一个假的 phone。我通过 javascript 进行设置，当在图像映射中单击某个区域时，它会加载不同的图像映射。所以主屏幕在应用程序上有一个图像映射，然后当你打开图库时，它在图片上有另一个图像映射，所以可以选择它们。

但是，我运行遇到了一个问题，我需要知道在 if 语句中使用了哪个图像映射，以便我可以在主屏幕上显示选定的图片。有没有办法读取图像当前使用的图像映射？

这是我的代码，以备不时之需

if (!window.PC){
  window.PC = {};
}
PC.changeImage = function (newMap) {
    var image = document.getElementById('myImg');
    if (newMap !== undefined) {
                image.useMap = '#' + newMap;
    }
        if (image.src.match("images/Phone/Gallery/0.png")) {
                variables().pbg = '0';
        }
        else if (image.src.match("images/Phone/Gallery/1.png")) {
                variables().pbg = '1';
        }
        if (variables().pbg = '0' && image.map = 'Homescreen') {
                image.src = "images/Phone/Homescreens/0.png"
        }
        else if (variables().pbg = '1' && image.map = 'Homescreen') {
                image.src = "images/Phone/Homescreens/1.png"
        }
};

我试过 image.map，但没用，还有 image.usemap，但我想这只是为了改变正在使用的图像贴图。有办法吗？

Answer 1

根据 MDN 关于 HTMLImageElement.useMap 的文档，useMap 属性是可读可写的。

OP 脚本失败的原因是 if 子句中的 OP 与例如==/=== 但一直通过 =.

赋值

console.log(
  document
    .querySelector('img[usemap]')
    .useMap
)

<map name="infographic">
    <area shape="rect" coords="184,6,253,27"
          href="https://mozilla.org"
          target="_blank" alt="Mozilla" />
    <area shape="circle" coords="130,136,60"
          href="https://developer.mozilla.org/"
          target="_blank" alt="MDN" />
    <area shape="poly" coords="130,6,253,96,223,106,130,39"
          href="https://developer.mozilla.org/docs/Web/Guide/Graphics"
          target="_blank" alt="Graphics" />
    <area shape="poly" coords="253,96,207,241,189,217,223,103"
          href="https://developer.mozilla.org/docs/Web/HTML"
          target="_blank" alt="HTML" />
    <area shape="poly" coords="207,241,54,241,72,217,189,217"
          href="https://developer.mozilla.org/docs/Web/JavaScript"
          target="_blank" alt="JavaScript" />
    <area shape="poly" coords="54,241,6,97,36,107,72,217"
          href="https://developer.mozilla.org/docs/Web/API"
          target="_blank" alt="Web APIs" />
    <area shape="poly" coords="6,97,130,6,130,39,36,107"
          href="https://developer.mozilla.org/docs/Web/CSS"
          target="_blank" alt="CSS" />
</map>
<img usemap="#infographic" src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info.png" alt="MDN infographic" />

有没有办法读取图像在 javascript 中用于 if 语句的图像映射？

Is there a way to read what image map an image is using for an if statement in javascript?

javascript

imagemap