首页 > 解决方案 > HTML地图标签以及js maphilight停止工作

问题描述

我正在制作一个网页并在其中使用地图标签。我的区域坐标是正确的,但由于某种原因它不起作用。我也使用了maphilight不能正常工作的库。此外,具有不同坐标的相同代码适用于我使用的不同图像,但现在不是。这是我的html代码:

<div class="col-md-12">
  <img src="/static/Images/Mosaic.png" alt="mosaic" usemap="mosaicMap" id="mosaicImg">
  <map name="mosaicMap">
      <area shape="rect" coords="0,0,100,100" onclick="selectImage(1)">
      <area shape="rect" coords="100,0,200,100" onclick="selectImage(2)">
      <area shape="rect" coords="200,0,300,100" onclick="selectImage(3)">
      <area shape="rect" coords="0,100,100,200" onclick="selectImage(4)">
      <area shape="rect" coords="100,100,200,200" onclick="selectImage(5)">
      <area shape="rect" coords="200,100,300,200" onclick="selectImage(6)">
      <area shape="rect" coords="0,200,100,300" onclick="selectImage(7)">
      <area shape="rect" coords="100,200,200,300" onclick="selectImage(8)">
      <area shape="rect" coords="200,200,300,300" onclick="selectImage(9)">
  </map>
</div>

我的图像是 300 x 300 px 单击该区域时未调用该函数。这是我的 js 代码maphilight

$(function() {
  $('#mosaicImg').maphilight();
});

这是调用的函数:

function selectImage(imageNumber) {
    console.log("here");
    imageNum = imageNumber;
    inputImage.src = "/static/Images/Mosaic" + imageNum.toString() + ".png";
    laterNextText();
}

请帮我确定我哪里错了。

标签: javascripthtmldictionary

解决方案


推荐阅读