14

約 70 の領域を含むイメージマップを表示する必要があります。マウスカーソルが現在あるイメージマップの領域は、特定の色で強調表示されるはずです。

これは可能ですか？

4

5 に答える 5

13

実際に本番環境で使用した後、これが答えだと思います：http://plugins.jquery.com/project/maphilight

これを使用すると、イメージマップにその機能を実装するのに数行のコードが必要です。

于 2009-07-31T19:07:07.150 に答える
8

はい、可能です。私はjqueryとイメージマップエリアのmouseenter / mouseleaveイベントで正確なことをしましたが、70エリアではそうではありません. それはあなたにとってより多くの仕事になるでしょう。マウスオーバーで ajax 呼び出しを介して画像をロードするか、スプライトと配置を使用して 70 個の画像を dom にロードする必要がないようにすることを検討してください。

jquery:

$(document).ready(function() {

    $(".map-areas area").mouseenter(function() {
        var idx = $(".map-areas area").index(this);
        $(".map-hovers img:eq(" + idx + ")").show();
        return false;
    }).mouseleave(function() {
        $(".map-hovers img").hide();
        return false;
    });

});

.map-hovers は、マップの上に配置するすべての画像を含む div です。必要に応じてそれらを配置したり、画像を画像マップと同じサイズにすることができますが、透過性があります。

そして、従うべきいくつかのhtml：

注: map-hovers コンテナー内で、イメージ マップ エリアのインデックスが img インデックスとどのように並んでいるかに注目してください。また、イメージ マップは透明な gif を指し、背景イメージを表示する実際のイメージに設定する必要があります。これはクロス ブラウザーの問題です。正確な理由は思い出せません。

<div id="container">
        <img src="/images/trans.gif" width="220" height="238" class="map-trans" alt="Map / Carte" usemap="#region-map" />
        <div class="map-hovers">
            <img src="/images/map/sunset-country.png" alt="Sunset Country" />
            <img src="/images/map/north-of-superior.png" alt="North of Superior" />
            <img src="/images/map/algomas-country.png" alt="Algoma's Country" />
            <img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" />
            <img src="/images/map/rainbow-country.png" alt="Rainbow Country" />
            <img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" />
            <img src="/images/map/muskoka.png" alt="Muskoka" />    
        </div>
</div>
    <map name="region-map" id="region-map" class="map-areas">
    <area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" />
    <area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" />
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" />
    <area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" />
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" />
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" />
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" />
    </map>
于 2009-07-29T15:24:20.940 に答える
2

ScottEのソリューションを使用しようとしましたが、残念ながら、ターゲット画像をボディの背景として追加する必要がありました。

私の解決策は彼に非常に近いですが、適切な画像を使用しています

jQuery：

$(document).ready(function() {

    $(".map-areas area").mouseenter(function() {
        var idx = $(".map-areas area").index(this);
        $(".map-hovers img:eq(" + idx + ")").show();
        return false;
    });
    $(".map-hovers img").mouseleave(function() {
        $(".map-hovers img").hide();
        return false;
    });

});

ここでの重要な概念は、マップエリアに入ると、マップホバー画像を表示し、それがマウスの下のアクティブレイヤーになるということです。その画像を離れるタイミングを検出するだけで、スムーズに作成できます。

HTML :(ほぼ同じ、トランスイメージは必要ありません）

<div id="container">
        <img src="/images/full-map.png" width="220" height="238" class="map-trans" alt="Map / Carte" usemap="#region-map" />
        <div class="map-hovers">
            <img src="/images/map/sunset-country.png" alt="Sunset Country" />
            <img src="/images/map/north-of-superior.png" alt="North of Superior" />
            <img src="/images/map/algomas-country.png" alt="Algoma's Country" />
            <img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" />
            <img src="/images/map/rainbow-country.png" alt="Rainbow Country" />
            <img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" />
            <img src="/images/map/muskoka.png" alt="Muskoka" />    
        </div>
</div>
    <map name="region-map" id="region-map" class="map-areas">
    <area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" />
    <area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" />
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" />
    <area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" />
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" />
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" />
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" />
    </map>
于 2012-11-19T22:22:49.413 に答える
1

かっこいい方法があるかどうかはわかりませんが、ブロック要素の背景画像として写真を撮り、透明な写真と画像マップを重ねて、マウスオーバーイベントでこの透明な写真を次のように置き換えることができます。その領域が強調表示されている画像。

欠点としては、強調表示された領域の70枚の画像が必要になります

于 2009-07-29T15:28:42.553 に答える