prototype.jsでHTMLを汚さないロールオーバースクリプト

はてなブックマークで人気なHTMLを汚さないロールオーバースクリプトをprototype.jsで書き直してみる。

JavaScriptはこんな感じになる

<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
var RollOverImage = Class.create();
RollOverImage.prototype = {
    initialize: function (img){
        this.image=$(img);
        this.originalPath = this.image.src;
        if(arguments[1]) this.setMouseOverImage(arguments[1]);
        if(arguments[2]) this.setMouseDownImage(arguments[2]);
    },
    setMouseOverImage: function (path){
        this.mouseOverImage = new Image();
        this.mouseOverImage.src = path;
        this.image.onmouseover = this.rollover.bind(this);
        this.image.onmouseout = this.reversion.bind(this);
    },
    setMouseDownImage: function (path){
        this.mouseDownImage = new Image();
        this.mouseDownImage.src = path;
        this.image.onmousedown = this.mousedown.bind(this);
        this.image.onmouseup = this.reversion.bind(this);
    },
    rollover: function (){
        this.image.src = this.mouseOverImage.src;
    },
    mousedown: function (){
        this.image.src = this.mouseDownImage.src;
    },
    reversion: function (){
        this.image.src = this.originalPath;
    }
};
</script>

思ったよりすっきりしない。

使い方は

<img src="r1_org.gif" id="hoge" />
<script type="text/javascript">
var hoge = new RollOverImage("hoge");
hoge.setMouseOverImage("r1_over.gif");
hoge.setMouseDownImage("r1_down.gif");
</script>

または、

<img src="r1_org.gif" id="hoge" />
<script type="text/javascript">
new RollOverImage("hoge","r1_over.gif","r1_down.gif");
</script>

このようにコンストラクタに変数を渡しても可。もちろん後者の方がシンプル。

最近rolloverイメージは使わないなぁ、そういえば。
CSSのa:hoverを活用するのが今風では？