イメージマップをJavaScriptで制御する

HTMLにはクリッカブルマップまたはイメージマップと呼ばれる機能があります。地図上の都道府県の位置をクリックすると個別のリンクへ飛ぶ仕組みなどよく見かけると思います。 一方、アドベンチャー系のゲームに脱出ものというジャンルがあります。特にFlashで作成されたゲームがよく出回っています。HTML/CSS/JavaScriptのみで脱出ゲームが作れないか考えていたところ、このイメージマップ機能が使えそうだと気付いたので、さっそく試しにサンプルを作ってみることにしました。 ただし、HTMLのイメージマップを利用すると、AREAタグにhref属性を設定するため、タブキーでクリックできる場所が簡単に分かってしまいます。また、クリック後にページ遷移する仕組みを作るとプレイヤーのストレスになるかもしれません。 ただし、こうした欠点はある程度JavaScriptで補うことができます。このサンプルはPrototype.jsを利用していますが、同じようなことはjQueryなど他のライブラリでもできると思います。 下のリンク先を見ると扇状に障子が見える画像があります。障子が見えている部分はクリック可能になっているのでクリックしてみてください。 ⇒イメージマップでクリック可能な個所を指定 上のイメージマップの作成コード（Prototype.js依存です）は下記のようになっています。 ⇒test_clickable_map.js

document.observe('dom:loaded', function() {
	
	var clickableMap = $('clickable_map');
	
	//タブキーのデフォルトアクションを禁止する
	document.observe('keydown', function(e) {
		
		// Mozilla(Firefox, NN) and Opera
		if (typeof event == 'undefined') {
			var code = e.which;
			if (code == Event.KEY_TAB)
				e.stop();
			
		// Internet Explorer
		} else {
			var code = event.keyCode;
			if (code == Event.KEY_TAB)
				e.stop();
			
		}
	});
	
	//クリッカブルマップの各データを変数imageDataにオブジェクト形式で格納します
	//マップの領域判定にはez-HTMLというフリーソフトを利用しました
	var imageData = {
		name: 'japanese-style',
		url: 'image/background/japanese-style_beiz.jp_S08248.jpg',
		mapArea: {
			shape: 'poly',
			coords: '53,189,238,335,327,314,402,337,591,194,558,128,
477,56,391,23,245,25,151,67,87,130,53,189'
		}
	};
	
	clickableMap.insert({
		top: '',
		bottom: ''
	});
	
	//map要素でname属性が"japanese-style"の要素にイベントハンドラを登録
	$$('map[name=' + imageData.name + '] area').first()
		.observe('click', function(e) {
			e.stop();
			alert('クリッカブルマップをクリックしました！');
		})
		.setStyle({ cursor: 'pointer' });
	
});

まず、タブキーが押されたときのみデフォルト・アクションを禁止し、リンクがフォーカスされないようにしています。 次にあらかじめイメージマップの形や領域の座標などを変数にオブジェクト形式で保存しておきます。座標を判定するのにez-HTMLというフリーソフトを利用しました。そして、Prototype.jsのinsertメソッドを使って、IMGタグとMAP/AREAタグをHTML上に流し込みます。（DOMで要素を作るとなぜかIEのバージョンによって動作しませんでした） AREAタグにはhref属性を設定せず、代わりにonclick時のイベントハンドラを登録。hrefに例の”javascript:void(0)”と入れる必要がないので、ステータスバーにも余計な情報が出なくなり、ページが遷移することもありません。 Internet Explorer 6-8 Firefox3.5　で動作確認しました。

 - JavaScript/Ajax, ゲーム JavaScript, Prototype, イメージマップ, クリッカブルマップ