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

墨蓝 2022-07-15 07:48 230阅读 0赞

.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哪些元素需要改变。

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关 java 图像加载_图像延迟加载

java 图像加载 Lazy loading images is a practice that's been popular for a decade and for go

朱雀/ 2023年02月21日 14:25/ 0 赞/ 213 阅读

相关 android glide预加载,使用Glide预加载多个图像

我们正在尝试将图像预加载到缓存中，以便稍后加载(图像位于应用程序的 Asset文件夹中) 我们尝试了什么： Glide.with(this) .load(pictu

深碍√TFBOYSˉ_/ 2022年10月18日 11:24/ 0 赞/ 327 阅读

相关【数字图像处理】实验五形态学图像处理

实验五形态学图像处理 1 实验目的 2 实验环境 3 实验内容 4 实验心得 1 实验目的 1、了解形态学的基本理论和方法。 2、掌

谁践踏了优雅/ 2022年10月15日 12:58/ 0 赞/ 265 阅读

相关 python加opencv进行图像处理

越来越觉得python是一强大的工具，处理样本确实不错。最近因项目需要涉及到图片处理，所以开始用python调用opencv，再次觉得python真乃神器也！ imp

浅浅的花香味﹌/ 2022年08月07日 08:48/ 0 赞/ 176 阅读

相关数字图像处理

数字图像处理技术的发展显着，在过去十年，越来越多的信息正通过它的显示和分析传达。The way in which image data is stored and proces

爱被打了一巴掌/ 2022年07月16日 14:38/ 0 赞/ 486 阅读

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

.HTML文件如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

墨蓝/ 2022年07月15日 07:48/ 0 赞/ 231 阅读

相关图像处理

生活中大多数看到的彩色图片都是RGB类型，但是在进行图像处理时，需要用到灰度图、HSV、HSI等颜色制式，opencv提供了cvtColor()函数来实现这些功能。 cvt

川长思鸟来/ 2022年05月27日 09:08/ 0 赞/ 252 阅读

相关图像处理

要写好一个图像处理软件，仅靠自己看书是完全不够的，要多方面学习，借鉴前人的经验，要集思广益、多面出击。如今网络发达，图像学的资料其实也到处都是。只是往往个人能力或精力有限，在短

￡神魔★判官ぃ/ 2022年03月27日 08:20/ 0 赞/ 315 阅读

相关数字图像处理

1 数字图像处理的概念 1.1 什么是图像？定义为二维函数f(x,y)，其中x，y是空间（平面）坐标，f是点（x,y）的幅值。 1.2 什么是数字图像？

女爷i/ 2021年11月10日 06:48/ 0 赞/ 376 阅读

相关 Android 图像处理

这里写自定义目录标题 1、效果图 1、效果图代码写的有点乱，还需重构，图片压缩这块还需要完善

灰太狼/ 2020年11月28日 17:37/ 0 赞/ 876 阅读