Firefox、Opera、Safari（ついでに IE5.5+）用。以下をページ内の適当な場所に置くだけ。
<script type="text/javascript">/*@cc_on@*/
if (document.implementation &&
document.implementation.hasFeature ('HTML', '1.0') &&
/*@if (@_jscript)
@_jscript_version > 5.5 &&
@else@*/
document.implementation.hasFeature ('MouseEvents', '2.0') &&
/*@end@*/
typeof Function.prototype != 'undefined'
) {
var MouseOverListener = function (event) {
arguments.callee.prototype.handleEvent (event);
return arguments.callee;
};
MouseOverListener.prototype = {
////////////////////////////////////////////////////////////////////////
// ページ内で、左の画像にポイントすると右の画像（ランダムに 1 つ）に切り替わる。
// ポインタを外すと元に戻る。数は自由。
'sample1-1.png' : [ 'sample1-2.png', 'sample1-3.png', 'sample1-4.png' ],
'sample2-1.png' : [ 'sample2-2.png', 'sample2-2.png' ],
'sample3-1.png' : [ 'sample3-2.png', 'sample3-3.png', 'sample3-4.png', 'sample3-5.png' ],
// 設定ここまで
////////////////////////////////////////////////////////////////////////
src : '', idx : 0,
handleEvent : function (event) {
/*@if (@_jscript)
var t = window.event.srcElement;
var r = window.event.fromElement;
@else@*/
var t = event.target;
var r = event.relatedTarget;
/*@end@*/
if (r) {
if (r.nodeName == 'IMG') {
var src = this.parse (r.src);
if (src == this[this.src][this.idx]) {
r.src = this.src;
}
}
}
if (t.nodeName == 'IMG') {
var src = this.parse (t.src);
if (this[src]) {
this.src = src;
this.idx = Math.floor (Math.random () * this[src].length);
t.src = this[src][this.idx];
}
}
},
parse : function (uri) {
var tmp = uri.split (/[/\\]/g);
return tmp[tmp.length - 1];
}
};
document./*@if (@_jscript) attachEvent ('on' + @else@*/
addEventListener (/*@end@*/'mouseover', MouseOverListener, false);
}
</script>
