■ テーブル（表）を使ってクリッカブルマップ（イメージマップ）？

「ＨＰ作成の予備知識」で、クリッカブルマップ（イメージマップ）は解説しましたが、詳しく解説していません。
でも、クリッカブルマップ（イメージマップ）って、タグ打ち（HTMLソースで作成）ではちょっと難しいんです。

何故って？
それは画像の位置やマウスの位置をピクセル単位で指定しないといけないから、画像ソフトでもないとちょっと位置関係を調べるのは難しいんですね。
仮に画像ソフトがあったとしても、いちいちマウスを押さえる位置をピクセル単位で拾っていくのはかなり大変です。

例えば、ここのページトップにもクリッカブルマップ（イメージマップ）のようなものがあるでしょう？
画像をクリックするとちゃんと指定したページに飛んでくれますよね？

これ、実はクリッカブルマップ（イメージマップ）じゃないんです。(笑)

これね、テーブル（表）を使って一つ一つの画像をくっつけて、ひとつの画像のように見せてるだけなんです。（んふふふ）

え、その手法を知りたいですか？

まず、それぞれの画像を用意します。

そして、それらをテーブル（表）の一つ一つのセルに入れていくんです。
そして、必要な箇所に、「リンク」を張ります。

そして、「table」タグに「style="border-collapse: collapse;"」を、「td」タグには「style="padding: 0; border-width: 0;"」を追記します。
すると、次のような画像ができます。

どうです？
一枚の画像のように見えるでしょう？
そして、クリッカブルマップ（イメージマップ）のように指定した位置をクリックすればちゃんとページジャンプしてくれます。

この方法を使えばちょっと複雑な画像でも割と簡単にクリッカブルマップ（イメージマップ）もどきができます。(^^)

このページのサンプルは次のように記述しています。

※スタイルシートやスタイル属性の詳しい説明は、「HTMLの解説」−「15.スタイルシート」や「HTMLの解説」−「14.スタイル属性」を参照してください。

【記述サンプル】

<table style="border-collapse: collapse;">
<tr>
<td style="padding: 0; border-width: 0;"><img src="../../images/top/menut0_01.png" width="8" height="16" alt="プルダウンメニュー左端"></td>
<td style="padding: 0; border-width: 0;"><a href="/" title="トップページへ"><img src="../../images/top/menut0_02.png" name="pdmenu02" width="40" height="16" alt="トップ"></a></td>
<td style="padding: 0; border-width: 0;"><a href="/htm/intro.html" title="更新履歴を表示します。"><img src="../../images/top/menut0_03.png" name="pdmenu03" width="59" height="16" alt="はじめに/バナー"></a></td>
<td style="padding: 0; border-width: 0;"><img src="../../images/top/menut0_13.png" width="5" height="16" alt="プルダウンメニュー右端"></td>
</tr>
</table>