【JavaScript】サムネイルを押すと、その画像に切り替える画像一覧
サムネイルにマウスポンタをのせるとと、下の大きな画像を切り替える画像一覧をつくります。
name属性を使い下の画像だけを変える
画像の置換の方法は前回の記事の方法を使います。
大きな画像の中にname属性を入れることで、imgタグに指定してある画像を切り替えることができます。
ソース
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>画像置換</title> <style> html, body, img{ padding: 0; margin: 0; } img{ border: none; vertical-align: bottom; } .imgbox{ width: 600px; padding: 10px; margin: 10px auto; } .thum{ text-align: center; } .thum img{ margin-right: 10px; } .thum img:last-child{ margin-right: 0; } .bigimg{ width: 600px; height: 440px; background: url(img/bg.png) no-repeat center 0; text-align: center; padding-top: 20px; } </style> </head> <body> <div class="imgbox"> <div class="thum"> <img src="img/thum_01.png" alt="" onmouseover="mainimg.src='img/01.png'" onmouseout="mainimg.src='img/01.png'"><img src="img/thum_02.png" alt="" onmouseover="mainimg.src='img/02.png'" onmouseout="mainimg.src='img/02.png'"><img src="img/thum_03.png" alt="" onmouseover="mainimg.src='img/03.png'" onmouseout="mainimg.src='img/03.png'"><img src="img/thum_04.png" alt="" onmouseover="mainimg.src='img/04.png'" onmouseout="mainimg.src='img/04.png'"><img src="img/thum_05.png" alt="" onmouseover="mainimg.src='img/05.png'" onmouseout="mainimg.src='img/05.png'"> </div> <div class="bigimg"> <img src="img/01.png" name="mainimg"> </div> </div> </body> </html>