イメージマップとは、1つの画像内に複数のリンク先を設定できる機能のことです。img要素とmap要素、area要素の3つの要素を組み合わせることで、イメージマップを設定することができます。
今回は、イメージマップの作り方についてまとめたいと思います。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
イメージマップとは、1つの画像上にリンク領域が複数あるもののことです。
画像を組み込んだ後に、各リンク領域を作っていきます。
img要素を使って画像を表示させ、map要素とarea要素を使ってイメージマップを作成します。
map要素の属性 | name属性 | イメージマップの名前 |
---|---|---|
グローバル属性 | id属性、class属性、title属性、style属性など | |
area要素の属性 | href属性 | リンク先のURL |
alt属性 | 代替テキスト | |
shape属性 | 領域の形状(四角、円、多角形、画像全体) | |
coords属性 | 領域の座標を画像の左上を0としてピクセルで指定 | |
ping属性 | ping送信するURL(半角スペース区切りで複数可) | |
rel属性 | リンク先との関係を示すキーワード | |
media属性 | リンク先の対象メディアタイプ | |
target属性 | リンク先を表示するウィンドウ名またはキーワード | |
hreflang属性 | リンク先の言語コード(ja、enなど) | |
type属性 | リンク先のMIMEタイプ | |
グローバル属性 | id属性、class属性、title属性、style属性など | |
img要素の属性 | usemap属性 | map要素のイメージマップ名を呼び出す |
次の画像内の3つの図形にロールオーバーすると、カーソルが変化して、リンク領域であることがわかります。
上の表示に対するhtmlコードは、以下の通りです。
<img src="photo.jpg" width="525" height="150" usemap="#shapes" />
<map name="shapes">
<area shape="circle" coords="107,75,55" href="#" alt="円" />
<area shape="poly" coords="209,132,262,20,314,132" href="#" alt="三角形" />
<area shape="rect" coords="371,28,463,123" href="#" alt="四角形" />
</map>
イメージマップは、以下の手順で作成します。
・イメージマップに使用する画像を用意して、それをimg要素で読み込みます。
・map要素のname属性で、任意のマップ名(半角英数字)を指定します。
・img要素のusemap属性で、map要素で指定したマップ名をハッシュ( # )に続けて記述します。(この指定によって、画像とイメージマップの設定が関連付けられます。)
・map要素の中に、必要な数だけarea要素を設置します。
・各area要素に、shape属性(リンク領域の形状)、coords属性(リンク領域の座標)、href属性(リンク先のURI)、alt属性(代替テキスト)の指定を行います。
area要素のcoords属性で、リンク領域の座標を指定します。
この指定は、イメージマップ特有の重要な指定です。
リンク領域の形状により、座標の指定方法は異なります。
リンク領域の形状はshape属性で指定します。
座標はcoords=”数値,数値,数値…”のように、数値をカンマ(,)で区切って指定します。
座標は、画像の左上が0(x=0, y=0)となります。
●四角形の指定
四角形は「shape=”rect”」で指定します。
座標は「(左上のx座標),(左上のy座標),(右下のx座標),(右下のy座標)」の順に指定します。
上の例では、四角形の左上の角が x=371、y=28で、右下の角は x=463、y=123となったので、「coords=”371,28,463,123″」と指定しています。
●円の指定
円は「shape=”circle”」で指定します。
座標は「(中心点のx座標),(中心点のy座標),(半径)」の順に指定します。
上の例では、中心点は x=107、y=75で、半径=55となったので、「coords=”107,75,55″」と指定しています。
●多角形の指定
四角形と正円以外は多角形となります。
多角形は「shape=”poly”」で指定します。
座標は「(角のx座標),(角のy座標)」の順で、全部の角を指定していきます。
角の座標を書く順番は、時計回りでも半時計回りでも、どこから始めても大丈夫です。
上の三角形の例では、左の角から時計回りに角を指定しており、「coords=”209,132,262,20,314,132″」となりました。
●defaultの指定
上の例にはありませんが「shape=”default”」と指定すると、画像全体がリンク領域となります。
個別のリンク領域と「shape=”default”」を併用すると、各形状のリンク領域と共に、それ以外の領域(背景)のリンク領域も作ることができます。
座標は、画像編集ソフト等で割り出すことができます。
ここでは、Windowsのペイントで座標を調べてみます。
以下は、ペイントを使用したときの例です。調べたい位置にカーソルを合わせると、右下にその位置の座標が表示されます。
三角形の一番上の点にカーソルを合わせた際に、左下に座標(x,y)が「262,20px」と表示されました。
area要素の属性は、次の通りです。
href=”URL” |
---|
リンク先のURLを指定します。 |
alt=”代替テキスト” |
代替のテキストを指定します。 |
shape=”rect” または ”circle” または ”poly” または ”default” |
リンク領域の形状を指定します。 rect は四角形、circle は円、poly は多角形、default は、画像全体(rect, circle, polyなどで指定した領域以外の場所) |
coords=”リンク領域の座標(画像の左上を(0,0)としてピクセルで指定)” |
リンク領域の座標を指定します。
rect の場合、四角形の(左上のx, 左上のy, 右下のx, 右下のy) |
ping=”pingを送信するURL” |
ping(ピン)を送信するpingサーバ(pingサイト)のURLを指定します。 半角スペースで区切ると複数のURLを指定することができます。 |
rel=”関係を示すキーワード” |
このHTML文書とリンク先ファイルの関係(relation)を示すキーワードを指定します。
rel属性のキーワード |
media=”リンク先を表示する時のメディアタイプ” |
リンク先を表示する時のメディアタイプ(機器)を指定します。 初期値は all。 カンマ(,)で区切って複数指定することができます。 メディアタイプ |
target=”_blank” または ”_self” または ”_parent” または ”_top” または ”フレーム名” |
リンク先ファイルを表示するウィンドウ(またはフレーム)を指定します。
_blank :新規の(別の)ウィンドウに表示 |
hreflang=”言語コード” |
リンク先ファイルの言語コードを指定します。 ja(日本語)、en(英語)、es(スペイン語)、fr(フランス語)、ko(韓国語)、zh(中国語)など |
type=”MIMEタイプ” |
リンク先ファイルのMIMEタイプを指定します。 text/html(HTML)、application/pdf(PDF)など |
この他に、id属性、class属性、title属性、style属性などのグローバル属性も使います。
INTERNOUS,inc. All rights reserved.