プロのクリエイターがホームページの作成や運用ノウハウについて無料公開!

ホームページTIPS
facebook twitter mail

このサイトでは、ホームページ制作運用に関する各種の情報を無料公開しています。
内容についてのご意見・ご指摘については、フォームからお知らせいただけば、適宜変更させていただきます。

html.cssに関するTips

2018.4.23更新

1枚の画像に複数のリンクエリアを設定するイメージマップの作り方

Attention!

イメージマップ(クイッカブルマップ)とは、1枚の画像の中に複数のリンクエリアが配置された画像の事です。javascriptを使用せず、htmlだけで簡単に埋め込むことができます。IE6などの古いブラウザにも表示対応しています。

1まずは「img要素」で画像を掲載します。(パラメーターにはマップ名を指定します)
<img src="hokkaido.jpg" usemap="#Map" width="600" height="600" alt="北海道">

 

 

まずはimg要素で上記のような画像を表示させ、パラメーターには「usemap=#Map」という属性を追加します。

#Mapの部分は任意の文字で設定してください。「#」記号で設定することが必要です。

「width=”600″ height=”600″ alt=”北海道”」の部分は、通常、画像表示の際によく使われるパラメータですので、

画像に合わせて自由に設定してください。

2map要素と、area要素でリンクエリアを設定します。
<map name="Map">
   <area shape="rect" coords="159,136,184,187" href="bear.html" alt="熊">
   <area shape="poly" coords="170,97,182,107,182,120,159,120,159,107" href="octopus.html" alt="たこ">
   <area shape="circle" coords="60,30,9" href="fox.html" alt="きつね">
</map>

 

 

上記のように「map要素」を使って、name属性を先ほどのimg要素のusemapパラメーター「Map」に指定します。

これでイメージマップを指定しました。

リンクエリアは「area要素」を使って必要な数だけ設定していきます。

 

< shape属性について >

shape属性で「リンクエリアの形状」を四角形・多角形・円形のいずれかで指定できます。

● shape=”rect” は、四角形でエリア範囲を指定します。

● shape=”poly” は、多角形でエリア範囲を指定します。

● shape=”circle” は、円形でエリア範囲を指定します。

 

<coords属性について>

coords属性を使ってリンクエリアを数値で指定します。

●リンクエリアを四角形にする場合、「左上の座標(X,Y) , 右下の座標(X,Y)」で記載します。

●リンクエリアを多角形にする場合、「すべての点の座標(X,Y)を必要なだけ順番に指定」します。

●リンクエリアを円形にする場合、「中心の座標(X,Y) , 半径」を指定します。

 

< href属性について >

それぞれのリンク先のページを指定します。

3coordsの数値はツールを使って設定すると便利です。

							
							

いちいち座標の数値を計測するのは、はっきり言って面倒臭くてやってられません。

でもご安心を!

HTMLイメージマップジェネレーターを使えば、リンクエリアの座標を直感的に描く事で、

コードが自動的に生成されるのでとても便利です。

下記のURLで使えます。

https://labs.d-s-b.jp/ImagemapGenerator/

 

 

 

以上でイメージマップの設定は完了です。とても簡単ですね。

トップへ