The JavaScript Image Object is a property of the document object.
The Image object represents an embedded image.
For each <img> tag in an HTML document, an Image object is created.
Notice that images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.
对象的3个特殊事件处理函数:
onabort Loading of an image is interrupted
onerror An error occurs when loading an image
onload An image is finished loading
Properties
- border - The width of the border around the image in pixels.
- complete - A boolean value which identifies whether an image is completely loaded yet.
- height - The read only height of the image in pixels.
- hspace - The read only amount of horizontal space to the left and right sides of the image.
- lowsrc - The read or write string giving the URL of an alternate image for low resolution screen display.
- name - The assigned name of the image.
- prototype - Used for adding user-specified properties to the image.
- src - The URL of the image to be displayed. It is a read/write string.
- vspace - The read only vertical space above and below the image.
- width - The read only width of the image in pixels.
除此外，支持常见的属性和方法.
我们新建一个Image对象
new Image或
new Image([width], [height])
Preloading images
What is it? It is basically loading an image into cache before being used, so whenever we want to use it, bam, it appears instantaneously! Usually, when we load a page, all image are not preloaded-that's why we see these image becoming visible bit by bit. Why would we want to preload an image? Because it is the solution to avoiding having delays in between a change of image in effects like rollover images and image slideshows. So how do we preload images in JavaScript? Simply by reating an instance of the image object in the HEAD section of the page, and assigning the image we wish to preload to its src property. Here's an example:
<head> <script type="text/javascript"> <!--image01= new Image() image01.src="1.gif" image02= new Image() image02.src="3.gif"//--> </script> </head>
- Notice that the preloading of the image takes place within in <head></head> section of your webpage.
- Recall what you've learned-we are creating an instance of the image object (we did something similar for the date object). By using the keyword "new", we have done that. Next we need to tell it what exactly to contain in it, by using the src property and pointing that to the actual path to the image. Repeat this for every image you wish to preload.
rollover 效果
function rollover(src)
{
document.images.example.src=src;
}
<a href="#" onmouseover="rollover('../images/1.jpg')"
onmouseout="rollover('../images/2.jpg')" >
<img src="../images/1.jpg" name="example" />
</a>
完整代码：
html> <head> <script type="text/javascript"> <!-- image01= new Image() image01.src="test.gif" image02= new Image() image02.src="test3.gif" function rollover(imagename, newsrc){ document.images[imagename].src=newsrc.src } //--> </script> </head> <body> <a href="#" onmouseover="rollover('example', image02)" onmouseout="rollover('example', image01)"> <img src="test.gif" name="example"> </a> </body> </html>