如何让jQuery maphilight工作?

时间:2016-02-19 19:06:12

标签: javascript jquery html

我无法使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>
&#13;
&#13;
&#13;

        $(&#39; .MAP&#39)。maphilight()

这是我的img和地图

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

请帮助!

由于

1 个答案:

答案 0 :(得分:2)

将您的来电打包至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>