/** * Simple Rollover[table] * @author Tenderfeel(tenderfeel@gmail.com) * @ver 1.0 * @HOME http://tenderfeel.xsrv.jp/javascript/271/ * @license The MIT License */ window.onload = function() { var myImg = document.getElementById("rollover").getElementsByTagName("img"); var regrep = "_thumb"; var newimg = []; for (var i = 1; 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; }; } };
<table width="580" id="rollover"> <tr><td rowspan="6"><img src="http://demo.webtecnote.com/simple-rollover/01.jpg" id="rollover_view" alt="image1" width="415" height="295"></td> <td class="thumb"><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/01_thumb.jpg" alt="thumb1" width="150" height="45"></a></td> </tr> <tr> <td class="thumb"><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/02_thumb.jpg" alt="thumb2" width="150" height="45"></a></td> </tr> <tr> <td class="thumb"><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/03_thumb.jpg" alt="thumb3" width="150" height="45"></a></td> </tr> <tr> <td class="thumb"><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/04_thumb.jpg" alt="thumb4" width="150" height="45"></a></td> </tr> <tr> <td class="thumb"><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/05_thumb.jpg" alt="thumb5" width="150" height="45"></a></td> </tr> <tr> <td><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/06_thumb.jpg" alt="thumb6" width="150" height="45"></a></td> </tr> </table>
td { padding:0;margin:0; } table#rollover { margin-bottom:10px; height:295px; border-collapse:collapse; border:0; } table#rollover td.thumb { padding-bottom:3px; } table#rollover a img { border:0; }