HTML and CSS Reference
In-Depth Information
As you have learned, the x- and y-coordinates begin with (0,0) in the top-left corner
of the image, as shown in Figure 5-12 on page HTML 246. As stated previously, moving
the mouse pointer to the right (horizontally) increases the x-coordinate, and moving the
mouse pointer down (vertically) increases the y-coordinate. Because the four clickable areas
in the navigation bar image sketched in black on the tahanna.jpg image are rectangular,
the map definition must include the x- and y-coordinate of the top-left and bottom-right
corners of each rectangular shape. Those four numbers (x, y of the top-left corner + x, y of
the bottom-right corner) define the hotspot of the rectangular shape.
Table 5-1 shows the x- and y-coordinates for the four rectangular-shaped map areas.
The rectangles are formed closely surrounding the four words that will be used for links
(Home, Skiing, Boating, and Dining). Notice in Table 5-1 that the y-coordinate (63 and 82)
is the same for all four words. That means that your rectangles will be the same vertically
across the navigation links. The first number is the x-coordinate, and the second number
is the y-coordinate. For example, the Home rectangle consists of two pairs of x- and
y-coordinates. One point is in the top-left corner of the word Home, and the other is in
the bottom-right corner of the word. The first x-coordinate (in the top-left corner of the
word Home) is 195 and the first y-coordinate is 63 at the top-left corner of the word Home.
You then locate a point on the bottom-right corner of the word, Home. These x- and
y-coordinates are used in the <area> tag to create the map definition for the image map.
Table 5-1 X- and Y-Coordinates
Location
Coordinates
Home
195,63,247,82
Skiing
305,63,354,82
Boating
413,63,470,82
Dining
521,63,574,82
To Locate X- and Y-Coordinates of an Image
The following steps locate the x- and y-coordinates of the boundary points of each clickable rectangular area
by moving the mouse pointer to the various points to see the x- and y-coordinates of those points. Although you
do not need to record the coordinates for this project, you generally would do that. In this case though, you will
compare the coordinates with those shown in Table 5-1, which lists the exact coordinates used in the <area> tags
for this project.
Pencil tool
selected
1
•
the Pencil button
in the Tools group
(Figure 5-19).
If necessary, click
Figure 5-19
