webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

onClickによる画像置換

f:id:yachin29:20151003155117p:plain


今回はサムネイルをクリックしたら「mainImage」の画像のパスが変わる、という動きです。前回の画像置換は自分自身に対して命令したかったので「this」を使いましたが、今回は「mainImage」に対して命令をします。


index.html

<!DOCTYPE HTML>
<html lang="ja">
<meta charset="utf-8">
<title>Javascriptによる画像置換2</title>
<link href="reset.css" rel="stylesheet">
</head>

<body>
<ul>
<li><img src="img/01.png" alt="" name="mainImage"></li>

<li class="thum"><img src="img/s01.png" alt="" onClick="mainImage.src='img/01.png'"></li>

<li class="thum"><img src="img/s02.png" alt="" onClick="mainImage.src='img/02.png'"></li>

<li class="thum"><img src="img/s03.png" alt="" onClick="mainImage.src='img/03.png'"></li>

<li class="thum"><img src="img/s04.png" alt="" onClick="mainImage.src='img/04.png'"></li>

<li class="thum"><img src="img/s05.png" alt="" onClick="mainImage.src='img/05.png'"></li>

</ul>

</div>

</body>
</html>