如何让 jQuery maphilight 工作？答案

【问题标题】：How to get jQuery maphilight to work?如何让 jQuery maphilight 工作？
【发布时间】：2016-06-01 11:34:21
【问题描述】：

我无法让 Mapilight http://davidlynch.org/projects/maphilight/docs/ 工作！

这些是我的 html 头部的脚本链接。

<script type="text/javascript" src="/js/jquery.js"></script> 
<script type="text/javascript" src="/js/jquery.maphilight.min.js"></script>
<script type="text/javascript">
   $('.map').maphilight()
   
</script>

$('.map').maphilight()

这是我的图片和地图

<img class="map" title="Knight Campus, Warwick - Third Floor" src="/about/floorplans/knight/images/3rd_flr_2013_layout2.png" alt="Knight Campus, Warwick - Third Floor" usemap="#simple" />

<map name="simple">
  <area href="#" data-state="VT" data-full="Vermont" shape="rect" coords="377,34,407,43" />
  <area href="#" data-state="MA" data-full="Massachusetts" shape="rect" coords="358,47,406,56">
  <area shape="poly" coords="211,3,121,67,112,53,95,103,146,108,136,92,229,25" href="#" alt="arrow">
  <area shape="poly" coords="78,83,70,100,52,104,64,115,61,133,78,124,94,133,91,116,104,102,87,101,79,88" href="#" alt="star">
  <area shape="poly" coords="248,126,222,150,202,122,233,105,239,118,249,125,250,128" href="#" alt="a square">
  <area shape="poly" coords="151,249,175,225,182,222,167,193,136,221,153,250" href="#" alt="another square">
  <area shape="rect" coords="250,250,290,290" href="#" alt="Shadow for some">
</map>

请帮忙！

谢谢

【问题讨论】：

这些区域不会突出显示。当我检查演示中的代码时，我看到了画布标签……我试着把它们放进去，但没有用。
我也在使用引导带，所以可能会扔掉它
您应该将所有这些添加到问题中。没有这些信息是不完整的。

标签： javascript jquery html maphilight

【解决方案1】：

将您的电话转至maphilight()document.ready()：

$(document).ready(function() {
  $('.map').maphilight();
});

以下内容非常适合我：

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type='text/javascript' src='http://davidlynch.org/projects/maphilight/jquery.maphilight.js'></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.map').maphilight({ alwaysOn: true });
            // uncomment this line for normal hover highlighting
            //$('.map').maphilight();
        });   
    </script>
</head>
<body>
    <img class="map" title="Knight Campus, Warwick - Third Floor" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Big_Sur_June_2008.jpg/1024px-Big_Sur_June_2008.jpg" alt="Knight Campus, Warwick - Third Floor" usemap="#simple" />
    <map name="simple">
      <area href="#" data-state="VT" data-full="Vermont" shape="rect" coords="377,34,407,43" />
      <area href="#" data-state="MA" data-full="Massachusetts" shape="rect" coords="358,47,406,56">
      <area shape="poly" coords="211,3,121,67,112,53,95,103,146,108,136,92,229,25" href="#" alt="arrow">
      <area shape="poly" coords="78,83,70,100,52,104,64,115,61,133,78,124,94,133,91,116,104,102,87,101,79,88" href="#" alt="star">
      <area shape="poly" coords="248,126,222,150,202,122,233,105,239,118,249,125,250,128" href="#" alt="a square">
      <area shape="poly" coords="151,249,175,225,182,222,167,193,136,221,153,250" href="#" alt="another square">
      <area shape="rect" coords="250,250,290,290" href="#" alt="Shadow for some">
    </map>
</body>
</html>

【讨论】：

@dbaker6 看看我添加的完整示例。