[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>要素で表示しています。
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ピクセルずつのグリッドです。
<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 を使ってロールオーバーで変化させる方法を紹介します。
下の画像をロールオーバーしてください。丸、四角、三角の部分が変化します。
ソースはこちら
<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>
- alternate =代替え文書
- 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などの、
いろいろな種類のファイルを埋め込むことができます。
- 関連記事
-
- [68] 動画や音声に字幕やキャプションを表示しよう track要素
- [67]「mediagroup属性」でメディア要素を同期させよう
- [66] 音声をプラグイン無しで組み込もう audio要素・source要素
- [65] 動画をプラグイン無しで組み込もう video要素・source要素
- [64] プラグインで再生されるコンテンツを組み込もう embed要素
- [63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素
- [62] 外部コンテンツを組み込もう object要素・param要素
- [61] イメージマップ(リンク領域)を作ろう map要素・area要素
- (ちょっとメモ)属性の「引用符」や「値」の省略について
- (ちょっとメモ)HTML5 での 省略可能なタグについて
- [60] フォームを美しく整えよう(CSS使用)
- [59] フォームの属性 逆引き一覧 (どの属性がどの部品に使えるか)
- [58] 暗号鍵を作ろう keygen要素(HTML5.2で削除されました)
- [57] プログレスバー(進捗状況)を出そう progress要素
- [56] 数量や割合のゲージを表示しよう meter要素
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク