HTML and CSS Reference
In-Depth Information
2
•
Move the mouse pointer to the
top-left corner of the word Home
in the image and note the x- and
y-coordinates for that point, as in-
dicated in the status bar. Move the
mouse until the coordinates read
(195,63) (Figure 5-20a). (Do not
click the mouse button.)
•
Move the mouse pointer to the
Pencil tool positioned on top-left
corner of Home hotspot
bottom-right corner of the word
Home. The coordinates should
read (247,82) (your coordinates
may differ slightly), as indicated
on the status bar (Figure 5-20b).
(Do not click the mouse button.)
The four coordinates to be used
for this rectangular hotspot
are 195,63,247,82, as shown in
Table 5-1.
Pencil tool positioned
on bottom-right corner
of Home hotspot
x-, y-coordinates
195,63 in top-
left corner of
Home hotspot
•
Move the mouse pointer to the
top-left and bottom-right corners
of the four other words that are
used as hotspots for navigation
(Skiing, Boating, and Dining) in the
image. Locate the corresponding
x- and y-coordinates in
Table 5-1.
x-, y-coordinates 247,82 in bottom-
right corner of Home hotspot
(a) Getting top-left coordinates.
(b) Getting bottom-right corner
coordinates.
Figure 5-20
•
After you have finished, click the Close
button on the right side of the title bar. If prompted, do not save any changes
to the file.
I am not sure of the purpose of this exercise because the coordinates are already given to us
for the project. Why am I doing these steps using Paint?
For the purpose of the project, the coordinates are given. The normal image mapping pro-
cess, however, consists of: finding an appropriate image, sketching out where you think
the boundaries will be, and finding the coordinates on your own using a software tool that
shows that information. The purpose of this exercise is to become familiar with using Paint
to find the coordinates.
I
Experiment
Play with the Image and Colors groups on the Home tab. They give you many options to
•
alter the image. Make sure to save the file with a different filename so that the image file
included in the Data Files for Students folder remains untouched.
