1

どの方法が最適かはわかりません。 ポイントは、インタラクティブなマップを作成することです。私はそれを機能させる方法を知っています:

<map id="mapdk" name="mapdk">
<area shape="poly" coords="7,230,12,230,14,232,17,233,20,230,22,231,25,234,29,235,31,231,33,228,39,228,43,228,46,232,50,232,51,225,56,223,60,222,62,223,61,227,64,229,68,228,71,225,74,221,77,217,80,215,82,215,84,217,87,218,91,219,92,222,94,225,94,227,95,230,97,230,99,232,100,234,103,234,105,234,105,237,105,239,108,239,109,240,109,243,105,245,104,244,105,247,108,246,110,246,114,246,117,247,121,247,124,247,127,247,130,246,134,244,133,241,136,240,134,238,132,236,135,233,134,230,130,230,126,230,122,229,124,226,126,226,129,225,133,224,136,224,139,224,140,225,141,227,144,228,145,224,146,221,148,217,148,212,148,208,148,202,147,195,146,188,149,184,152,182,154,179,156,176,159,173,161,174,162,176,162,179,161,184,158,183,157,183,154,185,155,187,156,189,159,188,162,186,165,187,169,182,172,182,174,182,175,184,173,186,175,189,177,191,179,187,179,183,185,177,188,171,191,164,193,156,191,151,187,147,184,143,178,144,173,145,168,146,160,145,154,143,151,140,150,138,147,143,146,148,142,151,136,154,153,133,153,129,153,125,150,119,147,112,147,106,147,101,148,94,152,87,153,81,154,76,157,69,159,64,163,62,164,55,161,45,163,40,165,35,159,29,156,22,156,17,157,12,159,8,162,5,166,2,169,0,161,1,156,5,152,8,148,12,144,15,140,17,134,19,130,18,126,19,121,22,117,30,100,59,94,64,82,71,69,72,64,71,60,72,54,76,49,77,40,77,35,78,27,87,23,93,17,102,14,111,13,117,16,117,17,121,20,126,24,129,28,135,31,139,32,140,35,138,38,135,38,134,38,131,37,130,35,128,33,127,30,126,30,121,29,116,32,113,38,109,39,111,41,112,36,114,35,116,34,121,35,123,38,128,41,129,43,128,45,127,49,126,50,123,53,118,54,115" href="#" />
  <area shape="poly" coords="34,213" href="#" /></map>

また、次のようなものを使用します。

#mapdk {
 list-style: none;
 background: url(images/mapdk.png) no-repeat 0 0;
 position: relative;
 width: 580px;
 height: 268px;
 margin: 0;
 padding: 0;
}

#mapdk:hover {
 background: url(images/mapdk_red.png) no-repeat 0 0;
}

そしてついに使用canvas

optimalしかし、このようなタスクを作成するのに最も適しているのはどれですか。

前もって感謝します

4

1 に答える 1

1

最適の意味によって異なります。マップを作成している場合は、mapおそらく最善の方法だと思います。その目的のために考えられた要素があるのに、なぜ他のものを使用するのですか？

現在、 を使用して実行できない特別な機能 (アニメーションやグラフなど) があるmap場合は、代わりに を検討する必要がありますcanvas。

の目的上、:hoverどちらも同じです。ただし、ではないものにはホバーを使用しませんbuttonが（JSを使用します）、html5を使用しているため、実際には問題にはなりません（とにかく古いブラウザーをサポートしていません）。

于 2013-05-29T04:28:04.020 に答える