javascript处理图像（预加载处理图像）

最新推荐文章于 2022-12-08 17:13:33 发布

刘老shi

最新推荐文章于 2022-12-08 17:13:33 发布

阅读量434

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/fighterna/article/details/53083636

版权

.HTML文件如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Multiple Links, Multiple Rollovers</title>
    <script type="text/javascript" src="script06.js"></script>
</head>
<body bgcolor="#EECC99">
    <img src="images/DaVinci.jpg" width="144" height="219" alt="DaVinci" align="right" hspace="50" />
    <img src="images/leoText.gif" width="375" height="26" alt="Leonardo's Inventions" />
    <a href="flyPage.html" class="textField" id="flyer"><img src="images/flyer.gif" width="293" height="165" border="0" alt="Flying Machine" vspace="10" id="flyerImg" /></a><br clear="right" />
    <img src="images/bg.gif" width="208" height="27" id="textField" alt="Text Field" align="right" vspace="20" />
    <a href="tankPage.html" class="textField" id="tank"><img src="images/tank.gif" width="325" height="92" border="0" alt="Tank" id="tankImg" /></a><br />
    <a href="heliPage.html" class="textField" id="helicopter"><img src="images/helicopter.gif" width="224" height="160" border="0" alt="Helicopter" id="helicopterImg" /></a>
</body>
</html>

为方便起价，没有将.HTML文件与.CSS文件分离。.js文件如下：

window.onload = rolloverInit;

function rolloverInit() {
    for (var i=0; i<document.links.length; i++) {
        var linkObj = document.links[i];
        if (linkObj.className) {
            var imgObj = document.getElementById(linkObj.className);
            if (imgObj) {
                setupRollover(linkObj,imgObj);
            }
        }
    }
}

function setupRollover(thisLink,textImage) {
    thisLink.imgToChange = new Array;
    thisLink.outImage = new Array;
    thisLink.overImage = new Array;

    thisLink.imgToChange[0] = textImage;
    thisLink.onmouseout = rollOut;
        thisLink.onmouseover = rollOver;

    thisLink.outImage[0] = new Image();
    thisLink.outImage[0].src = textImage.src;

    thisLink.overImage[0] = new Image();
    thisLink.overImage[0].src = "images/" + thisLink.id + "Text.gif";

    var rolloverObj = document.getElementById(thisLink.id + "Img");
    if (rolloverObj) {
        thisLink.imgToChange[1] = rolloverObj;

        thisLink.outImage[1] = new Image();
        thisLink.outImage[1].src = rolloverObj.src;

        thisLink.overImage[1] = new Image();
        thisLink.overImage[1].src = "images/" + thisLink.id + "_on.gif";
    }
}

function rollOver() {
    for (var i=0;i<this.imgToChange.length; i++) {
        this.imgToChange[i].src = this.overImage[i].src;
    }
}

function rollOut() {
    for (var i=0;i<this.imgToChange.length; i++) {
        this.imgToChange[i].src = this.outImage[i].src;
    }
}

该脚本处理了多个翻转器。
设置imgToChange属性是为了告诉javascript哪些元素需要改变。

刘老shi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript处理图像（预加载处理图像）

.HTML文件如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title
复制链接

扫一扫