※スタイルシート、スタイル属性の詳しい解説は、「HTMLの解説」にあります。

■ テーブル(表)を使ってクリッカブルマップ(イメージマップ)?

HP作成の予備知識」で、クリッカブルマップ(イメージマップ)は解説しましたが、詳しく解説していません。
でも、クリッカブルマップ(イメージマップ)って、タグ打ち(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>

page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom