我尝试将图像映射与 Jquery 工具 maphilight.js 结合使用，它在桌面上运行得很好，但当我尝试在 Sharepoint Onpremise 上的内容编辑器 Web 部件中部署 html 页面时，它不起作用。
我尝试将代码放入脚本编辑器 Web 部件中，但没有成功。
有代码:
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.maphilight.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.map').maphilight();
});</script>
</head>
<body>
<div>
<img src="./images/canada.png" class="map" usemap="#simple">
<map name="simple">
<area coords="542,313,573,365,590,372,608,370,621,372,636,365,670,359,675,341,670,321,677,306,690,295,698,282,703,257,700,229,672,241,662,252,649,262,634,257,619,252,606,239,619,231,608,216,593,203,573,188,575,208,560,213,552,213,544,206,534,198,524,200,506,193,493,200,481,200,498,226,498,239,514,241,527,249,527,277,521,285,532,298" shape="poly" data-maphilight='{"strokeColor":"4d738e","strokeWidth":5,"fillColor":"4d738e","fillOpacity":0.5}'>
</map>
</div>
</body>
</html>
就像我遗憾的那样，它在我的桌面上运行得很好，但在本地共享点上运行得不好。 是的，我已经改变了 SP 版本上的 img 和 js 库的路径。
我可以使用 css 或任何其他插件来替代吗？
提前致谢。
屏幕截图:
最佳答案
将下面的示例代码添加到网站页面的脚本编辑器 Web 部件中以检查其是否有效。
<div>
<img src="https://cdn-images-1.medium.com/max/1600/0*H8odJZNPmo13lEJ2" class="map" width="800" usemap="#simple"/>
<map name="simple">
<area coords="211,259,192,300,212,337,208,414,228,425,243,418,274,363,307,305,291,292,272,284,231,254" shape="poly" data-maphilight='{"strokeColor":"4d738e","strokeWidth":5,"fillColor":"4d738e","fillOpacity":0.5}'>
</map>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.map').maphilight();
});
</script>
并使用IE F12开发者工具检查是否出现某些js错误，并检查CSS样式。
关于javascript - 是否有图像映射的替代方案能够更改图像上特定 div 区域的背景颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59548600/