WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

onClickによる画像置換

f:id:yachin29:20151003155117p:plain



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>

スタイルシート

@charset "UTF-8";

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;
}


/*レイアウト*/
body {
  background: #222;
}
ul {
  width: 615px;/*615px+10px*/
  overflow: hidden;
  margin: 50px auto 0;
  background: #FFF;
  padding: 5px;
}

li{
  float: left;
	margin: 5px;
}
.thum {
  cursor: pointer;
}