HTML and CSS Reference
In-Depth Information
Now that you know where the various regions are, you need to find the exact coordinates
of the areas as they appear in your image. You can use a mapping program like Mapedit,
or you can do it manually. If you try it manually, it's helpful to keep in mind that most
image-editing programs display the x and y coordinate of the image when you move the
mouse over it.
Getting Image Coordinates from the Browser
You don't have an image-editing program? If you use Firefox as your browser, here's
a trick: Create an HTML file with the image inside a link pointing to a fake file, and
include the
ismap
attribute inside the
<img>
tag. You don't need a real link; anything
will do. The HTML code might look something like the following:
<a href=“nothing”><img src=“myimage.gif” ismap></a>
9
When you load this into your browser, the image displays as if it were an imagemap.
When you move your mouse over it, the x and y coordinates appear in the status
line of the browser. Using this trick, you can find the coordinates for the map file of
any point on that image.
With regions and a list of coordinates, all you need are the web pages to jump to when
the appropriate area is selected. These can be documents, scripts, or anything else you
can call from a browser as a jump destination. For this example, I've created several doc-
uments and stored them inside the
music
directory on my Web server. These are the
pages you'll define as the end points when the clickable images are selected. Figure 9.31
identifies each of the eight clickable areas in the imagemap. Table 9.1 shows the coordi-
nates of each and the URL that's called up when it's clicked.
TABLE 9.1
Clickable Areas in the Jukebox Image
Number
Type
URL
Coordinates
1
music/classics.html
101,113,165,134
rect
2
music/country.html
101,139,165,159
rect
3
music/rockpop.html
101,163,165,183
rect
4
music/home.html
175,152,203,118
220,118,247,152
237,153,237,181
186,181,186,153
poly
