js ロールオーバー 画像置換

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>ウェブデザイン技能検定公式サイト</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
	<div id="header">
		<div id="banner">
			<a href="#">
				<img src="img/bnr-top-page.gif" width="800px" height="40px" alt="ウェブデザイン技能競技会 世界を目指すウェブデザイナーの登竜門" />
			</a>
		</div>

		<div id="global_nav">
			<ul class="clearfix">
				<li>
					<a href="#">
						<img class="menu" src="img/img-global-nav-01-nomal.gif" width="200px" height="40px" alt="HOME" />
					</a>
				</li>
				<li>
					<a href="#">
						<img class="menu" src="img/img-global-nav-02-nomal.gif" width="200px" height="40px" alt="概要" />
					</a>
				</li>
				<li>
					<a href="#">
						<img class="menu" src="img/img-global-nav-03-nomal.gif" width="200px" height="40px" alt="ウェブデザイン技能検定" />
					</a>
				</li>
				<li>
					<a href="#">
						<img class="menu" src="img/img-global-nav-04-nomal.gif" width="200px" height="40px" alt="受検申請" />
					</a>
				</li>
			</ul>
		</div>
	</div>

	<div id="content_area">
		<p>(コンテンツエリア)</p>
	</div>

	<div id="footer">
		<p><a href="#">HOME</a> | <a href="#">概要</a> | <a href="#">ウェブデザイン技能検定</a> | <a href="#">受検申請</a></p>
	</div>
</div>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>
window.addEventListener('DOMContentLoaded', rollHover, false);
function rollHover() {
	var menu = document.getElementsByClassName('menu');
	for(var i = 0; i < menu.length; i++) {
		if(menu[i].getAttribute('src').match('nomal')) {
		console.log(i);
			menu[i].onmouseover = function() {
				this.setAttribute('src', this.getAttribute('src').replace('nomal', 'hover'));
			}
			menu[i].onmouseout = function() {
				this.setAttribute('src', this.getAttribute('src').replace('hover', 'nomal'));
			}
		}
	}

}
body {
	margin: 0;
}

#wrap {
	width: 800px;
	margin: 0 auto;
}

#header #banner {
	height: 40px;
}

#header #global_nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#header #global_nav ul li {
	float: left;
}
#header #global_nav ul li a {
	display: block;
	height: 40px;
}
#header #global_nav ul li a img {
	border: none;
}

#footer p {
	text-align: center;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
PAGE TOP