HTML and CSS Reference
In-Depth Information
NOTE
The value assigned to
usemap
is a standard URL. This is why
map-
name
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 complex
imagemap, however, you can store it in a separate HTML file and
reference it using a standard URL.
Task:
Exercise 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 define clickable regions on an image of a jukebox. The image you use appears
in Figure 9.29.
FIGURE 9.29
The jukebox
image.
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 like a house, and a
circle with a question mark inside it. Figure 9.30 shows regions on the image.
FIGURE 9.30
The jukebox with
areas defined.
Circle
Rectangle
Rectangle
Polygon
