極意(23)イメージマップ vs リンクボタン

表面的には同じ機能に見えますが、その実、全く違ったおまじない(プラグイン)で作成される例として、イメージマップとリンクボタンがあります。今回、その違いを明らかにしてみました。


下記は、イメージマップです。

下記の画像は1枚の画像で出来ています。その一枚の画像の領域を7分割して、それぞれにリンクを張ってあります。実際にクリックしてみれば、ポップアップページが表示される筈です。正に、この仕様が「イメージマップ」と呼ばれる仕組みです。

藤心QHMクラブ 藤心QHMクラブ 藤心QHMクラブ 藤心QHMクラブ 藤心QHMクラブ 藤心QHMクラブ 藤心QHMクラブ

[check]上記のおまじないです。

#html{{
<IMG src="swfu/d/HP6PartDesign.PNG" usemap="#linkmap" width="444"  height="568" border="0">
<MAP name="linkmap">
<AREA shape="rect" coords="5,5,439,72" href="http://fujigopc.com/haik/index.php?killer11" alt="藤心QHMクラブ" title="画面構成のPart-1">
<AREA shape="rect" coords="5,77,439,100" href="http://fujigopc.com/haik/index.php?killer12" alt="藤心QHMクラブ" title="画面構成のPart-2">
<AREA shape="rect" coords="5,105,439,173" href="http://fujigopc.com/haik/index.php?killer13" alt="藤心QHMクラブ" title="画面構成のPart-3">
<AREA shape="rect" coords="5,179,136,456" href="http://fujigopc.com/haik/index.php?killer14" alt="藤心QHMクラブ" title="画面構成のPart-4">
<AREA shape="rect" coords="139,179,439,461" href="http://fujigopc.com/haik/index.php?killer15" alt="藤心QHMクラブ" title="画面構成のPart-5">
<AREA shape="rect" coords="5,464,439,487" href="http://fujigopc.com/haik/index.php?killer16" alt="藤心QHMクラブ" title="画面構成のPart-6">
<AREA shape="rect" coords="5,494,439,561" href="http://fujigopc.com/haik/index.php?killer17" alt="藤心QHMクラブ" title="画面構成のPart-7">
</MAP>
}}

[check]イメージマップについての詳細はコチラを参照して下さい。


下記は、リンクボタンです。

下記は一見すると前記と同じ1枚の画像に見えますが、実際には7個の画像を並べて表示しています。そして各々の画像にリンクが張ってあります。正に「リンクボタン」そのもので構成されています。各パートをクリックしてみれば、該当のポップアップページが表示される筈です。

クリックしてね!
クリックしてね!
クリックしてね!
クリックしてね!クリックしてね!
クリックしてね!
クリックしてね!

[check]上記のおまじないです。

[[&show(HP6Part01.PNG,,クリックしてね!);>killer11]]
[[&show(HP6Part02.PNG,,クリックしてね!);>killer12]]
[[&show(HP6Part03.PNG,,クリックしてね!);>killer13]]
[[&show(HP6Part04.PNG,,クリックしてね!);>killer14]][[&show(HP6Part05.PNG,,クリックしてね!);>killer15]]
[[&show(HP6Part06.PNG,,クリックしてね!);>killer16]]
[[&show(HP6Part07.PNG,,クリックしてね!);>killer17]]


余談ですが・・・

おまじないの難易度から言ったら、断然、2番目の「リンクボタン」形式が簡単であることは一目瞭然です。ですが、全て、この「リンクボタン」形式が実現できるかと言うと、そう簡単には行きません。

例えば、前記の例で、「4.メニュー」と「5.コンテンツ」の画像の高さが違っていたら前記のような形にはなりません。要するに「リンクボタン」形式では表現できない画像があると言うことです。

その点、「イメージマップ」形式なら、イラストレータ等の画像編集ソフトで自由に描いたイラストに対して、画像の部分部分にリンクを張ることができますが、その分、リンクを張る手順が難しくなります。どちらを選ぶかは、ユーザーさまのスキルと忍耐力に左右されると思います。


ご意見箱