0

ASP.Net MVC2 Razor C# を使用して構築された、Web サイト用の派手なイメージ マップを作成しようとしています。このページに出くわしました: http://davidlynch.org/projects/maphilight/docs/これは基本的に必要なものにぴったりでした。慣れないHTMLでの設定方法など色々教えていただきました。

問題は、MVC Web サイトで動作するように見えないことです。注: この Web サイトは、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>

画像マップの座標は正常に機能しますが、David のサイトでデモされているような派手なハイライトは得られません。私は Javascript などを呼び出す方法に自信を持っていると確信していますが、何が間違っていたのかはわかりません。

助けていただければ幸いです - ありがとう。

4

1 に答える 1

0

ハイライトが実際に表示されるように、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-04T10:16:38.050 に答える