JavaScriptでロールオーバー(JQueryバージョン)

JavaScript(JQuery)で画像のロールオーバーアクションを付けるスクリプト。
function setAnchorImages(e,p) {
 if (typeof(e) == 'undefined') { e = document };
 if (typeof(p) == 'undefined') { p = {} };
 if (typeof(p.suffix_o) == 'undefined' ) { p.suffix_o = '_o' };
 if (typeof(p.suffix_here) == 'undefined' ) { p.suffix_here = '_here' };
 
 $(e).each(function(){
 var img = $(this).children('img').get(0);
 if (typeof(img) == 'undefined') { return true; }
 var href = $(this).attr('href');
 var imgsrc = img.src;
 var suffixSrc = function(src,suffix){return src.replace(/^(.*?)(\x2e)([^\x2e]+?$)/,'$1'+suffix+'$2$3');};
 
 $(img).mouseover(function(){ this.src= suffixSrc(imgsrc,p.suffix_o) });
 $(img).mouseout(function(){ this.src= imgsrc });
 });
}

Event.domReady.add(function(){ setAnchorImages('#navi a'); })
JQueryが必要。(↑の例は実行予約にdomready.js(とprototype.js)が必要。もちろんイベントが登録できればなんでも可。)
用法は、
setAnchoreImages([JQueryの条件式],[パラメタ])
  • JQueryの条件式には、ロールオーバーしたい<img>要素が含まれる要素の条件を渡す。
    例:<div id="navi"><a><img /></a></div>
    こんな構造ならば、'#navi a' を渡す。
  • パラメタにはリソース(画像ファイル)名に付ける識別子。デフォルトはオーバーで '_o'。(someimage.jpg → someimage_o.jpgとなる。)
    JSONオブジェクト形式渡す。
    例: { suffix_o: '_over' }
という感じ。

Leave a Reply