前へ 次へ?

もう一つのイメージマップ

当ページは、元のページ「3.イメージマップ」での不具合解消の意味で別ページで作成しております。不具合の原因は、同一ページに複数のイメージマップを設置できないという単純なる理由です。

下記の画像の上の何処かをクリックしてみて下さい。
画像のイメージに対応した自前サイトにリンクしているのが分かると思います。
こんな使い方もイメージマップには有りかと思う事例です。

藤心パソコン倶楽部 藤心QHMクラブ 藤心DOUGAドットコム Photo Flash Maker 藤心 My Jukebox



[check]前記の「おまじない」内容です。

#html{{
<IMG src="swfu/d/page10.jpg" usemap="#linkmap" width="402"  height="402" border="0">
<MAP name="linkmap">
<AREA shape="rect" coords="101,101,301,301" href="http://fujigowp.info/" alt="藤心パソコン倶楽部" title="藤心パソコン倶楽部">
<AREA shape="rect" coords="1,1,201,201" href="http://fujigopc.com/qhm_99999999/" alt="藤心QHMクラブ" title="藤心QHMクラブ">
<AREA shape="rect" coords="201,1,401,201" href="http://fujigowp.info/douga/" alt="藤心DOUGAドットコム" title="藤心DOUGAドットコム">
<AREA shape="rect" coords="201,201,401,401" href="http://fujigokoro.xsrv.jp/pflash/" alt="Photo Flash Maker" title="Photo Flash Maker">
<AREA shape="rect" coords="1,201,201,401" href="http://jkbox3.fujigowp.info/" alt="藤心 My Jukebox" title="藤心 My Jukebox">
}}


ちょっとした裏ワザ

前記の画像は、正四角形の画像5ツで出来ています。
真ん中の正四角形以外の周辺の画像は厳密に言うと頂点が6ツある多角形です。
そのままイメージマップとして設定すると六角形の領域設定(shape="poly")で指定しなければなりません。

六角形の領域設定より四角形の領域設定(shape="rect")の方が遥かに易しいので、今回は、四角形の領域設定のみの指定で5ツの領域を設定して見ました。そこには、ちょっとした裏ワザがあります。

最初に真ん中の四角形を設定し、その後、周辺の四角形を設定すれば、図形が重なった部分は、真ん中の四角形の設定が優先されるを利用した裏ワザです。これはテスト検証している中で発見したテクニックと言えるでしょう。


ご意見箱