「駑馬十駕」 IT系情報を中心に調べた事をコツコツ綴っています。

画像内に複数のリンクを設置する機能の事を「イメージマップ」と呼びます。
このイメージマップを設置するには<img>要素、<map>要素、<area>要素の3つの要素を組み合わせて実現する事が出来ます。

HTMLソース

    <img>要素

    <img>要素で重要になるのが「usemap」属性です。usemap属性には実際のイメージと紐付ける<map>要素のハッシュ名参照(先頭#指定)で指定します。

    <map>要素

    <map>要素ではname属性だけを指定し、<img>要素のusemap属性に指定した値(#は除く)を指定します。

    <area>要素

  • <area>要素は<map>要素内に定義します。
  • href,alt属性でイメージマップのリンク先を指定し、shape,coords属性で画像の形状と座標を指定します。shape属性はrect【四角形】、circle【円形】、poly【多角形】、default【初期値】の4パターン指定出来ます。defaultは他の<area>要素よりも最後に指定します。
  • coords属性にはcssピクセル形式で指定します。
  • shape属性値形状coords属性値
    rect四角形(正方形、長方形のみ)四角形の左上隅の座標(x,y)と右下隅の座標(x,y)を指定します。
    circle円(楕円形は不可)円の中心の座標(x,y)と半径の長さを指定します。
    poly多角形(三角形、平行四辺形、台形、五角形、星形etc...)形状となる全ての角の座標(x,y)を指定します。
    default画像全体※指定しません

実行サンプル

    imagemap_sample1

    基本図形1 基本図形2 基本図形3 全体

Ads by Google

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">