map

mapタグとは、画像の中にリンクを好きな大きさ、形で設定したいときに使うタグで、デザインに拘りたい、損ないたくないというときに使えるもので、便利ですが、その内容は少し複雑で、今回はその説明をできるだけわかりやすくしていこうかと思います。

書き方

See the Pen Untitled by suzuki119 (@suzuki119) on CodePen.

まず設定するのは<map>です。<map name=”mapname”>というふうに、このタグにはnameという属性が必須で、忘れずつけておきましょう。

次に、中にareaを作りましょう。今回は、２つの領域を設定します。領域の形はshapeタグで、大きさの設定は画像の左上を基点としてcoordsタグで可能です

rect– 長方形の領域　coords=左上角の座標(“左からの距離”,”上からの距離”)右下角の座標(“左からの距離”,”上からの距離”)

circle– 円形領域　coords=（”左からの距離”,”上からの距離”,”円の半径”）

これで設定ができました。下の赤色の範囲にハイパーリンクが作られます。

shapeの他の属性

poly	default
多角形領域を定義	領域全体を定義

まとめ

<img src=”” usemap=”#imagemap”>
<map name=”imagemap”>
<area href=”#” shape=”” alt=”” coords=””>
</map>

大きくまとめると、mapの書き方は上か下にimg＋属性のusemap、mapの属性としてname、中にarea＋形のshape、大きさのcoords、属性のalt・・・

以上が、mapの書き方です。

他のタグよりも難しいですが、デザインを考えたとき、mapは必要になるものでしょう。

自分も、忘れずに覚えておきたいです。