単純なJavaScriptで画像置換

JavaScript 授業




☆★データーでの確認★☆

単純なJavaScript


  • マウスが乗ったとき(Over)、マウスが離れたとき(Out)を使う


<< 記述 >>

onMouseOver="this.src='images/◎◎.jpg'"
onMouseOut="this.src='images/◎◎.jpg'"

ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>単純なJavaScript</title>
<style>

* {
margin: 0;
padding: 0;
}

ul {
margin: 30px;
list-style-type: none;
}
	
li {
display: inline;
margin: 0;
padding: 0;
}

</style>
</head>
<body>

<ul>
<!-- [ &lt;!----&gt; ]で[ li ]をつなぎ[ display:inline ]でできた隙間を埋める -->
<li><a href="#"><img src="img5/btn01.png" width="" height="" alt="" onMouseOver="this.src='img5/btn_o.png'"
onMouseOut="this.src='img5/btn01.png'"></a></li><!--
--><li><a href="#"><img src="img5/btn02.png" width="" height="" alt="" onMouseOver="this.src='img5/btn02_o.png'"
onMouseOut="this.src='img5/btn02.png'"></a></li><!--
--><li><a href="#"><img src="img5/btn03.png" width="" height="" alt="" onMouseOver="this.src='img5/btn03_o.png'"
onMouseOut="this.src='img5/btn03.png'"></a></li><!--
--><li><a href="#"><img src="img5/btn04.png" width="" height="" alt="" onMouseOver="this.src='img5/btn04_o.png'"
onMouseOut="this.src='img5/btn04.png'"></a></li><!--
--><li><a href="#"><img src="img5/btn05.png" width="" height="" alt="" onMouseOver="this.src='img5/btn05_o.png'"
onMouseOut="this.src='img5/btn05.png'"></a></li><!--
--><li><a href="#"><img src="img5/btn06.png" width="" height="" alt="" onMouseOver="this.src='img5/btn06_o.png'"
onMouseOut="this.src='img5/btn06.png'"></a></li>

</body>
</html>

ブラウザで表示【 Chrome 】