イメージマップと同じような機能を画像で管理します。
本来のイメージマップ例： <img src="xx.jpg" usemap="yy"> <map name="yy"> <area shape="rect" coords="60, 60,130,100" href="map1.html"> <area shape="rect" coords="60, 256,120,300" href="map2.html"> <area shape="rect" coords="300,100,400,200" href="map3.html"> </map>
擬似イメージマップは画像の中に色で領域を設定し、
色情報をキーとしたテーブルで、リンク処理を行います。
必要な物は３つ、表示画像と領域指定画像、javascript です。
①表示画像
②領域指定画像
③ map_link.js 50行程度のjavascriptです。
考え方
クリックされた位置で領域指定画像から色コードを取得して、
色コードをキーとしたテーブルlink_mapで、リンク処理を行います。
link_mapテーブルの例：
link_map = [
// R G B 文字列
221, 235, 247, “ベローナ “,
189, 215, 238, “ベネチア “,
155, 194, 230, “ボローニャ “,
// R G B 文字列
221, 235, 247, “ベローナ “,
189, 215, 238, “ベネチア “,
155, 194, 230, “ボローニャ “,
擬似イメージマップの有利な点としては、色で領域を指定しているので四角や丸だけでなく、また連続していなくても同じ領域と見なせます。