joose_rollover.js

Class("Rollover", {
    // プロパティの設定
    has: {
        namespace: {
            is: "ro",
            init: "Rollover"
        },
        elem: {
            is: "rw"
        },
        suffix: {
            is: "rw",
            init: "_o"
        },
        baseSrc: {
            is: "rw",
            init: function() { return this.elem.getAttribute("src") }
        },
        overSrc: {
            is: "rw",
            init: function() { return this.elem.getAttribute("src").replace(/\.\w+$/, this.suffix + "$&") }
        }
    },

    // コンストラクタ
    after: {
        initialize: function() {
            this.addEvent();
            this.preLoad();
        },
    },

    // メソッド
    methods: {
        changeToOver: function() {
            this.elem.src = this.getOverSrc();
        },

        changeToNormal: function() {
            this.elem.src = this.getBaseSrc();
        },

        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.getOverSrc;
        }
    }
});

$(function() {
    var elem = document.getElementById("rollover");
    var rollover = new Rollover({elem: elem, suffix: "_over"});
});