JavaScriptを使って簡単な画像置換

授業　演習問題 JavaScript

  • onMouseOver = " this.src = ' images/◎◎.jpg ' "
  • onMouseOut = " this.src = ' images/◎◎.jpg ' "
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>画像置換</title>
<link rel="stylesheet" href="style.css" media="all">
</head>

<body>
<div>
<h1>風景写真</h1>
<p>※画像上へマウスを移動すると、その画像をカラーで表示します。</p>
<ul>
<li><img src="img/img01.jpg" width="300" height="200" alt="" onMouseOver="this.src='img/img01_on.jpg'" onMouseOut="this.src='img/img01.jpg'"></li>
<li><img src="img/img02.jpg" width="300" height="200" alt="" onMouseOver="this.src='img/img02_on.jpg'" onMouseOut="this.src='img/img02.jpg'"></li>
<li><img src="img/img03.jpg" width="300" height="200" alt="" onMouseOver="this.src='img/img03_on.jpg'" onMouseOut="this.src='img/img03.jpg'"></li>
<li ><img src="img/img04.jpg" width="300" height="200" alt="" onMouseOver="this.src='img/img04_on.jpg'" onMouseOut="this.src='img/img04.jpg'"></li>
<li ><img src="img/img05.jpg" width="300" height="200" alt="" onMouseOver="this.src='img/img05_on.jpg'" onMouseOut="this.src='img/img05.jpg'"></li>
<li ><img src="img/img06.jpg" width="300" height="200" alt="" onMouseOver="this.src='img/img06_on.jpg'" onMouseOut="this.src='img/img06.jpg'"></li>
</ul>
</div>
</body>
</html>

@charset "utf-8";
body,div,ul,li,h1,p{
  margin:0;
  padding:0;
}

ul{
  list-style:none;
}
body{
  color:#fff;
}
div{
  margin:0 auto;
  padding:20px;
  overflow:hidden;
  width:630px;
  height:auto;
  background:#000;
}
li{
  float:left;
  margin-left: 10px;
  margin-bottom:10px;
}
h1{
  margin-bottom:20px;
  text-align:center;
}
p{
  margin-bottom:20px;
  text-align:center;
}