0

以下のようにウェブページに背景画像付きのイメージマップリンクエリアを作るには？キャンバスを使用する唯一の方法ですか？純粋なCSSとクロスブラウザでそれを行う方法はありますか?

4

1 に答える 1

0

定義済みの<area shape>属性coordsが機能します。最初は複雑に見えるかもしれませんが、形状構造を理解すれば非常に簡単です。サンプルの JSFiddle を次に示します: >>>ここをクリック<<<

コードは次のとおりです。

HTML:

<div class="imagemap">
    <img src="http://i.imgur.com/T7OrXYW.png" alt="The Map" usemap="#mymap" />
    <map name="mymap" id="mymap">
        <area shape="poly" coords="6, 10, 280, 10, 144,157" href="http://www.aol.com" />
        <area shape="poly" coords="7, 20, 144, 167, 144, 288, 6, 288" href="http://www.yahoo.com" />
    </map>
</div>

CSS:

.imagemap img {
    width: 300px;
    height: 300px;
    border: 1px solid blue;
}

座標は人々を混乱させる傾向があるため、コードと一致するように図を含めました. 座標を決定するために使用できる図形は全部で 3 つあります。

  • 円- 円には 3 つの座標 (x、y、半径) が含まれます。x 座標と y 座標は円の中心を定義し、半径は円の中心から最も外側の部分までの距離(ピクセル単位)です。
  • 長方形 -長方形には 4 つの座標 (x1、y1、x2、y2) が含まれます。x1/y1 座標は長方形の左/上隅を定義し、x2/y2 座標は長方形の右/下隅を定義します(ピクセル単位)。
  • ポリゴン (両方のシェイプでポリゴン シェイプ コンストラクトを使用する必要がありました) - ポリゴンには、シェイプの各コーナーを定義する無限の数の座標が含まれています。三角形には合計 3 つの角(または頂点)があり、6 つの座標 (x1、y1、x2、y2、x3、y3) が必要です。 (ここでもピクセル単位)

ここに画像の説明を入力

于 2013-10-24T08:30:07.217 に答える