画像内に複数リンクを設定する(イメージマップ)を作る

スポンサーリンク
Pocket

 

1つの画像内部に複数個のリンクを設定できるイメージマップ(クリッカブルマップ)の簡単な作り方を紹介します。

◆属性値説明src=""URIイメージマップに使用する画像のURIを指定

◆alt=""テキスト代替テキストを指定

◆usemap=""#マップ名ハッシュ( # )に続けてマップ名を指定

img要素、map要素、area要素、この3つの要素を組み合わせることで、イメージマップを設定することができます。

※イメージマップとは、1つの画像内に複数のリンク先を設定できる機能のことです。

img要素:文書内に画像を埋め込む要素です。

map要素:クライアントサイド・イメージマップを定義する要素です。

area要素:クライアントサイド・イメージマップのリンク領域を設定する要素です。

 

 

サンプルコード

イメージマップ作成の流れ

イメージマップは、画像を埋め込むimg要素、マップを定義するmap要素、リンク領域を設定するarea要素、この3種類の要素で構成されています。

<img src=”” alt=”” usemap=”#”>

  1. まず、イメージマップに使用する画像を用意して、それをimg要素で読み込みます。
  2. map要素に name="" を追加して、任意のマップ名(半角英数字)を指定します。
  3. img要素に usemap="" を追加して、2. で指定したマップ名をハッシュ( # )に続けて記述します。(このマップ名によって、画像とリンクの設定が関連付けられることになります)

 <map name=””></map> <area alt=””>

  1. map要素の中に、area要素を必要な数だけ配置します。
  2. area要素に、shape=""(リンク領域の形状)、coords=""(リンク領域の座標)、href=""(リンク先のURI)、alt=""(代替テキスト)を追加して、それぞれの設定を行います。

img要素の設定

 

属性 説明
src="" URI イメージマップに使用する画像のURIを指定
alt="" テキスト 代替テキストを指定
usemap="" #マップ名 ハッシュ( # )に続けてマップ名を指定

※img要素には、src属性とalt属性が必須となります。

map要素の設定

 

属性 説明
name="" マップ名 任意のマップ名を指定

※map要素にはname属性が必須となります。

このname属性で指定したマップ名を、img要素usemap属性内に記述します。

area要素の設定

 

属性 説明
shape="" リンク領域の形状を指定
rect 四角形 (初期値)
circle 円形
poly 多角形
default 画像全体 (領域が設定されていないエリア)
default の指定は、IEでは対応していないようです。
coords="" リンク領域の座標をピクセル数で指定
座標(X,Y) rect の場合 … 左上の角と右下の角の座標を指定 (X,Y,X,Y)
circle の場合 … 中心点の座標と半径を指定 (X,Y,半径)
poly の場合 … すべての角の座標を指定 (X,Y,X,Y …)
default の場合 … coords属性の指定は不要
href="" URI リンク先のURIを指定
nohref 値は不要 その領域にリンクを設定しない (href属性の代わりに使用)
alt="" テキスト 代替テキストを指定

 

※area要素にはalt属性が必須となります。

shape="" に default が指定されたarea要素は、他のarea要素よりも後に配置する必要があります。(領域が重なっている場合は、先に指定した領域が優先されます)

座標の指定方法

リンク領域の形状により、座標の指定方法は異なります。

例えば、上記の画像を使用した場合は、座標の指定内容は以下のようになります。

※座標の指定は、カンマ( , )で区切って記述していきます。

1、rect(四角形)の場合 … 左上の角と右下の角の座標を指定 (X,Y,X,Y)

2、circleの場合 … 中心点の座標と半径を指定 (X,Y,半径)

3、polyの場合 … すべての角の座標を指定 (X,Y,X,Y …)

座標の割り出し方

画像を編集できるソフトがあれば、簡単に割り出すことができます。Windowsの場合は、付属しているペイントでも座標を調べることが可能です。

以下は、ペイントを使用したときの例です。調べたい位置にカーソルを合わせると、右下にその位置の座標が表示されます。

 

➀表示例コードを入力(ビジュアル画面でなくてテキスト画面でで入力します)

 

➁画像が表示されます

※リンク領域については、座標修正が必要かも・・・・。

 

スポンサーリンク

コメントを残す

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