| Lesson 9: Images Today we will discuss how JavaScript allows us to interact with the user by altering the images the page displays. By altering the various properties of an image with JavaScript, we can signigicantly change the page right in front of the user's eyes. While all read/write properties of an image can be altered with JavaScript on most current browsers (4.0 and up), WebTv's browser is limited to changing the src property (src=URL of image), however it can access the values of all other image properties and treats them as read only. While somewhat limited for WebTv, the ability to change the image being displayed on a webpage can create an unlimited number of effects. 1) Image Array and Constructor (preloading) Before you can mainpulate images, you need to insure the image file is loaded. There is no actual graphical image being manipulated by JavaScript coding, but rather the src property of the image object allows you to alter the file of graphical data being displayed (this is one of the basic differences between Java and JavaScript, Java has the ability to create and render graphics on the fly, while JavaScript can only change image files [and the imaeg size on some non-webtv browsers]). This means changing the graphical file by altering the src attribute will cause a new image's graphical file to be loaded into the browser in the same slot on the page as the pervious image, which of course takes time while the new file is loaded. However, by using the Image() constructor, you can define the list of images the page will need and JavaScript will load the graphical files into your browser's cache. Once a graphical file is cached, it can be swapped with an existing image instantly with no wait time for a new file. Example Image Swap: A) Pre-Define the images[] array- var images=new Array(); This allows us to manipulate the images array before it would normally be created by the normal loading of the HTML document. B) Define each slot of the array used as an image with the Image() constructor- images[n]=new Image(); This defines the object contained by the images array at the nth position as an Image object with all the properties available. C) Set the src property of each image[] images[n].src='URL_Of_Image_File'; This presets the nth image on the page to a certain graphical file, and begins the download of all data from the file. While use of this sort of preloading will help to insure all images required are loaded when needed, it DOES NOT speed up the loading of the HTML document as a whole, since all files needed for the document still must be loaded and take just as much time if you load them ahead of time with a preloaded or later with normal HTML tags or javascript statements. The following are some other properties you can access from a loaded image with the WebTv browser: images[n].border images[n].complete images[n].height images[n].width images[n].name images[n].hspace images[n].vspace Note-all above properties are set as HTML attributes except "complete" which is a boolean status indicator (true if the image is loaded). 2) Event Handlers There are three event handlers for an image object: A) onAbort fires when the user stops the loading process (computers only, no webtv) B) onError fires if the image cannot be loaded due to a bad file addy or transfer errors (traffic) C) onLoad fires once all of the image's data is loaded (including all frames for animations) Note-the onAbort will not work for WebTv! Try the above script using both good and bad image URLs. |