ねこきっくぱんちのメモ帳

ITに関することいろいろめも。たまにアニメ。

JavaScript008　画像マウスオーバー時にメイン画像を切り替える

JavaScript
画像マウスオーバー時にメイン画像を切り替える

f:id:neko_kick_panch:20170514165914p:plain
f:id:neko_kick_panch:20170514170305j:plain

<!-- 省略 -->
<script>
function myChgPic(myPicURL){
  document.getElementById('myBigImage').src = myPicURL;
}
function myRtnPic(rtnPicURL){
  document.getElementById('myBigImage').src = rtnPicURL;
}
</script></head>

<body>
<div class="container">
<h1>サムネールにマウスが乗るとメイン画像が変更される</h1>

<div class="main">
<ul>
<li><a href="#" onmouseover="myChgPic('img/p1_300.jpg')" onmouseout="myRtnPic('img/main.jpg')"><img src="img/p1.jpg" alt="アルパカ"></a></li>
<li><a href="＃" onmouseover="myChgPic('img/p2_300.jpg')" onmouseout="myRtnPic('img/main.jpg')"><img src="img/p2.jpg" alt="カワウソ"></a></li>
<li><a href="#" onmouseover="myChgPic('img/p3_300.jpg')" onmouseout="myRtnPic('img/main.jpg')"><img src="img/p3.jpg" alt="グレムリン"></a></li>
<li><a href="#" onmouseover="myChgPic('img/p4_300.jpg')" onmouseout="myRtnPic('img/main.jpg')"><img src="img/p4.jpg" alt="フェレット"></a></li>
<li><a href="#" onmouseover="myChgPic('img/p5_300.jpg')" onmouseout="myRtnPic('img/main.jpg')"><img src="img/p5.jpg" alt="ライオン"></a></li>
</ul>
<img class="zoo" src="img/main.jpg" alt="動物園ZOO" id="myBigImage">
</div><!-- .main -->

</div><!-- .container -->
</body></html>

ポイント
・マウスオーバー/アウトさせた際に、メソッドを実行する。