このページの目次

綺麗なソースで画像をロールオーバー

概要

onmouseover や class 属性なしで画像のロールオーバーをするための JavaScript です。HTML ソースに余分な情報を入れないですみ、綺麗な HTML ソースを保つことができます。

説明

このスクリプトでは画像のファイル名の末尾に『_n』がついている場合に同名で、末尾が『_r』の画像に入れ替わります。

例えば、sample_n.png はマウスオーバー時に sample_r.png に入れ替わります。

HTMLの head 要素内などでこの JavaScript を読み込んでください。この JavaScript 内を変更する必要はありません。

ソースコード

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

 Author : http://www.yomotsu.net
 created: 2007/03/13
 update : 2007/11/01 IE6で32bitPNGもROできるように変更
 Licensed under the GNU Lesser General Public License version 2.1
 
 画像のロールオーバーをするためのスクリプト

//////////////////////////////////////////////////////////////////////////////////////////////////////
====================================================================================================*/
var yomotsuRollover = {
	
	main : function() {
		var img = document.images;
		for (var i = 0; i <img.length; i++) {
			if ((img[i].src.match(/_n\./))||(img[i].style.filter)){
				img[i].onmouseover = yomotsuRollover.over;
				img[i].onmouseout  = yomotsuRollover.out;
			}
		}
	},

	over : function() {
		if((this.style.filter)&&(this.style.filter.match(/_n\.png/))){//(IE5.5-6 && png)
			this.style.filter = this.style.filter.replace('_n.png', '_r.png');
		}
		else{
			this.src = this.src.replace('_n.', '_r.');
		}
	},

	out : function(){
		if((this.style.filter)&&(this.style.filter.match(/_r\.png/))){//(IE5.5-6 && png)
			this.style.filter = this.style.filter.replace('_r.png', '_n.png');
		}
		else{
			this.src = this.src.replace('_r.', '_n.');
		}
	},

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

yomotsuRollover.addEvent();


トラックバックURI

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

コメント

JavaScript(+ JQuery)メモ at ORANGE AGE - blogさんからのコメント

2008年6月11日 22:01

[...] ■rollover.js 画像のロールオーバーを簡単にしてくれるスクリプト。画像ファイル名をいじるだけでいいので簡単便利。 [...]

コメントフォーム

コメント

コメントでは一部の XHTML タグを使用できます。 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

実験室に戻る

著作権情報等

Copyright © 2004-2008 yomotsu-net. Some Rights Reserved.