DevGuru JavaScript OBJECT: Image



			OBJECT: Image new Image([width,] [height]) The Image object is an image on an HTML form, created by using the HTML 'IMG' tag. Any images created in a document are then stored in an array in the document.images property, and it is from here that they are accessed. If you have specified a name for an image created using the HTML 'IMG' tag, you can use that name when you index the image in the images array. You can also use the Image constructor and the new operator to create an image object which can then be displayed within an existing cell. The main use of this is to load an image from the network so that it is in cache before it needs to be displayed. For example the following code creates an Image object called MyImage: Code: myImage = new Image() myImage.src = "C:/Personal/Mountain.gif" ...you could then have this image replace an existing image River on, say, the click of a button: Code: onClick="javascript:void(document.River.src = myImage.src)" When one Image object replaces another, as in the above example, it cannot change the width and height properties of it (these are read-only for this object) and the browser displays the image with the dimensions set in the IMG tag. JavaScript can also be used to create animation by repeatedly changing the value of the src property. This isn't as fast as GIF animation because Javascript has to load each indivual frame as a separate file, whereas with GIF animation all the frames are contained in one file. PROPERTIES border Property The border property is read-only, and is a string stating the width of the border of an image in pixels. For an image created using the Image constructor, this is 0. Syntax: Image.border complete Property The complete property is read-only and returns a Boolean value indicating whether or not the browser has completed loading the image. Syntax: Image.complete height Property The height property is read-only, and is a string stating the HEIGHT attribute of an IMG tag in pixels. Where an image has been created using the Image constructor, the height is of the image itself, not the HEIGHT value of the display. Syntax: Image.height hspace Property The hspace property is read-only and specifies the HSPACE value of the IMG tag, which is the number of pixels space between the left and right margins of an image and surrounding text. For an image created using the Image constructor, the value of this property is null. Syntax: Image.hspace lowsrc Property The lowsrc property specifies the URL of a low-resolution version of an image relating to the LOWSRC attribute of an IMG tag. A browser first loads a low-resolution version before replacing it with the high-resolution version of the src property. Syntax: Image.lowsrc name Property The name property is read-only and reflects the NAME attribute of an IMG tag. If the Image object has been created by using the Image constructor, the value of this property is null. Syntax: Image.name src Property The src property is a string representing the URL of an image and reflects the SRC attribute of an IMG tag. The src property can be altered at any time, but when you do so the new image (if not the same size) is scaled to fit the height and width attributes of the IMG tag. Also, the loading of any other image into that cell is aborted, so the Lowsrc property should be altered before setting the src property. Syntax: Image.src vspace Property The vspace property is read-only and specifies the VSPACE value of the IMG tag, which is the number of pixels space between the top and bottom margins of an image and surrounding text. For an image created using the Image constructor, the value of this property is null. Syntax: Image.vspace width Property The width property is read-only, and is a string stating the WIDTH attribute of an IMG tag in pixels. Where an image has been created using the Image constructor, the width is of the image itself, not the WIDTH value of the display. Syntax: Image.width METHODS handleEvent Method The handleEvent method is used to evoke the handler for a specified event. Syntax: Image.handleEvent(event) EVENT HANDLERS All the event handlers that are available with the Image object also have an equivalent property (spelled entirely in lower case letters) which can be used to set an image's event-handlers when created using the Image constructor. Assume you have a function called MyFunction which you want to set to the onload event-handler for an image called Ocean, you could accomplish this with the following statement: Code: Ocean.onload = myFunction The same applies for all the following event-handlers. onAbort EventHandler The onAbort event handler is used to execute certain JavaScript code whenever an abort event occurs, such as when the user stops the loading of an image by clicking a link or a Stop button. Syntax: onAbort = "myJavaScriptCode" onError EventHandler The onError event handler executes certain Javascript code whenever a Javascript syntax or runtime error occurs during the loading of a document or image. Syntax: onError = "myJavaScriptCode" onKeyDown EventHandler The onKeyDown event handler is used to execute certain JavaScript code whenever the user depresses a key. Syntax: onKeyDown = "myJavaScriptCode" onKeyPress EventHandler The onKeyPress event handler executes JavaScript code whenever the user presses or holds down a key Syntax: onKeyPress = "myJavaScriptCode" onKeyUp EventHandler The onKeyUp event handler executes JavaScript code whenever the user releases a depressed key. Syntax: onKeyUp = "myJavaScriptCode" onload EventHandler The onload event handler is used to execute JavaScript code whenever the browser has finished loading a window or all of the frames within a FRAMESET tag. Syntax: onload ="myJavaScriptCode" NOTE: The event handlers onClick, onMouseOut and onMouseOver can also be used with the Internet Explorer browser, but not with Netscape. You can, however, use these event handlers in conjunction with the Image object with Netscape, if you define an Area object for the image, or if the IMG tag is placed within a Link object.