Question

目前，我为多个地区开发了一些HTML 图片地图，我想知道是否可以同时创建一个包含多个坐标环的单个区域标记（例如，如果一个区域包含岛屿）。

当我使用鼠标悬停js-highlighting effects时，这些多个环必须是单独的，但我希望它们在鼠标悬停时同时突出显示而不突出显示区域这些环之间（听起来很复杂，因此请参阅this image ）。当然，他们都应该得到相同的超链接。

我希望，我说我的问题可以理解。提前谢谢！

我当前的代码（三个岛屿和三个区域标签=＆gt;我想要一个区域标签）：

<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery maphilight documentation</title>
    <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="jquery.maphilight.min.js"></script>
    <script type="text/javascript">
        $(function () {
        $('.map').maphilight();
        });
    </script>
  </head>
  <body>
    <img src="full_sliced.png" "width="auto" height="auto" alt="Karte" usemap="#simple" class="map">
    <map name="simple">
    <area href="#" shape="poly" alt="Link" data-maphilight='{"strokeColor":"FFdEAD","strokeWidth":0.1,"fillColor":"EB9947","fillOpacity":1}' title="test contour"
    coords ="21,226,22,225,24,225,25,226,26,226,27,227,27,231,25,233,25,235,23,237,22,237,22,240,21,241,21,243,19,245,18,245,15,242,15,241,14,241,13,240,11,240,10,239,7,239,6,238,6,233,7,232,8,232,9,231,11,233,13,233,14,232,15,232,17,230,17,229,20,226,">
    <area href="#" shape="poly" alt="Link" data-maphilight='{"strokeColor":"FFdEAD","strokeWidth":0.1,"fillColor":"EB9947","fillOpacity":1}' title="test contour"
    coords ="307,150,308,149,309,149,314,154,314,171,312,173,312,178,313,179,312,180,312,183,311,184,311,185,310,186,310,188,309,189,310,190,308,192,308,193,305,196,303,196,302,197,301,197,300,198,295,198,294,199,292,199,291,200,290,200,289,201,286,201,286,202,283,205,283,206,281,208,280,208,280,210,279,211,274,211,273,210,271,210,270,209,269,209,268,208,267,208,266,209,265,209,264,208,264,206,266,204,271,204,272,203,273,203,274,202,276,202,278,200,279,200,284,195,284,193,285,192,285,186,288,183,288,179,289,178,289,177,293,173,293,171,295,169,295,167,296,166,296,165,297,164,297,161,298,160,298,159,299,158,299,157,298,156,298,155,302,151,304,151,305,150,">
    <area href="#" shape="poly" alt="Link" data-maphilight='{"strokeColor":"FFdEAD","strokeWidth":0.1,"fillColor":"EB9947","fillOpacity":1}' title="test contour"
    coords ="199,198,200,197,201,197,202,198,202,210,203,210,204,211,204,216,205,217,205,220,204,221,204,226,203,227,203,228,199,232,197,232,196,233,195,233,194,234,191,234,190,235,188,235,187,236,184,236,183,235,182,235,181,234,180,234,172,226,172,224,170,222,170,214,172,212,172,211,173,210,175,210,178,207,178,206,179,205,179,201,180,200,180,199,181,198,182,198,183,199,185,199,186,200,195,200,196,201,197,201,199,199,">
  </body>
</html>

HTML图像映射的多个“坐标环”

0 个答案: