Last Updated:

Working with graphics Using JavaScript

To embed a bitmap in an HTML document, you must use the <IMG> operator. A general view of this operator is shown below:

<IMG SRC="image_file_address"
   NAME="image_name"
     . . .
   WIDTH="width"
   HEIGHT="Height">

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[0]). 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:

PropertyDescription
borderFrame width in pixels around the image
completeContains a Boolean value that indicates whether the picture is loaded in the browser or not (true - loaded, false - no)
heightImage height in pixels or percentage of window size (table cells)
hspaceWidth of free space in pixels separating the image from the text horizontally
srcURL of the file with the bitmap graphic
vspaceWidth of free space in pixels separating the image from the text vertically
widthImage width in pixels or percentages of window size (table cells)

 

There are three events associated with the image object:

EventDescription
onAbortOccurs when a picture is interrupted (when you press the [Esc] key or a new hyperlink is activated while the picture is loading)
onErrorEvent related to a picture loading error (when the picture cannot be found at the specified URL)
onLoadEvent that occurs when a picture is started loading

 

Dynamically replace bitmaps

One of the most interesting features available when using JavaScript scripting is to dynamically replace the graphics specified in the SRC parameter of the <IMG> statement. For example, the following Line of JavaScript specifies that an image named btn1 must have a pic/aurap URL.gif:

document.btn1.src="pic/aurap.gif"

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.

onMouseOver="document.btn1.src='img12.jpg'" 
onMouseOut="document.btn1.src='img11.jpg'"

 

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:

document.myImage.src= hiddenImg.src;

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.

<HTML>
  <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
  hiddenImg11= new Image();
  hiddenImg12= new Image();
  hiddenImg21= new Image();
  hiddenImg22= new Image();
  hiddenImg11.src= "img11.jpg";
  hiddenImg12.src= "img12.jpg";
  hiddenImg21.src= "img21.jpg";
  hiddenImg22.src= "img22.jpg";
  //-->
  </SCRIPT>
  </HEAD>
  <BODY>
  <P>
  <CENTER>
  <A HREF="disket.htm" 
    onMouseOver="document.btn1.src=hiddenImg12.src" 
    onMouseOut="document.btn1.src=hiddenImg11.src"><IMG 
    SRC="img11.jpg" NAME = "btn1" BORDER=0></A>
  <A HREF="book.htm" 
    onMouseOver="document.btn2.src=hiddenImg22.src" 
    onMouseOut="document.btn2.src=hiddenImg21.src"><IMG 
    SRC="img21.jpg" NAME = "btn2" BORDER=0></A>
  </CENTER>  
  </BODY>
</HTML>