ptg16476052What Is an Imagemap? 233Polygon 9
Circle
RectangleRectangleFIGURE 9.26
The jukebox with
areas defined.
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>
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.27 identi-
fies each of the eight clickable areas in the imagemap. Table 9.1 shows the coordinates 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 rect music/classics.html 101,113,165,134
2 rect music/country.html 101,139,165,159
3 rect music/rockpop.html 101,163,165,183
▼▼