After you’ve created your <map> tag and defined the
regions of your image using <area> tags, the next step is to associate
the map with the image. To do so, the use map attribute of the <img> tag
is used. The map name that you specified using the name attribute of the
<map> tag, preceded by a #, should be used as the value of the use map
attribute, as shown in this example:
<img src =” image.gif” use map =”# map name>
NOTE
The value assigned to use map is a standard URL. This is why
map name has pound symbol (#) in front of it. As with links to anchors inside a
we page, the pound symbol tells the
browser to took for map name in the current web page, if you have a very
complex image map, however, you can store it in a separate HTML file and
reference it using a standard URL.
TASK: EXERCISE 7.3: A
CLICKABLE JUKEBOX
Let’s take a look at how to create a client – side image map
for a real image. In this example you’ll define clickable regions on an image
of a jukebox. The image you’ll be using appears in g figure 7.24.
FIGURE 7.24 The jukebox image.
First, define the regions that will be clickable on the is
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 7.25 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 map edit, oir 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 7.25 The jukebox with
areas defined.
Getting image
coordinates from the browser.