一覧へ戻る

HTMLにonmouseover/onmouseout属性を記述せずにロールオーバーさせる

ロール―オーバーさせるときに、あれば便利なスクリプトです。

画像をロールオーバーさせたい時<img>タグにonmouseover/onmouseout属性を記述して
ロールオーバーさせる方法があります。しかし、これは結構手間。

そこで下記のスクリプトを用いるとclassを設定するだけでロールオーバーが実現し、
HTMLソースが簡素にまとめられます。

【動作サンプル】※画像にマウスをのせてください。画像がロールオーバーします。


下記のスクリプトをhtml内に書き込むか、外部ファイルから読み込みます。
※元ネタ：Daniel Nolan

function initRollovers() {
	if (!document.getElementById) return
	
	var aPreLoad = new Array();
	var sTempSrc;
	var aImages = document.getElementsByTagName('img');

	for (var i = 0; i < aImages.length; i++) {		
		if (aImages[i].className == 'imgover') {
			var src = aImages[i].getAttribute('src');
			var ftype = src.substring(src.lastIndexOf('.'), src.length);
			var hsrc = src.replace(ftype, '_o'+ftype);

			aImages[i].setAttribute('hsrc', hsrc);
			
			aPreLoad[i] = new Image();
			aPreLoad[i].src = hsrc;
			
			aImages[i].onmouseover = function() {
			sTempSrc = this.getAttribute('src');
			this.setAttribute('src', this.getAttribute('hsrc'));
			}	
			
			aImages[i].onmouseout = function() {
			if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype);
			this.setAttribute('src', sTempSrc);
			}
		}
	}
}

window.onload = initRollovers;

htmlでの記述はロールオーバーさせたい画像の<img>タグに「class="imgover"」を記述するだけ！！

<img src="rollover.gif" class="imgover" alt="動作確認サンプル" /">

【画像ファイルの名前の付け方】

ロールオーバー用の画像ファイルの名前の付け方は、基本画像ファイル名の後ろに「_o」を付けます。

基本画像：rollover.gif
基本画像

ロールオーバー用画像：rollover_o.gif
ロールオーバー用画像

動作環境・スクリプトエラー報告・対処方法

動作環境
 
エラー・バグ報告
 
不具合対処方
 
修正パッチ