2014-10-11 2014-11-14 2014-11-14 画像置換 JavaScript マンガで分かる JavaScriptプログラミング講座 JavaScriptで画像置換 JavaScript Reference:onMouseOver CSSは必要なし! onmouse属性を使った簡単なロールオーバーの作り方 要素に直接記述(インライン) onmouseover = " this.src = ' img/◎◎.jpg ' " onmouseout = " this.src = ' img/◎◎.jpg ' " サムネールで画像置換 <!DOCTYPE html> <htmllang="ja"> <head> <metacharset="utf-8"> <title>JavaScriptによる画像置換</title> <style> html, body, div, img { margin: 0; padding: 0; } .imgBox { width: 600px; margin: 50px auto; } .thumnail { width: 610px; text-align: center; } .thumnail img { margin-right: 10px; } .mainImg { width: 600px; height: 600px; margin-top: 10px; padding-top: 15px; background: url(img/bg.jpg) no-repeat center -15px; text-align: center; } </style> </head> <body> <divclass="imgBox"> <divclass="thumnail"> <imgsrc="img/thum01.png"alt=""><imgsrc="img/thum02.png"alt=""><imgsrc="img/thum03.png"alt=""><imgsrc="img/thum04.png"alt=""><imgsrc="img/thum05.png"alt=""> </div> <divclass="mainImg"><imgsrc="img/main01.png"alt=""></div> </div> </body> </html> 画像置換を記述 <!DOCTYPE html> <htmllang="ja"> <head> <metacharset="utf-8"> <title>JavaScriptによる画像置換</title> <style> html, body, div, img { margin: 0; padding: 0; line-height: 1.0; } .imgBox { width: 600px; margin: 50px auto; } .thumnail { width: 610px; text-align: center; } .thumnail img { margin-right: 10px; } .mainImg { width: 600px; height: 600px; margin-top: 10px; padding-top: 15px; background: url(img/bg.jpg) no-repeat center -15px; text-align: center; } </style> </head> <body> <divclass="imgBox"> <divclass="thumnail"> <imgsrc="img/s01.jpg"alt=""onMouseOver="mainImage.src='img/01.jpg'"onMouseOut="mainImage.src='img/01.jpg'"><imgsrc="img/s02.jpg"alt=""onMouseOver="mainImage.src='img/02.jpg'"onMouseOut="mainImage.src='img/01.jpg'"><imgsrc="img/s03.jpg"alt=""onMouseOver="mainImage.src='img/03.jpg'"onMouseOut="mainImage.src='img/01.jpg'"><imgsrc="img/s04.jpg"alt=""onMouseOver="mainImage.src='img/04.jpg'"onMouseOut="mainImage.src='img/01.jpg'"><imgsrc="img/s05.jpg"alt=""onMouseOver="mainImage.src='img/05.jpg'"onMouseOut="mainImage.src='img/01.jpg'"> </div> <divclass="mainImg"><imgsrc="img/01.jpg"alt=""name="mainImage"></div> </div> </body> </html> メイン画像とサムネールを作る