<AREA>

Area of an image to create a hyperlink

This element is used inside a map element to define the various areas that a user can select and the action that occurs when the area is selected. This is used in client-side maps (that means all the work is done by the browser on the viewers computer.

   <html>
        <head>
        <title>A Map Page</title>
        </head>
        <body>
            .
            .
        <map name="buttonmap">
==>>      <area href=button1.html alt="button1" shape=rect coords="0,0,100,50">
==>>      <area href=button2.html alt="button2" shape=rect coords="100,0,200,50">
==>>      <area href=button3.html alt="button3" shape=rect coords="0,50,100,100">
==>>      <area href=button4.html alt="button4" shape=rect coords="100,50,200,100">
        </map>
            .
            .
        </body>
        </html>

Now this assumes that somewhere on the page I've got a corresponding img that has a usemap attribute that matches the name in the map element. It also assumes that this image is at least 200 pixels wide by 100 pixels high. Now, if all that's true then we're in business to use it as a map for the viewer to select places to go. I didn't get very fancy, I just used a rectangular image divided evenly into four pieces.

The coordinates get a little confusing so I'll go into a lot of detail to try to make it clearer. My picture could look like the following:

    x=0,y=0                                       x=100,y=0                                    x=200,y=0
        +-------------------------------------------------------------------------+
        |           Button 1                                 |                Button 2                             |
        +------------------------------------|-------------------------------------+ x=200,y=50
        |           Button 3                                 |                Button 4                             |
        +-------------------------------------------------------------------------+
   x=0,y=100                                   x=100,y=100                                 x=200,y=100

When you are entering the coordinates for a rectangular area, you use the top left corner and the bottom right corner to define the area. The numbers always go as the x and y values for each of these positions. In the picture above, the top left corner for Button 1 is at x=0 and y=0. The bottom right corner is at x=100 and y=50. Clear? Good, I thought this would make it easier for you to visualize!

To complicate matters, you can use a circular shape where you define the center point using the x and y coordinates then specify a radius length in pixels. I won't try to draw a picture of that one. Just use your imagination to think it through.

And, just in case that wasn't enough flexibility for you, there's a poly shape where you just specify the different corners with x and y values.

Shapes can overlap! That's a scary thought for the careless artist! Browsers are supposed to honor the areas in the order they are defined in the map. Kind of first come, first served as it were.

Besides having the shapes link to something else, you can specify that an area is a "do nothing" area, too. I'm sure you can think of something that would require that kind of option.

HTML 3.2 Final

This element takes the following attributes:

shape: Can be one of rect, for a rectangular space definition; circle, to define a circular space on an image; or poly, to define a multi-sided shape.
coords: These are pairs of numbers which locate a point as measured from the top, left corner of the image being used. That corner would be known as 0,0. You can use a direct pixel count or, to make matters easier, you could state the numbers as percentages of the overall dimensions of the image. You do this by adding a '%' at the end of the number. If the shape you are defining is a rectangle then you specify the top, left corner with the first two numbers and the bottom, right corner with the second pair. If you are using a circle then you have three numbers - the center of the circle is defined by the first two and then the size of the circle (it's radius) is defined by the third number. I would assume you could use percentages on the first two numbers but I don't know about the radius. If you are going to define a polygon then you've got to give at least three pairs of numbers but then you can give more.
href: This attribute specifies the URL that is the target for the link. If you don't want the area to link to anything then you can specify the nohref attribute instead of this one.
nohref: Used in place of the href attribute. It specifies that the defined area is not used as a link. I'm trying to think of when you would use this - maybe if you defined a box like I did in the example but then wanted to exclude the center part from being a link? It adds more flexibility so I suppose it's good for the imagination.
alt: I strongly recommend that you overlook my example and include some alternate text that can be used with the link. This text displays in the status line as the pointer moves over the "hotzone". It would also be used for constructing a text menu for non-graphical browsers or in conjunction with speech-based or text-only programs. The values are just like the ones you use for images.

Netscape

Nothing special.

Microsoft Internet Explorer

Nothing special.

Internationalization

Nothing special.

The Rusk Family . . . "the Legend Continues"

Michael T. Rusk
Comments to author: mrusk@radix.net