无法使图像映射器在 javascript/jquery 上工作

如何解决无法使图像映射器在 javascript/jquery 上工作

我是编码新手。由于某种原因无法完成这项工作。感谢任何帮助

我想突出显示/选择不同身体部位的人体解剖图像。我可以添加到 mapster 代码中，这是一个简短的代码，用于测试其是否有效。

编辑：弄乱了一段时间，最新代码在这里：jsfiddle.net/49mpz6ku 确切的代码适用于 jsfiddle 但不适用于我的 html。这是我浏览器的屏幕截图：screenshot

edit2：将 html 与 js 文件链接起来没有问题，除了 imagemapster 之外，其他一切都正常

edit3：好的，我在工作 2 小时后想通了。我的错误是将与库和我的 js 文件链接的脚本放在它工作的元素上方的 head 部分。当我将脚本带到 html 正文的末尾时，它现在可以工作了。 ( 或者你可以使用 $(document).ready(function(){Your code here}); 在页面加载后执行代码。这也有效，希望对未来的人有所帮助）

html：

<head>
    
    <script
        src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
        </script>

    <script 
        language="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/imagemapster/1.5.4/jquery.imagemapster.min.js">
    </script>

    <script 
        src="exp.js">
    </script>

</head>
<body>
    
    <img src="unnamed.jpg" usemap="#image-map" id="mappic">
    
    <map name="image-map" >
    <area target="" alt="Head" title="Head" href="" coords="119,61,38" shape="circle">
    <area target="" alt="Neck" title="Neck" href=""  coords="143,100,97,122" shape="rect">
    <area target="" alt="Shoulder" title="Shoulder" href=""  coords="147,163,196,117" shape="rect">
    </map>

</body>

JS：

$('#mappic').mapster({
  singleSelect: true,fill : true,fillOpacity : 0.6,fillColor: 'ffffff',});

解决方法

到底有什么问题？控制台有没有错误？你想达到什么目的？这是你的全部代码吗？如果没有，请插入更多代码细节并尝试制作可运行的代码示例（如jsfiddle）

Here is a working code 或许可以帮到你！

HTML

<img id="myimage" class="map" src="http://cdn.iphoneincanada.ca/wp-content/uploads/2013/05/unnamed.png" usemap="#mark">
    <map name="mark">
        <area id="nao" shape="rect" coords="10,10,50,50" href="#">
    </map>

jQuery

$('#myimage').mapster({
    staticState: true,fillColor: "d42e16",stroke: true,strokeColor: "ff0000",strokeOpacity: 1.0,strokeWidth: 2,render_highlight:  {
        fillOpacity: 0.5,fillColor: "FFeedd",strokeColor: "FF0000",strokeWidth: 2
    }
});