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

概要

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 : 2008/01/21
 Licensed under the GNU Lesser General Public License version 2.1

//////////////////////////////////////////////////////////////////////////////////////////////////////
====================================================================================================*/
var yomotsuRollover = {
	
	main : function() {
		var img = document.images, ipt = document.getElementsByTagName('input'), i, preLoadImg = [];
		// img elements
		for (i = 0; i <img.length; i++) {
			if ((img[i].src.match(/.*_n\./))||(img[i].style.filter)){
				preLoadImg[preLoadImg.length] = new Image;
				preLoadImg[preLoadImg.length-1].src = img[i].src.replace('_n.', '_r.');

				img[i].onmouseover = yomotsuRollover.over;
				img[i].onmouseout  = yomotsuRollover.out;
				try {img[i].addEventListener('click', yomotsuRollover.click, false);}
				catch(e){img[i].attachEvent('onclick', (function(el){return function(){yomotsuRollover.click.call(el);};})(img[i]));}
			}
		}
		// input[image] elements
		for (i = 0; i <ipt.length; i++) {
			if ((ipt[i].src.match(/.*_n\./))&&(ipt[i].getAttribute('type')=='image')){
				preLoadImg[preLoadImg.length] = new Image;
				preLoadImg[preLoadImg.length-1].src = img[i].src.replace('_n.', '_r.');

				ipt[i].onmouseover = yomotsuRollover.over;
				ipt[i].onmouseout  = yomotsuRollover.out;
				try {ipt[i].addEventListener('click', yomotsuRollover.click, false);}
				catch(e){ipt[i].attachEvent('onclick', (function(el){return function(){yomotsuRollover.click.call(el);};})(ipt[i]));}
			}
		}
	}
	,
	
	over : function() {
		var imgSrc, preLoadImgSrc;
		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.');
	},
	
	click : 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', this.main, false);
		} catch (e) {
			window.attachEvent('onload', this.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 画像のロールオーバーを簡単にしてくれるスクリプト。画像ファイル名をいじるだけでいいので簡単便利。 [...]

toriさんからのコメント

2009年1月15日 21:22

img の他、src でページ内に画像を呼び出しているもの、具体的には input type=”image” にも適用したい場合どうしたらよいでしょうか？
単に var img = document.images; を var img = document.getElementsByTagName("input"); としては当然ながら img には適用されなくなってしまいますし……。
「,」で区切ってみても無意味のようですし。

JavaScript もさっぱりなので色々と検索はしてみたものの変数に複数の値を入れる方法は見つかりませんでした。複数の変数に同じ値を…というのはありましたが、見つからないということは別のところをいじる必要があるのでしょうね。
どうかお教えいただけませんでしょうか？

（今回の件とは全く関係ないですが、 object でも画像は埋め込めますが多分現状では一般的じゃないし src じゃないですし面倒になりますよね？）

みらいの自分と乾杯！ » classを設定せずにjsで画像をロールオーバーさんからのコメント

2009年1月15日 22:09

[...] http://www.yomotsu.net/lab/javascripts/rollover onmouseover や class 属性なしで画像のロールオーバーをするための JavaScript [...]

adminさんからのコメント

2009年1月16日 12:08

@tori さん :

コメントいただきありがとうございます。

input[image] もサポートするように変更してみました。実際の動作は demo より確認いただけますのでお試しいただけます。

同じ処理を 2 回書いて document.images と document.getElementsByTagName("input") で同じ処理を別々に行うようにした感じにしています。

object に関しては画像を埋め込んだ場合、src の代わりに deta の値を入れ替えれば OK なのでまた別で処理を用意すればよいかと思います。swf などと区別するために同時に type 属性に image が含まれるかも判断する感じになるかなと。ただ、tori さんのコメントのとおり object をつかって画像を埋め込むと IE でスクロールバーと余白ができてしまって現状はつらいですよね。でも自分も object で画像を埋め込みたい派です…。

toriさんからのコメント

2009年1月16日 21:28

レス、早速のアップデートありがとうございます。
やはり同じ処理は対象分必要ですよね。とはいえそこまでの知識はやっぱり無いのですが＾＾；

button に img を入れればなんて事は無いですが IE がありますしね。
といっても今必要としてるボタンは button 内にどうしても value を置かねばという事はないのですが、画像を表示できれば button ほど中身の汎用性もいりませんし。
時に検索途中で document.input というのを見つけ試してみたのですが無反応で説明文も特に無く……。

動作確認用の demo 2 の方、正常に動作してないようです。

またも関係ない話で今更でもありますが、2つ以上の改行はに置き換えられるんですね。
小さなことですがちょっと感動です。確か WP のプラグインでしたっけ。

toriさんからのコメント

2009年1月16日 22:51

おっと、消えてしまいました（汗）
＞2つ以上の改行はに置き換えられるんですね。
</p><p> に、です。

Andrew C. Greenbergさんからのコメント

2009年4月23日 12:17

for (i = 0; i <ipt.length; i++) {

このループの中で、
preLoadImg[preLoadImg.length-1].src = img[i].src.replace(’_n.’, ‘_r.’);
となっていますが、
preLoadImg[preLoadImg.length-1].src = ipt[i].src.replace(’_n.’, ‘_r.’);
にしないと、imgの画像を二度キャッシュしてることになりませんか？

hasyさんからのコメント

2009年5月11日 17:07

inputにロールオーバーをつけたくて使わせていただこうと思ったんですが、
実装しても反応しません。。

demo2を何度も確認して同じことをしているのですが、
何か注意するべきことはありますか？

adminさんからのコメント

2009年5月11日 22:37

@Andrew C. Greenberg さま

反応遅くなりすみません。ご指摘ありがとうございます。確かにその通りでした。修正させていただきました !!

adminさんからのコメント

2009年5月11日 22:42

@hasy さま

注意する点については、

***_n.gif と ***_r.gif をセットで用意していること
js ファイルへのパスは html ファイルからみたパスになっていること

辺りかと思います。

また、IE 6 以下の環境においては input[@type="image"] に対してアルファチャンネルをサポートした PNG 画像に対してはロールオーバー効果が適用されません。

お手数ですがご確認ください。よろしくおねがいします。

Andrew C. Greenbergさんからのコメント

2009年5月13日 22:14

こんにちは。
すこしでもお役に立てて幸いです！
今後ともよろしくお願いします。

コメントフォーム

実験室に戻る

このページの目次