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 >

Stepping through an image map applet

Spice up any Web site with this reusable Java code

By Maria Winslow, JavaWorld.com, 12/01/96

  • Print
  • Feedback
.
Many a Web site has considered employing Java within its home page. The image map, a mainstay of home pages consisting of a GIF or JPEG image mapped to link to various documents depending upon where a user clicks within the image, lends itself nicely to Java enhancement. In this inaugural Step by Step column, we'll walk you through the creation of a reusable image map applet.

Overview of the problem

The basic idea: Allow for regions to be defined on an image. When the user moves the mouse into the region, another image is displayed. When the user clicks in the region, the browser is driven to a URL associated with that area. This applet allows for two styles of image placement, either over the region or at the bottom of the background image. The difference is a matter of style. Both work well, and the choice will depend on the desired effect.

One suggestion is to use below-background image placement to provide textual information relating to the link; interesting graphical effects can be achieved with Image overlays. If this applet is designed to be as generic as possible, then it can be written and compiled once, and reused many times with differing effects.

Global elements

The basic elements are a background image, a boolean value specifying the image placement, a Vector of Rectangles representing the defined regions, a Vector of images associated with those regions, and a Vector of URLs to which each region should point. We also must keep the index of the current active region.

import java.awt.*;
import java.applet.*;
import java.util.*;
import java.net.*;
public class ImageMap extends Applet {
  Image background;
  boolean overlay;
  Vector areas = new Vector();
  Vector images = new Vector();
  Vector urls = new Vector();
  int current = -1;


Vectors are used so that any number of regions may be defined. A Vector is a dynamically allocated array that grows as needed. This is more efficient than a large array for most cases.

Initialization and parameter collection

The init() method does all the work of collecting the parameters. This method is called automatically when the applet first loads. 

  public void init() {
    // get the parameters
    background = getImage(getDocumentBase(), getParameter("main"));
    prepareImage(background, this);
    overlay = Boolean.valueOf(getParameter("overlay")).booleanValue();
    String bgcolor = getParameter("bgcolor");
    if (bgcolor != null)
      setBackground (new Color (Integer.parseInt (bgcolor.substring (1), 16)));
    boolean ok = true;
    for (int i = 1; ok; ++i) {
      String areaStr = getParameter("area"+i);
      String imageStr = getParameter("image"+i);
      String urlStr = getParameter("url"+i);
      if ((areaStr != null) && (imageStr != null) && (urlStr != null)) {
        try {
          StringTokenizer str = new StringTokenizer(areaStr);
          Rectangle area = new Rectangle(Integer.parseInt(str.nextToken()),
                                         Integer.parseInt(str.nextToken()),
                                         Integer.parseInt(str.nextToken()),
                                         Integer.parseInt(str.nextToken()));
          Image image = getImage(getDocumentBase(), imageStr);
          URL url = new URL(getDocumentBase(), urlStr);
          areas.addElement(area);
          images.addElement(image);
          urls.addElement(url);
          prepareImage (image, this);
        } catch (MalformedURLException ex) {
          System.out.println ("Invalid format for URL " + i + " : " + urlStr);
        } catch (NoSuchElementException ex) {
          System.out.println ("Invalid format for area " + i + " : " + areaStr);
        } // end try
      } else {
        ok = false;
      } // end if
    } // end for
  } // end init


There are several parameters that we need to collect from the HTML APPLET tag. A typical tag will look like this:

  • Print
  • Feedback

Resources