[61] イメージマップ(リンク領域)を作ろう map要素・area要素

最終更新日:2019年02月18日  (初回投稿日:2013年11月28日)

今回から、他のコンテンツを埋め込むための要素 を使っていきます。
HTMLファイルの中に、画像・リンク領域・動画・音声などの、他のコンテンツを埋め込みます。HTMLファイルの中に、別のHTMLファイルを埋め込むことだってできます。
(初期の記事に登場した、画像を埋め込むための <img>要素 も、この仲間です)

今回の <map>要素・<area>要素は、埋め込むための要素とはちょっと違うけど、埋め込んだ画像の上に「リンク領域」を複数作るための要素です。

このように画像上に複数のリンク領域があるモノを「イメージマップ」(またはクリッカブルマップと言います。

イメージマップには「サーバーサイド・イメージマップ」「クライアントサイド・イメージマップ」があり、ブラウザに依存するのが「クライアントサイド・イメージマップ」
今回使うのはコレ。古くからあるモノなので、ほぼ全てのブラウザが対応しています。

ちなみに「サーバーサイド・イメージマップ」は、CGIなどのプログラムと一緒に使い、ブラウザに頼りません。ユーザがクリックした領域の座標を、サーバー上のプログラムが処理します。

「クライアントサイド・イメージマップ」は、<map>要素<area>要素を使い、画像の表示には、<img>要素を使います。

<object>要素の usemap属性は HTML5.1で廃止になり、 <object>要素でイメージマップは使えなくなりました。<object>要素は次回紹介します。

イメージマップで
使用する要素
<map> 〜 </map>
<area>(空要素。終了タグは不可)
画像の表示で
使用する要素
<img>(空要素。終了タグは不可)
<map>の属性 name:イメージマップの名前
グローバル属性
<area>の属性
一覧はこちら
href :リンク先のURL
alt :代替テキスト
shape :領域の形状(四角、円、多角形、画像全体)
coords :領域の座標を画像の左上を0としてピクセルで指定
rel :リンク先との関係を示すキーワード
media :リンク先の対象メディアタイプ
target :リンク先を表示するウィンドウ名またはキーワード
hreflang :リンク先の言語コード(jaとかenとか)
type :リンク先のMIMEタイプ(5.1で廃止扱い、5.2で復活)
download :href属性のファイルをダウンロードさせる
ping :ping送信するURL(W3C仕様では廃止扱い)
referrerpolicy :リンク先にアクセスする時のリファラーポリシーを指定
グローバル属性
<img>
で使う属性
usemap:<map>のname属性のイメージマップの名前を呼び出す

イメージマップを作ってみよう

W3C の仕様書のサンプル画像をそのまま使って説明します。
4つの図形にロールオーバーするとカーソルが変化し、リンク領域であることがわかります。
(リンク先はどれも、このページを指定しています)

これは画像を<img>要素で表示しています。
Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star. Red box. Green circle. Blue triangle. Yellow star.

HTMLはこちら。img要素でのイメージマップです。

<p>
  <img src="shapes.gif" width="525" height="150" usemap="#shapes" alt="">
  <map name="shapes">
    <area shape=rect coords="50,50,100,100"> <!-- (赤い四角の真ん中の穴)  -->
    <area shape=rect coords="25,25,125,125" href="#" alt="Red">
    <area shape=circle coords="200,75,50" href="#" alt="Green">
    <area shape=poly coords="325,25,262,125,388,125" href="#" alt="Blue">
    <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"  href="#" alt="Yellow">
  </map>
</p>

イメージマップは「<map><area></map>」のカタチで使います。
<map>の name属性で付けた名前を、<img>の usemap属性でで呼び出していますね。
そして各領域の座標は、<aera>内で指定しています。
*座標の指定は、下の「<area>要素での座標の指定のしかた」で解説します。

<area>要素での座標の指定のしかた

分かりやすいように、先ほどの画像ファイルにグリッドを付けてみました。
25ピクセルずつのグリッドです。

Red box. Green circle. Blue triangle. Yellow star.

<area shape=rect coords="50,50,100,100"> <!-- (赤い四角の真ん中の穴) -->
<area shape=rect coords="25,25,125,125" href="#" alt="">
<area shape=circle coords="200,75,50" href="#" alt="">
<area shape=poly coords="325,25,262,125,388,125" href="#" alt="">
<area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"  href="#" alt="">

領域のカタチは「shape属性」で指定。
座標は「coords="数値,数値,数値…"」という具合で、数値を「,(カンマ)」で区切ります。
座標の基準は、画像の左上を0(x=0, y=0)とします。

●四角形の指定
四角形は「shape="rect"」で指定します。(引用符「" "」は省略してもOK)
座標は「左上のx座標」,「左上のy座標」,「右下のx座標」,「右下のy座標」の順に書きます。
上の例では、四角形の左上の角が x=50ピクセル、y=50で、右下の角は x=125、y=125なので
「coords="25,25,125,125"」となります。

上の例では、href属性の無い<area>を先頭に書いています。これはリンクの無い領域。赤い四角の穴(小さい四角)の部分です。
<area shape=rect coords="50,50,100,100">
このように<area>でリンクの無い領域も指定できます。

●円の指定
円(正円)は「shape="circle"」で指定します。(引用符「" "」は省略してもOK)
座標は「中心点のx座標」,「中心点のy座標」,「半径」の順に書きます。
上の例では、中心点は x=200、y=75で、半径=50で、「coords="200,75,50"」となります。

●多角形の指定
四角形と正円以外は「多角形」で指定します。
多角形は「shape="poly"」で指定します。(引用符「" "」は省略してもOK)
座標は「角のx座標」,「角のy座標」の順で、全部の角をつなげて書いていきます。
角の座標を書く順番は、時計回りでも半時計回りでも、どっちでもOK
最初に書く角も、どこから始めても良いんです。
角を飛ばしたりしないで、一筆書きのようにつなげて書けばOKです。
上の三角形の例では、いちばん上の角(x=325、y=25)から半時計回りに角を書いていますので、
「coords="325,25,262,125,388,125"」となっています。

●defaultの指定
上の例にはありませんが「shape="default"」と指定すると、画像全体がリンク領域になります。

上のように、他のシェイプの領域を作って、「shape="default"」も併用すれば、
各シェイプのリンク領域と「それ以外の領域」のリンク領域を default で作ることができます。
(背景部分にもリンクが貼れるってことですね。)

イメージマップのロールオーバーでの変化は JavaScript を使います

イメージマップって、昔はよく使ったのですが、CSSを使った画像の集合のほうが便利なので、最近はあまり使わなくなりました。SEO的にも、イメージマップはあまりヨロシクナイそうです。

ただし、地図で各地域をクリックするようなメニューには、イメージマップで作るのが最適です。(参考サイト:「全国10万件以上のお医者さんガイド」

地図以外でも、集合写真で人の顔のロールオーバーで紹介文が出るメニューなど、イメージマップが適しているモノはいろいろあります。

ただ、イメージマップは CSSだけではロールオーバーの変化を実現できない
のが難点です。<area>要素は<a>と似てるけど、「area:hover」というセレクタを作っても何も起こりません。
ロールオーバーで見た目を変化させるには、JavaScript を使う必要があります。
(*先ほど例にあげた「お医者さんガイド」は jQuery を使っています。 jQuery を使う方法は後ほど紹介します)

まず、シンプルな JavaScript を使ってロールオーバーで変化させる方法を紹介します。
下の画像をロールオーバーしてください。丸、四角、三角の部分が変化します。

Lunch Set Drink Menu Sweets

ソースはこちら

<script>
OnMouse = new Array();    /*配列でsample0.gif 〜 sample3.gif までの4個の画像を選べるようにしています*/
    for(i = 0; i < 4; i++) {
    OnMouse[i] = new Image();
    OnMouse[i].src = "sample" + i + ".gif"
    }
function cImg(flag) {    /*関数cImg の「flag」の数字を変えれば、適切な画像を選べるようにしています*/
    var imgEle = document.getElementById('imgmap');    /*<img>要素に付けたIDで呼び出しています*/
    imgEle.src = OnMouse[flag].src;
    return false;
}
</script>

<p>
<img id="imgmap" src="sample0.gif" width="600" height="130" usemap="#shapes3">
<map name="shapes3">
<area shape=circle coords="165,53,50" href="#ttl_3" alt="Lunch Set"
 onMouseOver="cImg(1)" onMouseOut="cImg(0)" onClick="cImg(0)">
<area shape=rect coords="295,13,395,113" href="#ttl_3" alt="Drink Menu"
 onMouseOver="cImg(2)" onMouseOut="cImg(0)" onClick="cImg(0)">
<area shape=poly coords="495,114,568,27,455,7" href="#ttl_3" alt="Sweets"
 onMouseOver="cImg(3)" onMouseOut="cImg(0)" onClick="cImg(0)">
</map>
</p>

このサンプルは、4つの画像を用意しています。
平常時の sample0.gif と、ロールオーバー時の3つのgif画像です。
sample0.gif(平常時)
sample1.gif(オレンジの円を強調)
sample2.gif(緑の四角形を強調)
sample3.gif(ブルーの三角形を強調)

この方法だと、リンクの数だけ画像を用意しなければなりません。
上の例のように少なければイイけど、けっこうリンク数がある時には何十枚も用意するハメに。
そんなときは jQuery のプラグイン「ImageMapster」がラク。↓

jQuery の「ImageMapster」を使ってみよう

今回使用するプラグイン「ImageMapster」は、James Treworgy氏作で、MIT License (再配布時はの著作権表示+無保証が条件)です。

この「ImageMapster」で、作ってみたのがコチラ。
(クリックで別ウィンドウで開きます)

何といっても、プラグインで自動的にリンク領域を切り抜いてくれるので、画像を最低2枚(平常時のとロールオーバー時のと)用意するだけなのが強みです。

設定も、<area>にキーワードを決めてやるだけなので、とっても簡単です。(使い方はサンプル上に詳細)

<area>の属性一覧

最後に、<area>要素の属性をまとめました。

href="URL"
リンク先のURL。
alt="代替テキスト"
代替のテキスト。イメージマップが表示されない場合に必要。
当然のことですが、<area>要素に「href属性」がない場合、領域は選択できないので「alt属性」は省略する必要があります(HTML5.2仕様
shape="rect"(または「circle」「poly」「default」)
rect は四角形、circle は円、poly は多角形(polyはpolygonの略)、
default は、画像全体(rect, circle, polyなどで指定した領域以外の場所)
coords="領域の座標(画像の左上を0としてピクセルで指定)"
rect の場合、四角形の「左上のx」,「左上のy」,「右下のx」,「右下のy」
circle の場合、円の「中心のx」,「中心のy」,「半径」
poly の場合、「最初の角のx」,「そのy」, 以降、すべての角のxy座標
default は、coords属性指定不可
<area shape=rect coords="25,25,125,125" href="rect.html" alt="四角">
<area shape=circle coords="200,75,50" href="circle.html" alt="円">
<area shape=poly coords="325,25,262,125,388,125" href="poly.html" alt="三角">
rel="関係を示すキーワード"
このHTML文書とリンク先ファイルの関係(relation)を示すキーワードを指定。
rel属性のキーワードはこちら↓
  • alternate =代替え文書
    ( hreflang属性との併用で翻訳版を、media属性との併用で別メディア版を示す)
  • search =検索ページを示す
  • help =ヘルプ
  • prev =前へ
  • next =次へ
  • prefetch =リンク先を事前に読み込む
  • bookmark =パーマリンク
  • tag =タグ
  • license =著作権
  • author =作者
<area shape=rect coords="25,25,125,125" href="rect.html" alt="四角" 
   rel="alternate" hreflang="en">English version</a>
media="リンク先を表示する時のメディア(機器)タイプ"
初期値は all。「 , (カンマ)」で区切って複数指定可能。
メディアタイプはこちら↓
  • all =すべての機器
  • screen =パソコンのスクリーン画面
  • tv =テレビ画面
  • handheld =携帯電話などの端末
  • print =プリンタ
  • projection =プロジェクタ
  • tty =文字幅が固定された機器(テレタイプなど)
  • braille =点字ディスプレイなど
  • aural =音声出力機器
<area shape=rect coords="25,25,125,125" href="rect.html" alt="四角" 
   media="handheld">
target="_blank"(または「_self 」「_parent 」「_top」「ウィンドウ(フレーム)名」)
リンク先ファイルを表示するウィンドウ(またはフレーム)を指定します。
  • _blank :新規の(別の)ウィンドウに表示します
  • _self: 現在の(同じ)ウィンドウ(フレーム)に表示
  • _parent:親になるウィンドウ(フレーム)に表示
  • _top:フレームを解除してウィンドウ全体に表示
  • ウィンドウ(フレーム)名:その名前のウィンドウ(フレーム)に表示
hreflang="言語コード"
リンク先ファイルの言語コードを指定。
ja (日本語), en (英語), es (スペイン語), fr (フランス語), ko (韓国語), zh (中国語) など。
その他は「ISO 639:言語名コード一覧」参照に。
type="MIMEタイプ"
リンク先ファイルのMIMEタイプを指定。text/html(HTML), application/pdf(PDF)など。「ちょっとメモ:MIMEタイプ」を参照に。
*<area>要素の type属性は、HTML5.1 で一度廃止扱いになりましたが、5.2 で再び仕様に載っています
download または download="ファイル名"
リンク先ファイルをダウンロードさせる。同オリジンのファイルのみダウンロード可。
ダウンロードさせるだけなら値は省略でOK。ダウンロードさせたファイル名を変更する時はそのファイル名を値にする。
<area shape=rect coords="25,25,125,125" href="dl_image1.png" alt="ダウンロード1" 
  download="download-image-1.png">
ping="pingを送信するURL(半角スペース区切りで複数可)
ping(ピン)を送信する pingサーバ(pingサイト)のURLを指定。
半角スペースで区切ると複数のURLを指定できる。
<area shape=rect coords="25,25,125,125" href="rect.html" alt="四角" 
  ping="http://blogsearch.google.com/ping http://r.hatena.ne.jp/rpc">
*<area>要素の ping属性は、W3Cの仕様では廃止扱いですが、WHATWGの仕様ではイキてます。
referrerpolicy="キーワード"
リンク先にアクセスする時のリファラーポリシーを指定。 リファラーとはウェブ上のページにリンクしているページのアドレス。コレを参照することで「どこからリクエストが来たか」わかる。
リファラーポリシーとは、このリファラーを送信するかどうかの指定。
referrerpolicy="no-referrer-when-downgrade"がブラウザデフォルトで「httpsからhttpにはリファラーを送らない」
その他のキーワードはこちら→Referrer Policy (Editor’s Draft, 20 April 2017) W3C
このほかグローバル属性も使います
id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

次回は、外部コンテンツをHTML上に埋め込む要素、<object>です。
<object>は、画像・動画・音声・別のHTMLやPDFなどの、
いろいろな種類のファイルを埋め込むことができます。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
11 | 2023/12 | 01
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.