0

我一直在尝试为我的网站创建一个精美的图像映射，它是使用 ASP.Net MVC2 Razor C# 构建的。我遇到了这个页面：http ://davidlynch.org/projects/maphilight/docs/ ，它基本上非常适合我需要的东西。教了我很多关于如何在我不熟悉的 HTML 中设置等的知识。

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

Image map coords 工作正常，但我没有像 David 的网站中演示的那样得到任何花哨的突出显示。我很确定我已经搞定了我如何调用 Javascript 等，但不确定我做错了什么。

感谢任何帮助-谢谢。

4

1 回答 1

0

未能正确配置 maphilight JS 文件以便实际显示高亮灯。

确保从 _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 选项来高亮 .

于 2012-05-04T10:16:38.050 回答