マウスオーバー時に画像を切り替える2
画像のファイル名は予め拡張子の手前に「_out」と「_over」を含めたものを用意するという、フォーマットを固定化したバージョンです。
デモ
サンプルコード
HTML
<img src="img/sample_out.gif" width="100" height="25" alt="" id="sample" />JavaScript
/**
* 画像の切り替え
* @param {Element|Node} _this 画像の要素
* @param {"over"|"out"} mode オーバーかアウトか
*/
var changeImage = function(_this, mode) {
var s, r;
if (mode === 'over') {
s = '_out',
r = '_over';
} else if (mode === 'out') {
s = '_over';
r = '_out';
}
if (s && r) _this.src = _this.src.replace(s, r);
};
var imgElem = document.getElementById('sample');
imgElem.onmouseover = function() {
changeImage(this, 'over');
}
imgElem.onmouseout = function() {
changeImage(this, 'out');
}