imagemap で簡単にロールオーバー

概要

地図などの img 要素に、map 要素と area 要素で imagemap を指定したとき簡単にロールオーバー効果を与えることができる JavaScript ライブラリです。

使い方

画像のファイル名を目印にしてロールオーバー効果を与えることができます。

例えば、次のような XHTML のソースの断片があったとします。

<p><img src="img/map_swap0.gif" alt="地図" width="300" height="200" usemap="#imagemap" /><p>
<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>

まず、ロールオーバー効果を与えたい img 要素で読み込む画像の名前の末尾に、_swap0 をつけてください。

次に上記の XTHML ソース中の 4つの area 要素にロールオーバー時の画像として、下記の表のようにそれぞれの area 要素に対応する 4つの画像を用意します。

1 番目の area 要素 (エリア 1 ) に対応する画像	map_swap1.gif
2 番目の area 要素 (エリア 2 ) に対応する画像	map_swap2.gif
3 番目の area 要素 (エリア 3 ) に対応する画像	map_swap3.gif
4 番目の area 要素 (エリア 4 ) に対応する画像	map_swap4.gif

これら 4つの画像ファイルを map_swap0.gif と同じディレクトリに配置します。

この例では 4つですが、area 要素が多い場合には、10番目の area 要素に対応するには [画像名]_swap10.gif、100番目の area 要素に対応するには [画像名]_swap100.gif のように増やします。

ロールオーバーに必要な準備は以上です。より詳しい例を見る場合には動作確認用の DEMO のソースをご覧下さい。

ライセンス

NU General Public License の範囲で個人利用、商用利用を問わず自由にご利用いただけます。

ソースコード

/*====================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////

 Author : http://www.yomotsu.net
 created: 2008/03/04
 Licensed under the GNU Lesser General Public License version 2.1
 
 image map 箇所の area 要素用ロールオーバー

//////////////////////////////////////////////////////////////////////////////////////////////////////
====================================================================================================*/

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)\\b/)&&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)\\b/)&&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();

トラックバックURI

http://www.yomotsu.net/lab/javascripts/swapimagemap/trackback

sakuraさんからのコメント

2008年6月13日 22:35

はじめまして。
初心者のため愚問かもしれませんが教えて下さい。

このスクリプトをテストで使わせていただき、
各areaにそれぞれ適応した画像を設定しました。
しかし、
マウスオーバー時、画像が元の画像（例：map_swap0.gif）と同じ大きさに拡大されて表示されてしまいます。
各areaで設定したエリア上でアップロードしたそれぞれの画像サイズで表示されないのでしょうか？

宜しくお願いいたします。

adminさんからのコメント

2008年6月14日 4:34

sakura さん

はじめまして。コメント、ありがとうございます。

ロールオーバー時に画像の大きさを元の大きさで表示したい、についてですが、width 属性と height 属性を抜いていただければよいかと思います。例えば、

<img src="map_swap0.gif" alt="foo" usemap="bar" />

のように、width 属性と height 属性をあえて明示しないでおきます。

この JavaScript は src 属性のみを入れ替える方法で画像を切り替えています。その他に指定してある属性はそのままとなります。

width 属性と height 属性が明示されていない画像は、画像のダウンロード完了時にオリジナルの大きさで表示されますので、この 2 つの属性を抜いておけば sakura さんの意図した状態になるかと思います。

ただし、area 要素の座標は変わりませんので気をつけてください。

少しわかりづらい内容となってしまいましたが、もしわからないことがありましたらお手数ですが再度コメントをいただければと思います。

sakuraさんからのコメント

2008年6月14日 11:32

なるほどです。
なんとなく分かりました。ちょっと試してみますね。
また、分からない部分があれば質問させてください。
有難うございます！

杉浦さんからのコメント

2008年7月14日 2:02

利用させて頂きました
有り難うございます

自分のパソコン内ではロールオーバーするのですが
アップロードしてみると動かないのです

杉浦さんからのコメント

2008年7月14日 2:04

先ほどのコメントのＵＲＬ間違いましたので再送します

杉浦さんからのコメント

2008年7月14日 2:37

swapimagemap.jsの属性変更したら動きました
失礼致しました

adminさんからのコメント

2008年7月15日 1:38

杉浦さん

コメントありがとうございます。無事に動作したようでよかったです。また気になることがありましたらお気軽にご質問ください。

コメントフォーム

実験室に戻る

このページの目次