1

ナビゲーションの一部として以前の開発者が作成した画像マップに取り組んでいます。それは、サイトのそれらの部分にナビゲートするために地域に分割された英国の地図を特徴とします。以前の開発者はimgマップを使用していましたが、イメージマップはレガシーメソッドであるため、イメージマップはcssを正しく使用しません。

ベローはコードです

<style type="text/css">

#map a {
    cursor: hand;
}

</style>

<div id="mapimage"><img src="ukmap.gif" USEMAP="#map" TYPE="image/png" TITLE="Join your local network" WIDTH=294 HEIGHT=486></div>

 <map id="map" name="map">


    <area shape="poly" id="northern" alt="Northern" title="Northern" coords="123,248,134,271,139,294,141,301,156,321,167,317,183,307,180,288,188,298,205,302,225,290,239,289,248,274,211,229,199,208,176,170,168,170,148,207,123,238" href="#" target="" />

    <area id="wales" shape="poly" alt="Wales" title="Wales" coords="100,302,92,332,110,338,111,355,64,374,88,400,133,398,154,404,164,384,161,372,144,364,145,344,154,321,143,302,103,293" href="#" target="" />

    <area id="westmidlands" shape="poly" alt="West Midlands" title="West Midlands" coords="181,368,195,360,206,351,189,326,182,305,149,321,142,358,147,369,163,376" href="#" target="" />

    <area id="eastmidlands" shape="poly" alt="East Midlands" title="East Midlands" coords="215,365,233,341,233,328,254,320,238,284,210,293,192,304,177,290,184,320,204,353,203,366" href="#" target="" />

    <area id="london" shape="poly" alt="London" title="London" coords="227,385,235,398,244,402,255,391,259,384,239,379,230,383" href="#" target="" />

    <area id="east" shape="poly" alt="East" title="East" coords="260,315,287,316,288,364,271,389,259,390,246,377,225,382,222,368,217,357,235,327" href="#" target="" />

    <area id="southwest" shape="poly" alt="South West" title="South West" coords="61,468,88,475,104,456,139,462,153,437,180,441,192,436,196,396,188,363,162,375,152,405,142,404,109,408,87,440" href="#" target="" />

    <area id="southeast" shape="poly" alt="South East" title="South East" coords="209,445,224,429,259,429,284,409,276,386,254,391,241,405,226,388,215,363,194,369,199,401,192,436" href="#" target="" />

    <area id="northernireland" shape="poly" alt="Northern Ireland" title="Northern Ireland" coords="46,270,56,267,81,244,58,215,33,203,1,237,0,252,9,268" href="#" target="" />

</map>

ホバー時に色を変更するには、各領域が必要です。絶対位置でdivとul/liを使用してこれを書き直すのが最善でしょうか。または、マウスオーバーでjquery / javascriptを使用してukmap.gifを変更することは可能ですか？その場合、異なる領域のブロックされた色で同じ画像を作成し、css：hoverを模倣するように画像を変更することができます。単純なjqueryハックでこれらを選択できる場合は、以前の人々の作業を損なうと同時に、書き直しに時間を無駄にしたくありません。

<html>
<head>
<style type="text/css">

#map a {
    cursor: hand;
}

</style>
<script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>


    <script>
$('#mapimage').mapster(
    { 
        fillColor: 'ff0000'
    });​
</script>

<div>
    <img id="mapimage" src="images/map-complete.gif" USEMAP="#map" TYPE="image/png" TITLE="Join your local network" WIDTH=294 HEIGHT=486></div>

 <map id="map" name="map">


    <area shape="poly" id="northern" alt="Northern" title="Northern" coords="123,248,134,271,139,294,141,301,156,321,167,317,183,307,180,288,188,298,205,302,225,290,239,289,248,274,211,229,199,208,176,170,168,170,148,207,123,238" href="#" target="" />

    <area id="wales" shape="poly" alt="Wales" title="Wales" coords="100,302,92,332,110,338,111,355,64,374,88,400,133,398,154,404,164,384,161,372,144,364,145,344,154,321,143,302,103,293" href="#" target="" />

    <area id="westmidlands" shape="poly" alt="West Midlands" title="West Midlands" coords="181,368,195,360,206,351,189,326,182,305,149,321,142,358,147,369,163,376" href="#" target="" />

    <area id="eastmidlands" shape="poly" alt="East Midlands" title="East Midlands" coords="215,365,233,341,233,328,254,320,238,284,210,293,192,304,177,290,184,320,204,353,203,366" href="#" target="" />

    <area id="london" shape="poly" alt="London" title="London" coords="227,385,235,398,244,402,255,391,259,384,239,379,230,383" href="#" target="" />

    <area id="east" shape="poly" alt="East" title="East" coords="260,315,287,316,288,364,271,389,259,390,246,377,225,382,222,368,217,357,235,327" href="#" target="" />

    <area id="southwest" shape="poly" alt="South West" title="South West" coords="61,468,88,475,104,456,139,462,153,437,180,441,192,436,196,396,188,363,162,375,152,405,142,404,109,408,87,440" href="#" target="" />

    <area id="southeast" shape="poly" alt="South East" title="South East" coords="209,445,224,429,259,429,284,409,276,386,254,391,241,405,226,388,215,363,194,369,199,401,192,436" href="#" target="" />

    <area id="northernireland" shape="poly" alt="Northern Ireland" title="Northern Ireland" coords="46,270,56,267,81,244,58,215,33,203,1,237,0,252,9,268" href="#" target="" />

</map>
​

</ p>

4

4 に答える 4

6

「画像マップはレガシーな方法です」-真実ではありません。HTML画像マップは、HTML5仕様で完全にサポートされています。

CSSは単にイメージマップには適用されません。

この目的のために正確に設計されたjqueryプラグインであるImageMapsterを試してください。

基本的な使用法は次のとおりです（他の回答と同じ問題です。エリアが正しく一致していません。英国の正確な画像マップを簡単に見つけることができず、エリアが一致するソース画像がありません）。しかし、あなたはその考えを理解します。

http://jsfiddle.net/VcGXL/

// basic implementation of hotspots with ImageMapster

$('#mapimage').mapster(
{ 
    fillColor: 'ff0000'
});
于 2012-08-24T13:33:38.350 に答える
5

すべてを再開したくない場合は、次のようにすることができます。各領域にホバーコードを追加し、画像のソースを変更します。

$('#southeast').hover(
        function() {
            $('#mapimage img').attr('src', 'http://www.groupswelcome.co.uk/maps/uk_map.gif');
        },
        function() {
            $('#mapimage img').attr('src', 'http://www.alert24uk.com/ESW/Images/uk-map.gif');
        }
    );

これがこの方法のフィドルです（右下の南東のロールオーバー）...もちろん、画像はマッピングに対応していません。

これを行うことにより、画像が読み込まれるまで、一時的に空白の画像が表示されます。

代わりにスプライトシートを使用するなど、これを防ぐ方法があります。興味があれば、私はあなたのために例を作ることができます。

これは簡単な方法です。他のオプションがあります。Webサイトが最近のブラウザ用の場合はHTML5キャンバス。

于 2012-08-24T13:22:58.837 に答える
1

実際、領域のデフォルトの表示はnoneであるため、最初にdisplay：blockにスタイルを設定する必要があるため、このCSSルールを配置して、マップ領域にカーソルを変更します。

area{
    display:block;
    cursor:hand;
}
于 2013-02-06T09:23:33.277 に答える
0

ゲームの後半にこの質問に飛びついて申し訳ありませんが、不規則な（長方形ではない）形状に対する答えがあります。SVGを使用して解決し、イベントを添付する場所のマスクを生成しました。

アイデアは、インラインSVGにイベントを添付することです。これは、SVGを生成するためのプログラムがたくさんあるため、非常に安価でユーザーフレンドリーです。SVGは、画像のレイヤーを背景として持つことができます。

http://jcrogel.com/code/2015/03/18/mapping-images-using-javascript-events/

于 2015-03-20T03:03:07.850 に答える