如何將jQuery maphilight整合到MVC3 Razor C＃項目

我一直在試圖爲我的網站創建一個花哨的圖像地圖，它是使用ASP.Net MVC2 Razor C＃構建的。我遇到了這個頁面：http://davidlynch.org/projects/maphilight/docs/這對我所需要的基本上是完美的。教我很多關於如何在我不熟悉的HTML中設置等等。如何將jQuery maphilight整合到MVC3 Razor C＃項目

問題是我似乎無法讓它在我的MVC網站上工作。注意：本網站是使用Visual Web Developer 2010中的Microsoft模板構建的。

我已經下載了jquery.maphilight.min.js和jquery.maphilight.js腳本並添加到了我的腳本文件夾中。我也將它們添加到我的主要_Layout.cshtml文件位置：

<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title</title> 
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/Content/lightbox.css")" rel="stylesheet" type="text/css" /> 

    <script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")"  type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/lightbox.js")"    type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.maphilight.js")" type="text/javascript"></script> 
</head>

我又試圖調用腳本在我看來：

@{ 
    ViewBag.Title = "Course Map"; 
} 
<fieldset> 
    <legend>Course Map </legend> 
    <div id="course_map"> 
     <img src="../../images/cmap.gif" width="500" height="421" alt="Insert Alt"  usemap="#image_map" 
      border="0"> 
     <map name="image_map" id="image_map"> 
      <area href="#" title="SC" shape="poly" coords="348,213, 340,207, 338,204, 338,200, 340,196, 338,192, 335,190, 336,183, 338,178, 342,176, 347,175, 348,170, 355,170, 361,174, 362,184, 362,194, 366,200, 366,206, 369,212, 371,217, 368,222, 367,228, 369,234, 367,241, 361,243, 356,240, 352,236, 348,236, 345,231, 344,225, 346,221, 349,216" /> 
     </map> 
    </div> 
    <script type="text/javascript">  $(function() { 
      $('.map').maphilight({ fade: false }); 
     }); 
    </script> 
</fieldset>

圖像映射COORDS做工精細，但我不在David的網站上沒有任何幻想突出顯示。我很確定我已經知道我打電話給Javascript等，但不確定我做錯了什麼。

感謝任何幫助 - 謝謝。

來源

2012-05-02 Harry

您是否包含必要的CSS文件？ – Brendan

這是非常有意義的，但是當下載JS文件時，它們似乎沒有任何CSS - 這聽起來可能完全愚蠢（呃，實際上它是!!），但我是這樣的一個n00b，當我通常下載JS模板/文件，以獲得更多花式添加（例如燈箱），它們通常包含所需的所有內容 - 假設其中一個不需要... – Harry

實際上，您看起來像是爲maphilight標記添加了一個屬性，您是否這麼做？檢查它們的來源..'maphilight ='{「strokeColor」：「0000ff」，「strokeWidth」：5，「fillColor」：「ff0000」，「fillOpacity」：0.6}'' – Brendan

未能正確配置maphilight JS文件，以便高亮燈實際顯示。

確保JS從標籤正確堪稱_Layout.cshtml文件：

<script src="@Url.Content("~/Scripts/jquery.maphilight.js")" type="text/javascript"></script>

然後轉到視圖調用函數：

<script type="text/javascript">  $(function() { 
      $('.map').maphilight({ fade: false }); 
     }); 
    </script>

我的問題，如上所述很愚蠢的是沒有正確配置JS選項，以便高亮顯示。

來源

2012-05-04 10:16:38 Harry

如何將jQuery maphilight整合到MVC3 Razor C＃項目

回答

相關問題