クリッカブルマップの覚書いろいろ

昔懐かし手法、クリッカブルマップを使う機会があったので覚書です

usemapの挙動について

		<img src="img/mainimg_main01.jpg" usemap="#mainimg" alt="てすとだよ" />
		<map name="mainimg">
			<area shape="poly" coords="1,146,359,146,359,377,1,377" href="http://example.com" alt="">
			<area shape="poly" coords="359,147,1003,147,1003,378,359,378" href="http://example.com" alt="">
			<area shape="poly" coords="-1,377,641,377,641,611,-1,611" href="http://example.com" alt="">
		</map>

usemap=”#mainimg” の部分。
usemap=”mainimg”と#をいれなくても、chromeだと、ハッシュ# が無くても動いてしまうのです。
でもIE/FFで動かなくなるので、忘れずに入れましょう。

座標を取るのが楽になるPhotoshop拡張

座標を取る際は
吉本 集さん制作のPhotoshop拡張がとても便利です。
ドリームウィーバーでもできないことは無いのですが、px単位で位置を合わせるのが、Photoshopの方が容易です。
変な形とかにもできますし。
http://tsudoi.org/weblog/?p=1279

クリッカブルマップのロールオーバー

クリッカブルマップを利用して、ロールオーバーもできます。
たとえば、地図の色を変更する、なんてことができます。
こちらはjQuery必須です。
プリローダーを実装してあげると快適だと思います。
画像置換ではなく、cssスプライトで実装してもいいかもしれませんね～。

		<div id="aseanMap">
			<h3><img src="img/h3_01.gif" alt="ASEAN" width="609" height="33" /></h3>
			<div id="mapBox">
				<img src="img/pic_map_dummy.png" alt="asean" width="960" height="565" usemap="#rollover" id="mapImg" />
				<map name="rollover" id="rollover">
					<area shape="poly" alt="Singapore" id="Singapore" nohref="nohref" coords="194,377,212,377,212,388,277,388,277,458,194,458">
					<area shape="poly" alt="Cambodia" id="Cambodia" nohref="nohref" coords="176,126,231,126,231,144,261,141,239,196,236,213,185,223,159,170,176,151">
					<area shape="poly" alt="Vietnam" id="Vietnam" nohref="nohref" coords="336,114,336,187,302,187,213,256,204,215,255,180,223,96,209,77,189,72,193,45,171,40,148,6,151,1,263,12,264,22,227,50,270,114">
					<area shape="poly" alt="Thailand" id="Thailand" nohref="nohref" coords="84,144,59,144,59,73,68,73,127,45,142,84,143,84,196,84,207,92,207,106,226,124,225,132,166,170,165,194,132,181,130,182,120,241,145,279,171,292,171,301,158,312,111,289,101,277,82,272,104,210">
					<area shape="poly" alt="Malaysia" id="Malaysia01" nohref="nohref" coords="463,257,492,267,491,280,427,306,398,364,366,367,312,372,308,355,312,349,338,346,406,301">
					<area shape="poly" alt="Malaysia" id="Malaysia02" nohref="nohref" coords="166,279,235,279,235,355,201,355,215,368,176,379,117,297,122,290,157,299,166,290">
					<area shape="poly" alt="Philippines" id="Philippines" nohref="nohref" coords="515,90,540,86,540,14,638,14,638,111,580,111,598,134,621,205,529,238,519,203,514,147,495,143,447,227,435,223,435,222,435,216,481,133,472,109,473,25,497,12">
					<area shape="poly" alt="Indonesia" id="Indonesia" nohref="nohref"  coords="654,258,834,271,908,278,941,380,945,410,922,406,801,467,755,479,695,503,671,508,596,544,307,540,218,528,141,479,104,453,58,394,35,367,23,314,53,301,63,311,84,319,141,365,199,396,202,418,220,427,293,382,300,356,332,369,373,356,400,356,407,349,419,313,415,303,420,298,522,299,569,279">
				</map>
			</div>
		</div>

$(function(){
	jQuery.preloadImages = function(){
		for(var i = 0; i<arguments.length; i++){
			jQuery("<img>").attr("src", arguments[i]);
		}
	};
	
	$.preloadImages("img/map/Cambodia.png","img/map/Indonesia.png","img/map/Malaysia01.png","img/map/Malaysia02.png","img/map/Philippines.png","img/map/Singapore.png","img/map/Thailand.png","img/map/Vietnam.png");
	
	//areaのマウスオーバーにて画像を置換
	$('area').hover(
		function(){
			$('#mapImg').stop();
			var areaId = $(this).attr('id');
			$('#mapImg').attr('src', 'img/map/' + areaId + '.png');
		},
		function(){
			$('#mapImg').stop();<ol>
</ol>


			$('#mapImg').attr('src', 'img/pic_map_dummy.png');
	});
});

参考サイト様

http://black-flag.net/jquery/20121003-4217.html
http://logic.moo.jp/data/archives/740.html
http://cgi-lab.net/javascript/89-image-map.html