ptg16476052232 LESSON 9: Using Images on Your Web Pages
▼
<map> tag, preceded by a #, should be used as the value of the usemap attribute, as shown
in this example:
<img src="image.gif" usemap="#mapname">The value assigned to usemap is a standard URL. This is why
mapname has a pound symbol (#) in front of it. As with links to
anchors inside a web page, the pound symbol tells the browser to
look for mapname in the current web page. If you have a very com-
plex imagemap, however, you can store it in a separate HTML file
and reference it using a standard URL.NOTEExercise 9.3: A Clickable Jukebox
Let’s take a look at how to create a client-side imagemap for a real image. In this exam-
ple, you’ll define clickable regions on an image of a jukebox. The image you’ll be using
appears in Figure 9.25.First, define the regions that will be clickable on this image. There are six rectangular
buttons with musical categories on them, a center area that looks li ke a house, and a
circle with a question mark inside it. Figure 9.26 shows regions on the image.
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.FIGURE 9.25
The jukebox image.▼