img要素で埋め込んだ画像にリンクを設定するときは、その画像全体にリンクを設定することが多いと思いますが、クリッカブルマップといって、画像をいくつかの領域に分けて、各領域ごとにリンク先を指定できる仕組みもあります。
画像の埋め込みに関しては『img要素(イメージタグ)で画像を埋め込む【HTML】』で書いています。
map要素
クリッカブルマップを表すときに使うのがmap要素。
area要素と組み合わせて使うことでクリッカブルマップを表すことができます。
name（ネーム）
map要素ではクリッカブルマップに名前をつけるname属性の指定が必要です。
name属性で指定した名前をimg要素やobject要素のusemap属性で指定することで、関連づけることができます。
クリッカブルマップの名前は他のmap要素でつけた名前と同じになってはいけません。
また、id属性を指定する場合には、name属性の値と同じ値をid属性にも指定する必要があります。
area要素
クリッカブルマップを表すのにmap要素と組み合わせて使うarea要素。
area要素はクリッカブルマップのリンクを設定する各領域を指定する役割があります。
shape（シェープ）
shape属性は画像内のリンクを設定する領域の形状を決める属性です。
指定できるのは以下のようなものです。
- circle（円形）
- poly（多角形）
- rect（長方形）
- default（画像全体）
coords（コーディネート）
画像内のリンクを設定する領域の座標を指定するのにcoords属性を使います。
座標はよく数学などで出てきますが、画像の左上を基準点としてX軸とY軸で表します。
指定しないといけない座標の数は以下の通りです。
- circleは3つ（中心点のX座標・Y座標、半径）
- polyは6つ以上の偶数個の整数
- rectは4つの整数（左上のX座標・Y座標、右下のX座標・Y座標）
- defaultは属性値の指定不可
href（ハイパー・リファレンス）
a要素と同じで、href属性で移動先をURLで指定してリンクを設定します。
仮にhref属性を指定しなかったら、その領域はクリックできないので気をつけてください。
そうなると他の属性も省略する必要があります。
alt（オルタナティブ）
href属性を指定するならalt属性も必須です。
alt属性はURLに関する代替テキストを指定するもので、たとえば四角形の領域にリンクを設定したら「alt=”四角形”」みたいな感じで記述すればいいと思います。
href属性によって同じURLが指定されているarea要素が、map要素内に複数ある場合は、1つのarea要素でalt属性が指定されていれば、他は省略してもかまいません。
target（ターゲット）
target属性はリンクの表示先を指定できる属性です。
たとえば、リンク先のページを新しいウィンドウで表示させたいときやiframe要素を対象リンクとして展開したいときなんかに使います。
以下のような値を指定できます。
| 属性値 | 意味 |
|---|---|
| _blank | リンク先を新しいウィンドウ（タブ）で表示 |
| _parent | 1つ上位のブラウジングコンテキストで表示 |
| _self | 現在のブラウジングコンテキストで表示 |
| _top | 最上位のブラウジングコンテキストで表示 |
関連記事
『ブラウジングコンテキストとはWebページを表示する環境のこと』
rel（リレーション）
rel属性はリンク先のソースの位置づけを表します。
以下のような値を指定でき、半角スペースで区切ることで複数の値を指定することも可能です。
| 属性値 | 意味 |
|---|---|
| alternate | 別の言語や別フォーマット版などの代替文書 |
| author | 著者情報 |
| bookmark | 文書の固定リンク |
| help | ヘルプへのリンク |
| license | ライセンス文書 |
| next | 連続している文書の次の文書 |
| prev | 連続している文書の前の文書 |
| nofollow | 重要ではないリンク |
| noreferrer | ユーザがリンクを移動する際にリファラを送信しない |
| prefetch | リンク先のリソースをあらかじめキャッシュするように指定 | search | 検索機能 |
| tag | 文書に指定されたタグのページ |
media（メディア）
media属性はリンク先の文書や読み込む外部リソースが、どのメディアに適用するのかを指定する属性です。
デバイス別にCSSを分けたりするときに使う技術のことをメディア・クエリといい、属性の値はメディア・クエリである必要があります。
メディアには以下のようなものがあります。
| 属性値 | 意味 |
|---|---|
| all | すべてのデバイス |
| aural | 音声合成装置 |
| braille | 点字用ディスプレイ |
| embossed | 点字用プリンタ |
| プリンタ | |
| handheld | モバイルデバイス |
| projection | プロジェクター |
| screen | ディスプレイ |
| tty | 文字幅が固定のデバイス |
| tv | テレビ |
hreflang（ハイパー・リファレンス・ランゲージ）
hreflang属性は、リンク先ページのどのような言語で記述されているかを表します。
たとえば以下のような値で言語を指定できます。
| 値 | 言語 |
|---|---|
| ja | 日本語 |
| en | 英語 |
| eu-au | オーストラリアにおける英語 |
| de | ドイツ語 |
type（タイプ）
type属性はリンク先のMIMEタイプを指定する属性です。
MIMEタイプというのは、テキストや画像、動画、音声データなどのファイル形式を示す識別子のこと。
たとえば以下のようなものがあります。
| MIMEタイプ | ファイル形式 |
|---|---|
| text/plain | プレーンテキスト |
| text/html | HTMLファイル |
| text/css | CSSファイル |
| text/javascript | JavaScriptファイル |
| img/jpeg | Jpegファイル |
| img/png | PNGファイル |
| img/gif | GIFファイル |
| video/mp4 | MP4ファイル |
| video/ogg | Oggファイル |
| audio/mp3 | MP3ファイル |
| audio/mp4 | MP4ファイル |
| audio/wav | WAVEファイル |
| audio/aac | AACファイル |
| application/shockwave-flash | Flashファイル |
| application/pdf | PDFファイル |
クリッカブルマップまとめ
クリッカブルマップはあまり使ったことがないですが、地図でリンクを分けたり、いろいろ便利そう。
必要な要素はimg要素、map要素、area要素です。これらの要素にこの記事で紹介した属性で各値を指定することでクリッカブルマップを表すことができます。
ざっくりした説明ですが以下が記述例です。
<map name=”マップ名”>
<area shape=”形状” coords=”座標” href=”リンク先のURL”>
</map>
クリッカブルマップを表すには画像を埋め込むimgタグに続いて、map要素area要素を記述して領域を分けてリンクを設定します。
[…] 関連記事 『map要素とarea要素でクリッカブルマップを表す【HTML】』 […]