Simple Rollover [table]

テーブル版ロールオーバー。

by Tenderfeel

HTML

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

CSS

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

JavaScript

/**
 * Simple Rollover[table]
 * @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("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;
        };
    }
};