「陽だまり」ホームページ > パソコンお助け情報INDEX > Webページ作成 INDEX

画像の特定のところにリンクをつける

パソコンお助け情報

ホームページ作成

困った 地図などの画像の複数の特定のところをクリックしたら、それぞれ別のページを開くようにしたい。

解決した サーバーの処理を要しないブラウザ側でHTMLのタグで処理できる、クライアント・イメージ・マップについて説明します。

元になる画像ファイルを表示するHTMLファイルと、リンクで呼び出されるページが複数用意されているものとします。対応しているソフトを使えば簡単と思いますが、ここではタグで説明します。

元になる画像ファイルのリンクを設定する範囲の座標を調べておきます。

画像処理ソフト(例えばフリーソフトのPixiaなど)ではマウスポインタの位置座標を表示出来るものがあります。元になる画像ファイルを画像処理ソフトで開きリンクを設定する箇所にマウスポインタを置くと、画像の左上からの座標をX軸(横)とY軸(縦)をピクセルで表示しますので記録しておきます。

範囲の形shape属性の値調べる座標などcoords属性の値の入力方法
矩形rect左上の角と右下の角の座標X1,Y1,X2,Y2
円形circle中心の座標と半径の長さX1,Y1,R(半径)
多角形polyそれぞれの角の座標X1,Y1,X2,Y2,X3,Y3,・・・

元になる画像ファイルを表示するHTMLファイルに次のように<img>を修正入力します。

<div>
<img src="XXXX.jpg" alt="aaaaa" height="nnn" width="mmm" usemap="#YYYYY">
<map name="YYYYY">
<area href="zzzzz.html" alt="bbbbb" shape="rect" coords="X1,Y1,X2,Y2">
</map>
</div>

タグ属性属性の値説   明
<img>srcXXXX.jpg元の画像のファイル名
<img>altaaaaa元の画像の代替文字
<img>heightnnn元の画像の高さ(ピクセル)
<img>widthmmm元の画像の幅(ピクセル)
<img>usemap#YYYYYYYYYYでクライアントクリッカブルマップのマップ名を設定する。
<map> nameYYYYYimgタグで設定したマップ名
<area>hrefzzzzz.htmlリンク先のページのURL
<area>altbbbbbリンクを設定した範囲の代替え文字
<area>shaperectリンクを設定した範囲の形(この場合は矩形)
<area>coordsX1,Y1,X2,Y2リンクを設定した範囲の座標(X1,Y1は左上、X2,Y2は右下の座標)

<area>要素は<map>要素の中に幾つも入れることが出来ますので、リンクを複数設定することが出来ます。

実際の設定の仕方はサンプルファイルJavaScript を使っています。を見てください。

また、このクライアント・イメージ・マップ(クライアントクリッカブルマップ)は、ブラウザの種類・バージョンにより対応が違っていたり、shape属性の値が相違したりします。画像を表示しないでブラウザを使っている人や、ブラウザの読み上げ機能を使っている人などにも配慮して、alt属性を必ず入れるべきです。

よりアクセシブルにするために<a>要素の使用をすすめておられる向きもありますので、試作してみましたが、<area>要素が対応していない環境がありませんので旨く動くかどうかわかりません。対応している場合は上記サンプルファイルと同じに見えます。サンプルファイル2JavaScript を使っています。

(2005/8/3 UP)


「陽だまり」ホームページ > パソコンお助け情報INDEX > Webページ作成 INDEX

作成&連絡先 NET・陽だまり