マウスオーバー時に画像を切り替える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');
}

JavaScript逆引きリファレンス一覧へ戻る