/** * Simple Rollover[single] * @author Tenderfeel([email protected]) * @ver 1.0 * @HOME http://tenderfeel.xsrv.jp/javascript/271/ * @license The MIT License */ window.onload =function(){ var myImg = document.getElementById("thumb").getElementsByTagName("img"); var regrep = "_thumb"; var newimg = new Array(); for (var i = 0; i <myImg.length; i++) { newimg[i] = new Image(); newimg[i].src = myImg[i].src; myImg[i].onmouseover =function() { var href = this.src.replace(regrep,""); document.getElementById('rollover_view').src=href; } } }
<div id="rollover"> <p><img src="http://demo.webtecnote.com/simple-rollover/01.jpg" id="rollover_view" alt="image1" width="415" height="295"></p> <ul id="thumb"> <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/01_thumb.jpg" alt="thumb1" width="150" height="45"></a></li> <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/02_thumb.jpg" alt="thumb2" width="150" height="45"></a></li> <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/03_thumb.jpg" alt="thumb3" width="150" height="45"></a></li> <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/04_thumb.jpg" alt="thumb4" width="150" height="45"></a></li> <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/05_thumb.jpg" alt="thumb5" width="150" height="45"></a></li> <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/06_thumb.jpg" alt="thumb6" width="150" height="45"></a></li> </ul> </div>
ul,li{ padding:0;margin:0; } div#rollover { height:295px; width:580px; } div#rollover p { float:left; margin:0; } div#rollover ul { float:right; width:150px; list-style:none; } div#rollover li { height:50px; } div#rollover a img { border:0; }