javascriptでイメージマップ

これならうまくいくはず

javascriptで分岐します。jQueryなどは使っていません。

画像の条件は同じです。onClickで画像の大きさと、クリックの位置を比べてリンク先を計算します。

htmlの記述

thisもeventも特殊なオブジェクトです。呼び出される関数でthisからはクリックされた対象の情報(具体的には画像の表示サイズ)を、eventからはeventの情報(具体的にはクリック位置)を取り出します。

<p><img src="images/map720.png" title="onclickで分岐します" onclick="clicknav(this,event)"></p>

javascriptの記述

koko.getBoundingClientRect()でクリック対象の四角い領域を得、.width、.heightで表示されている幅と高さを取得します。

.offsetX、.offsetY でクリックされた位置をクリック対象の左上からの距離で取得します。

function clicknav(koko,ev){
	var clientRect = koko.getBoundingClientRect() ;
	var x1 = clientRect.width/4;
	var y1 = clientRect.height/2;
	var ox = ev.offsetX;
	var oy = ev.offsetY;
	if (y1>oy) {
		if (x1>ox){
			location.href = 'ht00201.html';
		}else if (x1*2>ox){
			location.href = 'ht00202.html';
		}else if (x1*3>ox){
			location.href = 'ht00203.html';
		}else{
			location.href = 'ht00204.html';
		}
	}else{
		if (x1>ox){
			location.href = 'ht00205.html';
		}else if (x1*2>ox){
			location.href = 'ht00206.html';
		}else if (x1*3>ox){
			location.href = 'ht00207.html';
		}else{
			location.href = 'ht00208.html';
		}
	}
}