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; }