3

私はこれを行うための最良の方法を見つけようとしています。

基本的に、米国の地図である 1 つの画像があり、各州のクリック領域を定義できるようにしたいと考えています。(だから彼らは奇妙な形でなければならない)

html5 キャンバスと JavaScript を使用してヒット領域を定義する方法について調査しました。奇妙な形の領域の作成についてはあまり見つけていませんが..

これが最善の方法ですか？他に何か提案はありますか？

また、マウスがその上にあるときに個々の領域を強調表示し、クリック順序に基づいて色を変更できるようにしたいので、定義された領域はかなり正確でなければなりません。

各状態を別々の画像に分割してから、メイン コンテナー内で絶対配置を使用するのが最善でしょうか?

4

3 に答える 3

5

<map>次のように使用できます。

<img src="yourImage.gif" width="99" height="99" alt="YourImage" usemap="#YourMap">
//The usemap attribute must match the name attribute of your map.
<map name="YourMap">
    <area shape="rect" coords="0,0,82,126" href="path1.htm" alt="Path1">
    //Coords are x, y of the top left corner and the bottom right corner of the rectangle
    <area shape="circle" coords="90,58,3" href="path2.htm" alt="Path2">
    //Coords are the x, y of the center of the circle and the lenght of half the diameter of the circle
    <area shape="poly" coords="124,58,8, 1" href="path3.htm" alt="Path3">
    //Coords are the x, y of each points in the shape drew for an pentagone (5 corners)
    //The coords attribute could look like this coords="0, 0, 10, 10, 5, 10, 10, 5, 12, 13"
    //I know this dont make a pentagone but it does ilustrate that you need 5 pairs of     
    //numbre in the coords and that if you need more of them you can add however you need .
</map>

次に、area タグの href 属性に、ユーザーがエリアをクリックしたときに移動する場所への独自のパスを配置できます。

于 2013-10-02T14:49:58.703 に答える