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.
No comments:
Post a Comment