Skip to content

Instantly share code, notes, and snippets.

@hokaccha hokaccha/rollover.js
Created Jul 17, 2009

Embed
What would you like to do?
var Rollover = function(elem, suffix) {
// 初期化する
this.namespace = "Rollover"; // 名前空間
this.elem = elem; // ロールオーバーしたい要素
this.suffix = suffix || "_o"; // 接尾語
this.baseSrc = elem.getAttribute("src"); // 元画像のパス
this.overSrc = this.baseSrc.replace(/\.\w+$/, this.suffix + "$&"); // ロールオーバー後の画像
this.addEvent();
this.preLoad();
};
Rollover.prototype = {
// マウスオーバーで画像切り替える
changeToOver: function() {
this.elem.src = this.overSrc;
},
// マウスアウトで画像切り替える
changeToNormal: function() {
this.elem.src = this.baseSrc;
},
// イベントを付加する
addEvent: function() {
var self = this;
$(this.elem)
.bind("mouseover." + this.namespace, function() { self.changeToOver();})
.bind("mouseout." + this.namespace, function() { self.changeToNormal() })
;
},
// イベントを削除する
removeEvent: function() {
$(this.elem)
.unbind("mouseover." + this.namespace)
.unbind("mouseout." + this.namespace)
;
},
// プリロードする
preLoad: function() {
var img = new Image();
img.src = this.overSrc;
}
};
// 実行
$(function() {
var elem = document.getElementById("rollover");
var rollover = new Rollover(elem, "_over");
// イベント削除したり
rollover.removeEvent();
// 再度つけたりできるよ。
rollover.addEvent();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.