Image Maps

Image maps are commonly used to create interactive Web pages. An image map is an image with hot areas that the user can click to accomplish a task, such as loading a different Web page into a browser. When the user positions the mouse pointer over a hot area, normally a descriptive message appears in the status area of the browser or in a tool tip.

Figure 21.4 loads an image containing several of the programming tip icons used in this book. The program allows the user to position the mouse pointer over an icon to display a descriptive message associated with it. Event handler mouseMoved (lines 3943) takes the mouse coordinates and passes them to method translateLocation (lines 5869). Method translateLocation tests the coordinates to determine the icon over which the mouse was positioned when the mouseMoved event occurredthe method then returns a message indicating what the icon represents. This message is displayed in the applet container's status bar using method showStatus of class Applet.

Figure 21.4. Image map.

(This item is displayed on pages 988 - 990 in the print version)

 1 // Fig. 21.4: ImageMap.java
 2 // Demonstrating an image map.
 3 import java.awt.event.MouseAdapter;
 4 import java.awt.event.MouseEvent;
 5 import java.awt.event.MouseMotionAdapter;
 6 import java.awt.Graphics;
 7 import javax.swing.ImageIcon;
 8 import javax.swing.JApplet;
 9
10 public class ImageMap extends JApplet
11 {
12 private ImageIcon mapImage;
13
14 private static final String captions[] = { "Common Programming Error",
15 "Good Programming Practice", "Graphical User Interface Tip",
16 "Performance Tip", "Portability Tip",
17 "Software Engineering Observation", "Error-Prevention Tip" };
18
19 // sets up mouse listeners
20 public void init()
21 {
22 addMouseListener(
23
24 new MouseAdapter() // anonymous inner class
25 {
26 // indicate when mouse pointer exits applet area
27 public void mouseExited( MouseEvent event )
28 {
29 showStatus( "Pointer outside applet" );
30 } // end method mouseExited
31 } // end anonymous inner class
32 ); // end call to addMouseListener
33
34 addMouseMotionListener(
35
36 new MouseMotionAdapter() // anonymous inner class
37 {
38 // determine icon over which mouse appears
39 public void mouseMoved( MouseEvent event )
40 {
41 showStatus( translateLocation(
42 event.getX(), event.getY() ) );
43 } // end method mouseMoved
44 } // end anonymous inner class
45 ); // end call to addMouseMotionListener
46
47 mapImage = new ImageIcon( "icons.png" ); // get image
48 } // end method init
49
50 // display mapImage
51 public void paint( Graphics g )
52 {
53 super .paint( g );
54 mapImage.paintIcon( this, g, 0, 0 );
55 } // end method paint
56
57 // return tip caption based on mouse coordinates
58 public String translateLocation( int x, int y )
59 {
60 // if coordinates outside image, return immediately
61 if ( x >= mapImage.getIconWidth() || y >= mapImage.getIconHeight() )
62 return "";
63
64 // determine icon number (0 - 6)
65 double iconWidth = ( double ) mapImage.getIconWidth() / 7.0;
66 int iconNumber = ( int )( ( double ) x / iconWidth ); 
67
68 return captions[ iconNumber ]; // return appropriate icon caption
69 } // end method translateLocation
70 } // end class ImageMap

 

Clicking in the applet of Fig. 21.4 will not cause any action. In Chapter 24, Networking, we discuss the techniques required to load another Web page into a browser via URLs and the AppletContext interface. Using those techniques, this applet could associate each icon with a URL that the browser would display when the user clicks the icon.