1

我在布局上使用了 jquery.maphilight、html 地图和区域 布局

这是我的布局代码笔。 （codepen here） 我想像这样在红色区域上附加状态图标/图像 布局2

所以我该怎么做？如果 jquery.maphilight 不能做到这一点，可以推荐我其他的 javascript 吗？

<!DOCTYPE html>
<html>
  <head></hrad>
  <body>
    <div>
<img style="width: 800px;height:600px;background-repeat:no-repeat;" src="https://online.visual-paradigm.com/images/features/floor-plan-designer/thumbnails/work-office-floorplan-template-02.png"  alt="" usemap="#PClayout">
    </div>
    <map name="PClayout">
<!--        working -->
      <area shape="rect" coords="200,100,300,200" id='PC1' href="#">

<!--        close-->
      <area shape="rect" coords="490,100,600,200" id='PC2' href="#">
<!--        Error-->
      <area shape="rect" coords="200,250,300,350" id='PC3' href="#">
    </map>
  </body>
</html>

function layoutalert(el, Color){
  var data = $(el).data('maphilight') || {};
  data.alwaysOn = true;
  data.fillColor = Color;
  data.strokeColor = Color;
  $(el).data('maphilight', data).trigger('alwaysOn.maphilight');
  $(el).data('maphilight', data).trigger('fillColor.maphilight');
  $(el).data('maphilight', data).trigger('strokeColor.maphilight');
}
layoutalert("#PC1", '00ff00')
layoutalert("#PC2", 'ff0000')
layoutalert("#PC3", 'ff0000')
$('img[usemap]').maphilight();
4

0 回答 0