概要
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 画像のロールオーバーを簡単にしてくれるスクリプト。画像ファイル名をいじるだけでいいので簡単便利。 [...]
コメントフォーム
実験室に戻る