ロールオーバーの外部ファイル化

質問

オンマウスにすると画像変化し、マウスを離すと元に戻る設定にしたいです。
複数の画像をロールオーバーさせたい場合、今までは外部ファイルに
↓↓
if (document.images) {
// section on
// test1
var test1on = new Image();
test1on.src = "img/test-02-02.jpg";
var test1off = new Image();
test1off.src = "img/test-01.jpg";

// test3
var test3on = new Image();
test3on.src = "img/test-03-03.jpg";
var test3off = new Image();
test3off.src = "img/testl-03.jpg";

// section off
}

// point section
function On(id) {
if (document.images) {
document.images[id].src = eval(id + 'on.src');
}
}

// out section
function Off(id) {
if (document.images) {
document.images[id].src = eval(id + 'off.src');
}
}

の様な記述をし、
<a href="1.html" onmouseover="On('test1')" onmouseout="Off('test1')"><img src="img/test-01.jpg" alt="img" id="test1" /></a>
<a href="3.html" onmouseover="On('test3')" onmouseout="Off('test3')"><img src="img/test-03.jpg" alt="img" id="test3" /></a>

として表示させていたのですが、今回<a href～　を使わないで<img～のみで構築したいのです。加えて、<img～の記述を上記の様にhtml内に長く書くのでなく、出来るだけシンプルにしたいのですが、どの様な改善を加えればよろしいのでしょうか。

分かりにくい説明ですが、ご理解ご指導の程よろしくおねがいします。

回答No.1

yuu_x · ベストアンサー

ロールオーバーのサンプルなら探せばいくらでもないですか？

下は参考までに。

オーバー時の画像は名前に _on を付加
ex) test-01.jpg → test-01_on.jpg

//@cc_on
/*@if (@_jscript)
document.attachEvent && document.attachEvent('onmouseover', function(evt){
evt.toElement && evt.toElement.nodeName == 'IMG' && (evt.toElement.src = evt.toElement.src.replace(/\.(\w+)$/, '_on.$1'));
evt.fromElement && evt.fromElement.nodeName == 'IMG' && (evt.fromElement.src = evt.fromElement.src.replace(/_on\.(\w+)$/, '.$1'));
});
@else@*/
document.addEventListener && document.addEventListener('mouseover', function(evt){
evt.target.nodeName == 'IMG' && (evt.target.src = evt.target.src.replace(/\.(\w+)$/, '_on.$1'));
evt.relatedTarget && evt.relatedTarget.nodeName == 'IMG' && (evt.relatedTarget.src = evt.relatedTarget.src.replace(/_on\.(\w+)$/, '.$1'));
}, false);
/*@end@*/

上のこーどを、エラーにならない場所に置くだけです。