Как интегрировать jQuery maphilight в проект MVC3 Razor C#

Я пытался создать необычную карту изображений для моего сайта, которая построена с использованием ASP.Net MVC2 Razor C#. Я наткнулся на эту страницу: http://davidlynch.org/projects/maphilight/docs/ которая в основном идеально подходила для того, что мне нужно. Учил меня много о том, как настроить и т. Д. В HTML, с которым я не был знаком.

Проблема в том, что я не могу заставить его работать на моем веб-сайте MVC. Примечание. Этот веб-сайт был создан с использованием шаблона Microsoft в Visual Web Developer 2010.

Я скачал скрипты 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 и т. Д., Но не уверен, что я сделал неправильно.

Ценю любую помощь - спасибо.

Источник

1 ответ

Неправильная настройка файла JS maphilight так, что на самом деле появляются светящиеся огни.

Убедитесь, что 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 для освещения.

Источник
Другие вопросы по тегам