THE USEMAP ATTRIBUTE

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.

You don’t have an image-editing program? If you use Netscape 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 is map attribute inside the <ing> 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 =”my image. Gif” is map>,/a>

When you load this into your browser, the image is displayed as it\f it were an image map. 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 t\on that image.

With regions and a list of coordinates, all you need are the webpage’s to jump to when the appropriate area is selected. These can be document, scripts, or anything else you can call from browser as a jump destination. For this example, I’ve created several documents and stored them inside the music directory on my web serer. These are the pages you’ll define ast eh end points when the clickable images are selected. Figreu7.26 identifies each of the eight clickable areas in the image map. Table 7.2 shows the coordinates of each and the URL that called up when it’s clicked.