HTML and CSS Reference
In-Depth Information
Mapping Image Coordinates
After you have determined how you want to divide the image into hotspot areas, you
must determine the x- and y-coordinates for each of the sections. The x- and y-coordinates
are based on a position relative to the x- and y-axes. The
x-axis
runs horizontally along
the base of the image, while the
y-axis
runs vertically along the left of the image. The
top-left corner of an image thus is the coordinate point (0,0), as shown in Figure 5-12.
The first number of a
coordinate
pair
is the x-coordinate, and the second number is the
y-coordinate. Figure 5-12 shows the starting (0,0) x- and y-coordinates in a Paint window
that contains the image tahanna.jpg. The y-coordinate numbers increase as you move the
mouse pointer down the image, and the x-coordinate numbers increase as you move the
mouse pointer to the right on the image. As you move the mouse pointer, the coordinates
of its position as it relates to the image are displayed on the status bar.
You can use a simple or a sophisticated image editing or paint program to determine
the x- and y-coordinates of various image points. In this project, the Paint program is used
to find the x- and y-coordinates that you will use in the map definition that divides a single
image into several areas.
coordinate
point (0,0)
x-, y-coordinates
(0,0) px on status bar
Figure 5-12
