Newsletter sign-up
View all newsletters

Enterprise Java Newsletter
Stay up to date on the latest tutorials and Java community news posted on JavaWorld

Sponsored Links

Optimize with a SATA RAID Storage Solution
Range of capacities as low as $1250 per TB. Ideal if you currently rely on servers/disks/JBODs

JavaWorld.com > Java Standard Edition >

Using JavaScript and graphics

The easy way to make your images dynamic

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

  • Print
  • Feedback
Internet purists consider the World Wide Web primarily a vehicle for disseminating information. Much of that information is in text form, which can be easily rendered by any Web browser. But even from the beginning days of the Web, graphics have played an important role in enhancing the basic text page. These days, it's not unusual to see Web sites that are ninety percent graphics. These sites may not conform to the strict concept of dissemination of information, but some of them certainly are attractive.

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:

  • Print
  • Feedback