如何讓jQuery maphilight工作？

我無法讓Mapilight http://davidlynch.org/projects/maphilight/docs/工作！如何讓jQuery maphilight工作？

這些是我的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>

$（ '地圖'）。maphilight（）

這裏是我的IMG和地圖

<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>

請幫助！

感謝

來源

2016-02-19 dbaker6

WHATS不工作？ –

這些區域不會突出顯示。當我檢查演示中的代碼時，我看到了畫布標籤...我試圖將它們放入，但沒有奏效。 – dbaker6

我也使用靴帶，所以也許這會把它扔掉 – dbaker6

裹在document.ready()你到maphilight()電話：

$(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>

來源

2016-02-19 19:32:25

沒有工作，但謝謝。 – dbaker6

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

如何讓jQuery maphilight工作？

回答

相關問題