一、图像对象概述

1、图像对象介绍

文档（Document）对象的images属性返回的是一个数组，数组中的每一个元素都是一个Images对象，该对象就是图像对象。

在加载文档的时候，JS会自动创建一个images[]数组，数组中的元素个数是由<img>标签的个数决定的。

在操作图像的时候，首先应该确定要引用的图片，以下是三种JS引用图像的方式：

通过document.images[]按编号访问
通过dockumet.images[imageName]按名称访问
在支持DOM的浏览器中，使用document.getElementById("imgID")来定位要访问的图片

例如，在页面中有一张图片：

<img name="flower" id="mypic" src="flower.png">

对应以上三种引用方式，分别是：

document.images[0]
document.images["flower"]
document.getElementById("mypic")

2、图像对象属性

图像对象的属性主要描述图片的宽度、高度和边框等信息，如下表所示：

属性	说明
`border`	返回或设置图片边框宽度，以像素为单位
`height`	返回或设置图片高度，以像素为单位
`hspace`	返回或设置图片左边和右边的文字与图片之间的间距，以像素为单位
`lowsrc`	返回或设置图片的低分辨率图片的URL
`name`	返回或设置图片名称
`src`	返回或设置图片URL
`vspace`	返回或设置图片上面和下面的文字与图片之间的间距，以像素为单位
`width`	返回或设置图片宽度
`alt`	返回或设置图片经过图片时显示的文字
`complete`	判断图像是不是完全被加载，如果被完全加载，返回`true`

例子：输出图片的基本信息

怼一个<img>标签，弄一张照片，然后输出照片的基本信息（名称、高度、宽度、等等）

代码如下：

<img src="1.jpg" width="240" height="240" name="wukong" border="3px">
<br><br>
<script type="text/javascript">document.write("图片名称："+document.images[0].name+"<br>");document.write("图片高度："+document.images[0].height+"<br>");document.write("图片宽度："+document.images[0].width+"<br>");document.write("图片边框："+document.images[0].border+"<br>");document.write("图片URL:"+document.images[0].src);
</script>

效果展示：

3、图像对象的事件

Images对象没有可以使用的方法，但是他支持事件，下表列出了Images对象常用事件：

事件	说明
`abort`	当用户放弃加载图片时触发该事件
`load`	成功加载图片时触发该事件
`error`	在加载图片的过程中产生错误时触发该事件
`click`	在图片上单击鼠标时可触发该事件
`dbclick`	在图片上双击鼠标时可触发该事件
`mouseover`	当鼠标移动到图片上发生的事件
`mouseout`	当鼠标移出图片时发生的事件
`mousedown`	在图片上按下鼠标时发生的事件
`mouseup`	在图片上释放鼠标时触发的事件
`mousemove`	在图片上移动鼠标时触发该事件

例子：当鼠标指向图片时实现图片置换

代码如下：

<script type="text/javascript">function changImage(imgName) {document.images[imgName].src="2.jpg";}function resetImage(imgName) {document.images[imgName].src="1.jpg";}
</script>
<img src="1.jpg " width="240" height="240" name="wu1" onmouseover="changImage('wu1')" onmouseout="resetImage('wu1')">

效果如下：

二、图像对象的应用

1、图片的随机显示

为了可以实现图片随机显示的功能，可以使用Math对象的random()函数和floor()函数，例如下面的例子：

例子：实现网站背景的随机变化

十张图片选了我最喜欢的柯基，通过数学随机数函数，获取图片的src，然后展示在网页上，并且通过：

setTimeout("函数名()",时间ms);

来设置函数执行的时间，在下面的gif图中，我调了一下，可以明显的看得出，图片变得很快，代码如下：

<body onload="bianhua()">
<img name="num" id="num1">
<script type="text/javascript">function bianhua() {var src="img/";var i = Math.floor(Math.random()*10);src+=i;src+=".jpg";document.images["num"].src = src;setTimeout("bianhua()",1000);}
</script>
</body>

效果如下：

2、图片置顶

在浏览网站的时候，有一种图片无论我们怎么点击、继续朝下滑，这类图片的位置都不会改变。这就是图片的置顶。

可以通过文档Document对象下的documentElement对象中的scrollTop和scrollLeft属性来获取当前页面中横向和纵向滚动条所卷去的部分的值，然后使用该值定位放入层中的图片的位置，实现图片置顶的功能。

JavaScript 图像对象相关推荐

HTML5/JavaScript 图像边缘羽化— 打造图像处理类库第二步
由于之前略忙,主要也还是因为自己太懒,拖了好久才把这篇博客写完.这篇博客是关于图像边缘羽化(柔化)的,也是 JavaScript 图像处理这一系列的第二篇.上一篇是关于Gamma校正的,有兴趣的朋友可 ...
javascript 图像预装载-实现网页幻灯片放映
对于浏览器装载图像来说,只有在图像发送一个HTTP请求之后,图像才会被浏览器装载,但是如果需要在浏览器中装载多个图片时,比如说在网页制作幻灯片时,在服务器上或许图片会浪费很多时间,且网页打开缓慢.所 ...
javascript中对象_了解JavaScript中的承诺
javascript中对象我向您承诺,到本文结束时,您将更好地了解JavaScript. 我与JavaScript有一种"爱与恨"的关系. 但是尽管如此,JavaScript一直 ...
IronPDF for .NET图像提取,System.Drawing 位图和图像对象
IronPDF for .NET图像提取,System.Drawing 位图和图像对象 IronPDF for .NET 允许开发人员在 C#.F# 和 VB.Net 中为 .NET Core 和 . ...
Python+OpenCV 图像处理系列（8）—— Numpy 对象及图像对象创建与赋值
1. Numpy 相关知识 1.1 Ndarray 对象在了解 OpenCV 的图像对象之前我们先对 NumPy 的基础知识做一回顾,方便我们后续更进一步理解图像对象的一系列操作. In [2]: ...
JavaScript 复制对象与Object.assign方法无法实现深复制
在JavaScript这门语言中,数据类型分为两大类:基本数据类型和复杂数据类型.基本数据类型包括Number.Boolean.String.Null.String.Symbol(ES6 新增),而复 ...
javascript 遍历对象
javascript 遍历对象 <!DOCTYPE html> <html lang="en"><head><meta charset=& ...
javascript定义对象写法(个人整理)
javascript定义对象的几种简单方法 1.构造函数方式,全部属性及对象的方法都放在构造方法里面定义优点:动态的传递参数缺点:每创建一个对象就会创建相同的方法函数对象,占用大量内存 funct ...
javascript笔记：深入分析javascript里对象的创建（上）续篇
今天回来一看我的博客居然有这么多人推荐真是开心极了,看来大家对我的研究有了认可,写博客的动力越来越大了,而且我发现写javascript在博客园里比较受欢迎,写java的受众似乎少多了,可能博客园里j ...
JavaScript Date 对象
JavaScript Date 对象 JavaScript Date 对象 http://www.w3school.com.cn/jsref/jsref_obj_date.asp 日期处理 Date ...

JavaScript 图像对象

文章目录