To embed a bitmap in an HTML document, you must use the <IMG> operator. A general view of this operator is shown below:
. . .
The parameters of the <IMG> operator determine the address of the image file, the alignment of the text next to the image, the dimensions of the image, the alt text, and so on.
Graphic images placed in an HTML document can be accessed as elements of the document.images array (the first image is addressed as document.images). However, in most cases, it is more convenient to use the image names defined by the NAME parameter of the <IMG> statement.
All properties of image objects correspond to the basic attributes of the <IMG> tag, with the exception of the complete property. The property dataset is shown below:
|border||Frame width in pixels around the image|
|complete||Contains a Boolean value that indicates whether the picture is loaded in the browser or not (true - loaded, false - no)|
|height||Image height in pixels or percentage of window size (table cells)|
|hspace||Width of free space in pixels separating the image from the text horizontally|
|src||URL of the file with the bitmap graphic|
|vspace||Width of free space in pixels separating the image from the text vertically|
|width||Image width in pixels or percentages of window size (table cells)|
There are three events associated with the image object:
|onAbort||Occurs when a picture is interrupted (when you press the [Esc] key or a new hyperlink is activated while the picture is loading)|
|onError||Event related to a picture loading error (when the picture cannot be found at the specified URL)|
|onLoad||Event that occurs when a picture is started loading|
Dynamically replace bitmaps
What happens when I run the above script string? The area selected in the browser window for the btn1 bitmap will be filled with pic/aurap.gif. If there was another image there before, it will be replaced with a new one.
How can I use dynamic bitmap replacement? Typically, dynamic replacement is used to create graphical links that change their appearance when the mouse cursor is over them. Let's look at an example scenario.
Suppose there are two graphic links in the HTML document. Let's make sure that when you hover over these links of the mouse cursor, the image is "highlighted". To do this, you need to prepare two images for each of the graphic links and install the onMouseOver and onMouseOut event handlers for the corresponding tags <A>.
Code Listing 5.1.
<HTML> <BODY> <P> <CENTER> <A HREF="disket.htm" onMouseOver="document.btn1.src='img12.jpg'" onMouseOut="document.btn1.src='img11.jpg'"><IMG SRC="img11.jpg" NAME = "btn1" BORDER=0></A> <A HREF="book.htm" onMouseOver="document.btn2.src='img22.jpg'" onMouseOut="document.btn2.src='img21.jpg'"><IMG SRC="img21.jpg" NAME = "btn2" BORDER=0></A> </CENTER> </BODY> </HTML>
In this example, the onMouseOver and onMouseOut event handlers are defined for the link operator <A> when the mouse cursor is over the link (that is, the link graphic), the onMouseOver event handler is controlled. This handler loads an img12.jpg image where the original image is "flashed". After the user removes the mouse cursor from the button surface, the onMouseOut event handler is included. It restores the original image specified in the SRC parameter of the <IMG> statement.
Another example is a script that allows you to present a simple collection of clip art in a single HTML document.
Waiting for all images to load
One of the disadvantages of the above approach of changing graphic images may be that after writing a new address to src, the process of loading the corresponding image begins. And since this was not done in advance, it will be some time before the new image is transmitted over the Internet and falls into place. In some situations, this is acceptable, but often such delays are unacceptable.
The solution to this problem is to download images proactively. To do this, the program creates variables (possibly an array) that contain Image objects. These variables are loaded proactively. For example:
hiddenImg= new Image(); hiddenImg.src= "img3.gif";
In the first line, a new Image object is created. The second line initiates the loading of the img3.gif image and saving it in the hiddenImg variable. After the image is loaded, control is passed to the next line of the script.
To call the image on the screen, you can use the command:
In this case, the image is immediately retrieved from the cache and displayed on the screen. The following is a listing of a modified sample script that changes the appearance of a graphical link when you hover the mouse cursor and preloads images:
Code Listing 5.2.