WEB制作のメモ帳

2011-05-04

javascript

ポータルサイトに多いですが
地図から該当箇所を選んでページ移動する際に
毎回フラッシュで作るのは大変。

エリアマップと「javascript」を使ったロールオーバーを見つけたのでメモ

SOURCE

■用意する画像
1 番目の area 要素 (エリア 1 ) :map_swap1.gif
2 番目の area 要素 (エリア 2 ) :map_swap2.gif
3 番目の area 要素 (エリア 3 ) :map_swap3.gif
4 番目の area 要素 (エリア 4 ) :map_swap4.gif

■HTML
<div><img src="img/map_swap0.gif" alt="地図" usemap="#imagemap" /><div>
<map name="imagemap" id="imagemap">
<area shape="rect" coords="0,0,30,30" href="#area1" alt="エリア1" />
<area shape="rect" coords="0,30,30,60" href="#area2" alt="エリア2" />
<area shape="rect" coords="0,60,30,90" href="#area3" alt="エリア3" />
<area shape="rect" coords="0,90,30,120" href="#area4" alt="エリア4" />
</map>

■javascript
var yomotsuSwapImageMap = {

main : function(){
var area = document.getElementsByTagName("area");
for(i=0;i<area.length;i++){
area[i].onmouseover = yomotsuSwapImageMap.over;
area[i].onmouseout = yomotsuSwapImageMap.out;
}
},

over : function(){
var i, j,
img = document.images,
area = this.parentNode.getElementsByTagName("area"),
mapIdReg = new RegExp ("\b"+this.parentNode.id+"\b");
for(i=0;i<area.length;i++){
if(area[i]===this){
for (j = 0; j <img.length; j++) {
if (img[j].src.match(/_swap0.(png|gif|jpg)/)&&img[j].getAttribute("usemap").match(mapIdReg)){
img[j].src = img[j].src.replace(''_swap0.'', ''_swap''+(i+1)+''.'');
}
}
}
}

},

out : function(){
var i, j,
img = document.images,
area = this.parentNode.getElementsByTagName("area"),
mapIdReg = new RegExp ("\b"+this.parentNode.id+"\b");
for(i=0;i<area.length;i++){
if(area[i]===this){
for (j = 0; j <img.length; j++) {
if (img[j].src.match(/_swap[0-9]+.(png|gif|jpg)/)&&img[j].getAttribute("usemap").match(mapIdReg)){
img[j].src = img[j].src.replace(''_swap''+(i+1)+''.'', ''_swap0.'');
}
}
}
}
},

addEvent : function(){
try {
window.addEventListener(''load'', this.main, false);
} catch (e) {
window.attachEvent(''onload'', this.main);
}
}
}

yomotsuSwapImageMap.addEvent();

参考サイト

imagemap で簡単にロールオーバー
http://www.yomotsu.net/lab/javascripts/swapimagemap