问题描述
我是编码新手。由于某种原因无法完成这项工作。感谢任何帮助
我想突出显示/选择不同身体部位的人体解剖图像。我可以添加到 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
}
});