Javascript 如何将jQuery maphilight集成到MVC项目中_Javascript_Asp.net Mvc 3_Razor_Imagemap_Visual Web Developer 2010

Javascript 如何将jQuery maphilight集成到MVC项目中

javascript asp.net-mvc-3 razor

Javascript 如何将jQuery maphilight集成到MVC项目中,javascript,asp.net-mvc-3,razor,imagemap,visual-web-developer-2010,Javascript,Asp.net Mvc 3,Razor,Imagemap,Visual Web Developer 2010,我一直在尝试为我的网站创建一个奇特的图像地图，它是使用ASP.NETMVC构建的。我看到了这个页面：它基本上完美地满足了我的需要。教了我很多关于如何用我不熟悉的HTML设置etc的知识问题是我似乎无法让它在我的MVC网站上运行。注意：此网站是使用Visual Web Developer 2010中的Microsoft模板构建的我已经下载了jquery.maphilight.min.js和jquery.maphilight.js脚本，并将它们添加到我的脚本文件夹中。我还将它们添加到我的主_La

我一直在尝试为我的网站创建一个奇特的图像地图，它是使用ASP.NETMVC构建的。我看到了这个页面：它基本上完美地满足了我的需要。教了我很多关于如何用我不熟悉的HTML设置etc的知识

问题是我似乎无法让它在我的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>

图像地图坐标工作得很好，但我并没有像大卫的网站上演示的那样得到任何奇特的突出显示。我相当肯定我已经搞砸了如何调用Javascript等，但不确定我做错了什么

感谢您的帮助-谢谢。

未能正确配置maphilight JS文件以使hi指示灯实际显示

确保从_Layout.cshtml文件中的标记正确调用JS：

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

然后转到视图调用函数：

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

我的问题是，如上所述，没有正确配置JS选项来激活屏幕。

是否包含必要的CSS文件？这很有道理，但是下载JS文件时，似乎没有任何CSS-这听起来可能非常愚蠢，事实上是这样！！，但我在这方面是一个n00b，当我通常下载JS模板/文件以进行像Lightbox这样的奇特添加时，它们通常包含所有需要的内容-因此假设不需要一个…实际上看起来你向maphilight标记添加了一个属性，你这样做了吗？检查他们的来源。。maphilight='{strokeColor:0000ff，strokeWidth:5，fillColor:ff0000，fillOpacity:0.6}'Brendan，maphilight标记是否为节中的位？i、我应该这样做：$'.map'.maphilight{strokeColor:0000ff，strokeWidth:5，fillColor:ff0000，fillO‌容量：0.6}；不，它看起来像是屏幕上的一个属性