リンク領域 トップページ 表のセルで ボタンで 函南原生林 丹那断層 白鳳の秘湯


一つの画像に複数のリンクを設定



一つの画像を複数の区画に分け、それぞれの区画に一つずつリンクを設定する方法でリンク領域を構成することができます。このページの場合は、ボタンを横方向に6つ連結したような細長い画像を使っています。

リンク領域に関する記述は、具体的には次のようになっています。

スタイルシート
リンク領域には、スタイルシートは使っていません。

HTML の記述
《上、下リンク領域の記述》
<img src="btn_stac.gif" usemap="#link_map" width="660" height="28" border="0" alt="リンク領域">

《両リンク領域に共通の記述》
<map name="link_map">
<area shape="rect" coords="8,5,102,23" href="../../index.html" alt="トップページ">
<area shape="rect" coords="118,5,212,23" href="cel_syst.html" alt="表のセルで">
<area shape="rect" coords="228,5,322,23" href="btn_syst.html" alt="ボタンで">
<area shape="rect" coords="338,5,432,23" href="../../k_gensei/genseirn.html" alt="函南原生林">
<area shape="rect" coords="448,5,542,23" href="../../ta_danso/ta_danso.html" alt="丹那断層">
<area shape="rect" coords="558,5,652,23" href="../../hakuho_k/hakuho_k.html" alt="白鳳の秘湯">
<area shape="default" nohref>
</map>

[備考]
area タグを使った記述により画像を必要な数の区画に分け、それぞれの区画にリンクを設定します。リンクを設定した区画の配置をクリッカブル・マップ(クライアント・サイド・クリッカブル・マップ)と呼びます。map タグは area タグによる記述すべてを包むとともに、リンクを設定する画像と area タグによる記述とを結び付ける役割を果たします。
リンク先の数あるいは名称が変わる可能性がある場合には、このページのような文字を乗せた画像は、画像全体の作り直しが必要になるため、複数のボタンを使う方が得策であろうと思われます。
また、区画の配置が単純でない場合は、クリッカブル・マップを作るのに手がかかる(即ち、座標を決めるのが大変)ため、マップ作成用のソフトを使用するのがお勧めです。ただし、無料で提供されているマップ作成用のソフトは GIF 画像を扱えない(特許による制約)ため、画像は JPEG にせざるを得ません。


リンク領域