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

墨蓝 2022-07-15 07:48 332阅读 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 条评论，332人围观）

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

相关阅读

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

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

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

相关【图像处理】数字图像处理之颜色

00. 目录文章目录 00. 目录 01. 什么是颜色 02. 颜色的数字化 03. 常见颜色模型

青旅半醒/ 2023年01月18日 12:22/ 0 赞/ 41 阅读

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

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

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

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

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

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

相关番外1. OpenCV 图像处理之图片加载与视频加载

本系列专栏写作方式交代本系列专栏写作将采用首创的问答式写作形式，快速让你学习到 OpenCV 的初级、中级、高级知识。 1. OpenCV 中图片是如何加载与显示的

淩亂°似流年/ 2022年08月29日 10:04/ 0 赞/ 218 阅读

相关 python加opencv进行图像处理

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

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

相关数字图像处理

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

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

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

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

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

相关图像处理

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

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

相关图像处理

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

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