Using JavaScript and graphics

The easy way to make your images dynamic

By Gordon Mccomb, JavaWorld.com, 08/01/96

Most of us strive for a balance between text and graphics in our Web pages. The graphics serve to enhance the appearance and readability of the page. Typical uses for graphics include banners, ads from sponsoring companies, and colored bullets to highlight important pieces of text.

The JavaScript scripting language can be used to enhance the graphics you put on your Web pages. JavaScript can be used to dynamically control the graphic content of the page. For example, you can display one background for your page in the morning and another in the afternoon. And at night you can use a star field background. Or, you can use JavaScript to create the display for digital clocks, hit counters, bar graphs, and more.

This month's column details several ways you can use JavaScript and graphics. But one notable topic is missing from this discussion: using JavaScript for animation. That subject is deserving of its own column, coming soon.

Understanding the HTML image element

The <IMG> element is the most commonly used tag for representing graphical content in an HTML document (the latest HTML specifications add a <FIG> element, but it is not yet supported by Netscape and most other browsers). For the uninitiated, the syntax of the basic <IMG> tag is:

<IMG SRC="url">

where "url" is a properly constructed URL for the image file. The URL can be absolute or relative. Remember that not all browsers are equipped to display graphics. Therefore, it's advisable to include "alternate text" for the image for those who are image-challenged. Use the ALT attribute inside the <IMG> tag to specify alternate text. Here's an example:

<IMG SRC="../myimage.gif" ALT="This is the myimage.gif graphic">

Images created with the <IMG> tag are considered "inline" because they are treated just like text characters. That means you can intersperse images with text, and the browser will take care of making sure everything flows properly.

Most images are taller than the text that surrounds them, however. The normal behavior of most browsers is to place the bottom of the image flush with the bottom of the text that surrounds it. You can change this behavior if you want a different alignment. The most common alignment choices, understood by all browsers that display images, are:

• bottom -- Aligns the text to the bottom of the image. This is the default.
• middle -- Aligns the text to the middle of the image.
• top -- Aligns the text to the top of the image.

You may use only one alignment at a time. The syntax is:

<IMG SRC="myimage.gif" ALIGN="alignment">

Browsers ordinarily display images in their "natural size." If an image is 100 pixels by 100 pixels, for example, that's how big it is when rendered on the browser's screen. But with Netscape you can change the size of the image if you want it smaller or larger by using the WIDTH and HEIGHT attributes. An advantage of these attributes is that, when used, the browser creates an empty box for the image, then fills the box with the image as the entire page loads. This cues users that a graphic is expected at that spot.

• Specifying just the width or height changes the size of the image in proportion. For example, specifying WIDTH="100" sizes a square image to a height and width of 100 pixels. If the original image is not square, it is sized in relative proportion. For instance, if the original image is 400 pixels wide by 100 pixels high, changing the width to 100 pixels reduces the image to 25 pixels high.
  
  
• Specifying both the width and height lets you change the proportion of the image in any way you like. For example, you can transform that 400-by-100-pixel image to 120 by 120, 75 by 90, or anything else.

For example:

<IMG SRC="myimage.gif" ALT="Alternate text1" HEIGHT="100" WIDTH="100">

Caution: When combined with JavaScript you should always provide the HEIGHT and WIDTH attributes for <IMG> tags. Otherwise, you may get inconsistent results and/or crashing! This caution applies to any <IMG> tag that appears in the same document that contains JavaScript code.

Combining images with JavaScript

JavaScript can be used to enhance images used in HTML documents. For instance, you can use JavaScript to dynamically create a page using images selected by a conditional test expression, such as the time of day.

In fact, the JavaScript digital clock application, which uses JavaScript and an assortment of GIF images, is one of the most popular on the Web. The clock.html example uses JavaScript to display the current time, using big green LED digits. Each digit is an individual GIF, strung together by JavaScript to form the face of a digital clock.

I used digit GIFs provided by Russ Walsh; Russ kindly allows his GIFs to be used freely on Web pages, as long as proper credit is given. You can use any digits you wish for your clock, but you must provide a separate GIF file for each numeral and separate files each for the colon and am/pm indicators. Change the clock.html code to reference the digit files you wish to use.

Note: It is important that you provide the absolute URL to the images you use. Otherwise Netscape will not display the graphics. The clock.html example uses a function (pathOnly) to extract the current path of the document. The script therefore expects to find the images in the same path as the document. Alternatively, you can hard-code the absolute URL if you place the images elsewhere, or you may use the <BASE HREF> tag at the start of the document to explicitly tell Netscape the base URL you want to use.

JavaScript digital clock

<HTML>
<HEAD>
<TITLE>JavaScript Digital Clock</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var Temp;
setClock();
function setClock() {
    var OpenImg = '<IMG SRC="'+pathOnly(location.href)+'dg'
    var CloseImg='.gif" HEIGHT=21 WIDTH=16>'
    Temp = ""
    now = new Date();
    var CurHour = now.getHours();
    var CurMinute = now.getMinutes();
    now = null;
    if (CurHour >= 12) {
        CurHour = CurHour - 12;
        Ampm = "pm";
    } else
        Ampm = "am";
    if (CurHour == 0)
        CurHour = "12"
    if (CurMinute < 10) 
        CurMinute = "0" + CurMinute
    else
        CurMinute = "" + CurMinute

 CurHour = "" + CurHour; 
    for (Count = 0; Count < CurHour.length; Count++) {
        Temp += OpenImg + CurHour.substring (Count, Count+1) + CloseImg
    }
    Temp += OpenImg + "c" + '.gif" HEIGHT=21 WIDTH=9>'
    for (Count = 0; Count < CurMinute.length; Count++) {
        Temp += OpenImg + CurMinute.substring (Count, Count+1) + CloseImg
    }
    Temp += OpenImg + Ampm + CloseImg
}

function pathOnly (InString)  {
    LastSlash=InString.lastIndexOf ('/', InString.length-1)
    OutString=InString.substring  (0, LastSlash+1)
    return (OutString); 
}
</SCRIPT>
<BODY>
<H1 ALIGN=CENTER>The JavaScript Clock</H1>
The current time is: 
<SCRIPT>document.write(Temp); </SCRIPT>
</BODY>
</HTML>

Using JavaScript with client-side image maps

If you're lucky enough to have control over the server that contains your published Web pages, you've probably dabbled with server-side image maps. These are images that have been "dissected" into smaller chunks; as the user clicks on each chunk, the server responds to a different action.

The downside to server-side image maps is that you need a CGI program running on the server to handle the click requests. Not everyone has CGI access. Client-side image maps change that: The "intelligence" for dissecting the image and directing the user to the proper link -- based on the area of the image that was clicked -- is built into the browser. Netscape Navigator (version 2.0 and later) is one of many browsers that now support this standard.

Netscape takes the process a step further, however, letting you integrate client-side image maps with JavaScript. In an ordinary client-side image map, you are limited merely to linking to another page. If you wish, you can "link" to a JavaScript function and give your image maps even more intelligence. For instance, you might create a control panel that only lets users successfully click on an image button if some piece of information -- say a user name -- has been provided.

The anatomy of a client-side image map
Two new HTML tags are used to create client-side image maps. They are the <MAP> tag, which defines the map structure, and one or more <AREA> tags, which define the clickable areas within the image. To create the image map, define a <MAP> tag and give the mapping a name. The syntax is:

<MAP NAME="mapname>

You can use most any name for the map, but it should contain only alphabetical and numeric characters. The exception is the underscore, but avoid using an underscore for the first character. Next, define one or more <AREA> tags that define the areas of your image. The tag takes the syntax: