Question

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

这是我的布局代码笔。 (codepen here) 我想像这样在红色区域附加状态图标/图像 layout2

所以...。我该怎么办？如果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();

如何在地图区域上使用maphilight附加图标（或图像）？

0 个答案: