3

MapHilightの使い方を理解しようとしていますが、あまり運がありません。その上での唯一の「ドキュメント」は、いくつかの実用的な例にすぎないようです。これは、プラグインをホストしているサイトがダウンしているように見えることが原因である可能性があります。また、昨日JQueryを学んだばかりなので、それが私の進歩を妨げているかどうかはわかりません。私がやりたいのは、画像マップのハイライトのルックアンドフィールをエリアごとに指定することです。David Lynchの簡単なデモはこれを示していますが、それがどのように機能しているかはわかりません。彼がなぜ画像を使用するのか、それを含むdivの背景があり、キャンバスがどのような目的を果たしているのかわかりません。これが私がこれまでに持っているものです：

...
    <script type="text/javascript">
        $(function () {
            $('#ImageMap1').maphilight();
        });
    </script>
</head>
...

<div style="float: left">
    <img id="ImageMap1" src="solar_system.jpg" usemap="#ImageMapmapAreas" />
    <map id="ImageMapmapAreas" name="ImageMapmapAreas">
        <area alt="" title="" href="#Jupiter" coords="222,186,28" shape="circle"/>
        <area alt="" title="" href="#Earth" coords="135,194,13" shape="circle"
            data-maphilight="{'strokeColor':'0000ff','strokeWidth':5,'fillColor':'ff0000','fillOpacity':0.6}"/>
    </map>
</div>

これにより、デフォルトで赤い実線が強調表示されます。data-maphilightメタデータは使用されていません。これを機能させる方法の説明は素晴らしいですが、私は最終的にこのデモのほとんどすべてを利用したいので、maphilight全体の使用方法を説明するリソースに私を導くことはさらに良いでしょう。

4

3 に答える 3

6

あなたはSilverlightに切り替えることに決めたようですが、私はmaphighlightをいじっているので、これを見ることにしました。投稿したサンプルは、「と」を切り替えた後、またはその逆に切り替えた後、正常に機能するということです。 

<div style="float: left">
    <img id="ImageMap1" src="http://geographyandhistory.wikispaces.com/file/view/solar_system.jpg/43347125/283x202/solar_system.jpg" usemap="#ImageMapmapAreas" />
    <map id="ImageMapmapAreas" name="ImageMapmapAreas">
        <area alt="" title="" href="#Earth" coords="228,151,53" shape="circle" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"00ff00","fillOpacity":0.6}'/>
        <area alt="" title="" href="#Sun" coords="68,54,44" shape="circle" data-maphilight="{'strokeColor':'0000ff','strokeWidth':5,'fillColor':'00ff00','fillOpacity':0.6}"/>
    </map>
</div>​

これがフィドルです-http ://jsfiddle.net/k67gq/6/「Earth」領域と「Sun」領域が引用符を除いて同じ「data-maphilight」属性を持っている方法を確認してください。

于 2012-11-26T20:10:03.920 に答える
1

「または」の代わりに、data-maphilightで＆quot;を使用すると機能しました。例：data-maphilight = "{＆quot;strokeColor＆quot;：＆quot; 0000ff＆quot;、.. ..

于 2014-11-20T11:08:41.553 に答える
0

利用できるものは何もないと思います。カスタムハイライトを行う方法を検索しているときに、このプラグインへの参照が非常に多いのを見て、奇妙なことになりました。結局、Silverlightを使用する必要がありました。

于 2012-10-03T17:01:22.373 に答える