脚本化图片

下面是一段基于 JavaScript 脚本设置图片的示例代码：

/**
 * 优雅的图片翻转实现方式
 *
 * <img src="normal_image.png" data-rollover="rollover_image.png"/>
 */
window.addEventListener("load", function () {
    for (var i = 0; i < document.images; i++) {
        var img = document.images[i];
        var rollover = img.getAttribute("data-rollover");
        if (!rollover) {
            continue;
        }
    
        // 确保将翻转的图片先缓存起来
        (new Image()).src = rollover;
    
        // 定义一个属性来标识默认的图片URL
        img.setAttribute("data-rollout", img.src);
    
        img.onmouseover = function () {
            this.src = this.getAttribute("data-rollover");
        };
    
        img.onmouseout = function () {
            this.src = this.getAttribute("data-rollout");
        };
    }
}, false);