WEB Tips デザイン・コーディング

イメージマップ(クリッカブルマップ)の作り方とまとめ

2016-04-20

本記事にはプロモーションが含まれています。

イメージマップ(クリッカブルマップ)の作り方とまとめ

イメージマップ(クリッカブルマップ)は画像の一部分をリンク設定できる機能です。

昔からある機能でFireworksやDreamweaverでは簡単に作成することができます。

久々にこのイメージマップを使う機会があったので改めて勉強してみました。

イメージマップ(クリッカブルマップ)の構成

イメージマップ(クリッカブルマップ)の構成はimg要素、map要素,area要素 の三つだけです。

img要素は、通常の画像を表示するのと同様で
<img src="images/imagemap.png">
これに、イメージマップ属性を追加します。

<img src="images/imagemap.png" usemap="#Map">

usemap=""
イメージマップの名前を指定,
複数イメージマップがある場合は重複しない名前、
アンカーのように「#」をつけます。

この後、画像のどの部分にイメージマップ(リンク)を付けるかを指定します。

<map name="Map">
          <area shape="rect" coords="101,234,147,277" href="#" target="_blank" alt="" />
          <area shape="rect" coords="19,240,65,285" href="#" target="_blank" alt="" />
          <area shape="rect" coords="305,103,354,140" href="#" target="_blank" alt="" />
</map>

map要素にはイメージマップの名前を指定

img要素に指定した名前です

area要素は、どの部分にリンクするかの形状や座標、リンク先を指定

<area shape="形状" coords="座標" href="リンク先" alt="代替文字">

shape

リンクの形を指定できます。

  • rect    四角形
  • poly  多角形
  • circle 円

■リンクの形が四角の場合[rect]

<area shape="rect" coords="101,234,147,277" href="#" target="_blank" alt="" />

shape = "rect"

coords="101,234,147,277"

左上の座標XY(101,234)と右下の座標XY(147,277)を指定します

■リンクの形が多角形の場合[poly]

<area shape="poly" coords="79,158,80,147,81,146,132,127,149,158,128,187,86,187,79,157" href="#">

shape = "poly"

coords = "79,158,80,147,81,146,132,127,149,158,128,187,86,187,79,157"

すべての点の座標XY指定します。
上記の場合は、八角形のリンクになります。

■リンクの形が円形の場合[circle]

<area shape="circle" coords="187,58,27" href="#">

shape = "circle"

coords="187,58,27"

円の中心の座標XY(187,58)と半径(27px)を指定します

画像の座標を調べるのが面倒な場合は、ジェネレータでソースを生成!

いまどきは便利なものを作ってくれる人がいて本当にありがたいです。

Imagemap が作成できるジェネレーター
日本人の方が作られているので日本語です。

HTML Imagemap Generator
http://labs.d-s-b.jp/ImagemapGenerator/

海外製のイメージマップジェネレータです

HTML Map Creator
http://www.html-map.com/

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額643円 55%OFF ドメイン2個無料 - 2024年4月5日(金)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-