<div class="container">
	<div class="rollover">
		<a href="javascript:void(0)"><img src="https://blog.kannart.co.jp/wp-content/uploads/2017/06/img_off.png" alt="" width="150" height="150" class="rollover_img"></a>
	</div>
</div>
body {
	font-size: 14px;
	line-height: 1.5;
	color: #333;
}
a {
	text-decoration: none;
	color: #333;
}
img {
	vertical-align: bottom;
}
.clearfix {
	display: table;
	clear: both;
}
.container {
	width: 200px;
	margin: 0 auto;
	padding: 50px;
	background: #fff;
}
/* 画像ロールオーバー */
.rollover {
	text-align: center;
	img {
		cursor: pointer;
	}
}
(function() {
	'use strict';
	
	var rolloverImgs,
			suffix,
			suffixReplace;
	
	// マッチしたclass名を持つ要素を取得、接尾辞変数の定義
	rolloverImgs = document.querySelectorAll('.rollover_img');
	suffix = '_off';
	suffixReplace = '_on';
	
	if (rolloverImgs) {
		for (var i = 0; i < rolloverImgs.length; i++) {
			// マウスホバー時「_on」に切り替える
			rolloverImgs[i].onmouseover = function() {
				if (this.getAttribute('src').match(suffix)) {
					this.setAttribute('src', this.getAttribute('src').replace(suffix, suffixReplace));
				}
			}
			// マウスアウト時「_off」に切り替える
			rolloverImgs[i].onmouseout = function() {
				if (this.getAttribute('src').match(suffixReplace)) {
					this.setAttribute('src', this.getAttribute('src').replace(suffixReplace, suffix));
				}
			}
		}
	}
}());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.