rollover.js

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();
});