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

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

まず今回は、組み込んだ画像の上に「リンク領域」を複数作ります。
このように、画像上に複数のリンク領域があるモノを「イメージマップ」
(またはクリッカブルマップ)と言います。

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

ちなみに「サーバーサイド・イメージマップ」は、CGIなどのプログラムと一緒に使い、ブラウザに頼りません。
ユーザがクリックした領域の座標を、サーバー上のプログラムが処理します。
このように ↓「ismap属性」を指定した<img>要素を、<a>要素でプログラムにリンクさせます。
<a href="○○.cgi"><img src="●●●.gif" width="300" height="150" ismap="ismap"></a>

「クライアントサイド・イメージマップ」には、<map>要素<area>要素を使い、
画像の表示には、<img>要素や<object>要素を使います。(<object>要素は次回紹介する予定)

イメージマップで
使用する要素
<map> 〜 </map>
<area>(空要素。終了タグは不可)
画像の表示で
使用する要素
<img>(空要素。終了タグは不可)
<object> 〜 </object>
<map>の属性 name:イメージマップの名前
グローバル属性
<area>の属性
一覧はこちら
href :リンク先のURL
alt :代替テキスト
shape :領域の形状(四角、円、多角形、画像全体)
coords :領域の座標を画像の左上を0としてピクセルで指定
ping  new :ping送信するURL(半角スペース区切りで複数可)
rel  new :リンク先との関係を示すキーワード
media  new :リンク先の対象メディアタイプ
target :リンク先を表示するウィンドウ名またはキーワード
hreflang :リンク先の言語コード(jaとかenとか)
type :リンク先のMIMEタイプ
グローバル属性
<img>や<object>
で使う属性
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.

<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>要素での座標の指定のしかた」で解説します。

<object>要素でも <img>と同じようにイメージマップを作れます。
(<object>要素に関しては次回詳細)

*Chrome, Safariは <object>要素によるイメージマップは表示できないようです。
IE, Firefox, Operaでご覧ください。

<object data="shapes.gif" type="image/gif" width="525" height="150" usemap="#shapes">
</object>
<!--(イメージマップは上のソースの「#shapes」を流用)-->

<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的にも、イメージマップはあまりヨロシクナイそうです。

ただし、地図で各地域をクリックするようなメニューには、Flash以外なら、このイメージマップで作るのが最適です。
(左は参考サイト:「全国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」を使ってみよう

「jQuery」とは、オープンソースのJavaScriptライブラリ(Ajaxともいわれる)の一種。
その「jQuery」を元にしたプラグインは、JavaScript だけでなく CSSなども組み合わせていて、
ウェブサイトに手軽に動作や機能を加えることができる、こちらもオープンソースです。
(ただし、各プラグイン・ライブラリにはライセンスが明記されていますので要確認)

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

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

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

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

<area>の属性一覧

<area>要素の属性をまとめました。

href="URL"
リンク先のURL。
alt="代替テキスト"
代替のテキスト。イメージマップが表示されない場合に必要。
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="三角">
ping="pingを送信するURL(半角スペース区切りで複数可)"  new
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">
rel="関係を示すキーワード"  new
この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="リンク先を表示する時のメディア(機器)タイプ"  new
初期値は 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タイプ」を参照に。
このほかグローバル属性も使います
id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
02 | 2017/03 | 03
- - - 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
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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