Image map in HTML

Image map in HTML
 
Image map in HTML
  • Currently 3 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 3/5 (1 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


Image map allows you to assign links to different areas of the image. Used in two different versions - server and client. In server version, browser sends a request to the server to get the address of the selected link and wait for a response of the required information. This approach requires additional time for response and separate files for each image map.

In the client's version the map is located in the same HTML-document as the link to the image.

The client's version of image map

To indicate that the image is an image-map, use the parameter usermap in the img tag. As the value a link to describe map's configuration is used.

Bookmarks are links

Fig. 1. Bookmarks are links that are created by using image map.

To create links to bookmark, as shown in fig. 1, use the following code (example 1).

Example 1. Using image map.

<img src="map.gif" width="411" height="46" border="0" usemap="#map">

<map name="map">
  <area shape="poly" alt="Bookmark 2" coords="210,27, 203,9, 202,6, 197,2, 192,1, 120,1, 115,2, 110,6, 112,9, 119,27, 119,32, 211,32, 210,27" href="2.php">
  <area shape="poly" alt="Bookmark 3" coords="302,27, 295,9, 293,6, 289,2, 283,1, 212,1, 206,2, 202,6, 203,9, 210,27, 211,32, 284,32, 303,32, 302,27" href="3.php">
  <area shape="poly" alt="Bookmark 4" coords="302,27, 303,32, 394,32, 393,27, 386,9, 382,3, 375,1, 303,1, 298,2, 293,6, 295,9, 302,27" href="4.php">
</map>

To show the browser that the image is an image map, use parameter usemap. It's a link to the description of map configuration, which is set by the tag map. The value of name parameter must match the name in usemap. To specify active area in image map, which is a link to the HTML-document, use the tag area.

Tag parameters of area

shape

Determines the shape of the active area. The shape may be in the form of a circle (circle), rectangle (rect) or polygon (poly).

alt

Adds alternative text for each area. Serves only as a commentary for the link, since it's never displayed.

coords

Sets the coordinates for the active area. The coordinates are measured in pixels counting from the upper left corner of the image, which corresponds to 0.0. The first number is the horizontal coordinate, the second - vertical. Coordinates depend on the shape of the area.

For circle indicate three numbers - coordinates of the circle center and radius.

<area shape="circle" coords="230,340, 100" href="circle.php">

For rectangle - indicate the top left and bottom-right corners.

<area shape="rect" coords="24,18, 210,56" href="rect.php">

For polygon indicate coordinates of its corners (fig. 2).

Coordinates for the polygon

Fig. 2. Coordinates for the polygon.

href

Defines the address of the link for the area. Record rules are the same as for the a.

Image maps allow to create links to the different areas of the same image. This approach is more appealing than simple text links, and uses single image file to organize links. However, do not assume that image maps should be included in every graphic link. First you should consider all the pros and cons, and also to see the alternatives.

Advantages of the card image

  1. Maps allow you to specify any area form for a link. Given that the images are rectangular in nature, make graphical links of complex forms, for example to indicate a geographic area, this would be impossible without image maps. Typically, map images are most often used in a geography.
  2. It's easier to work with a single file - and not to worry about putting together individual fragments. Also the image can be easily put in the desired place.

Limitations

  1. You can not set a tooltip or alternative text for separate areas. Alternative text gives textual information about the picture if you turn off loading of images in your web browser. Because downloading images takes place after the browser gets information about it, the replacement image appears before the text. And only during process of loading the text will be replaced by an image. For image maps, this is relevant, because if a user disables viewing images which actually many do, as a result all they see is an empty rectangle.
  2. If the link area is too complex this increases the amount of HTML code. The shape is approximated by line segments, for each segment point one must specify two coordinates, and the total number of such points can be quite large. For fairness sake, it should be noted that complex forms are quite rare.
  3. With image maps, you can't make different effects that are available if you cut one picture into fragments: the rollover, partial animation, individual optimization of images for faster loading.

Usability

From the standpoint of convenience image maps have only one advantage - the links of different shapes. This adds clarity in presenting information - you are not limited to a rectangular link shape, you can use links of complex configuration. In other aspects there's not much use of them - usual textual references are more informative and are not effected by disabling viewing pictures in your browser. The fact that single image loads faster than the same image, but cut into pieces and stored as a set of graphic files, is not a problem. Each of these map files can be reduced by using individual settings of optimization. As a result, the total amount of all the fragments will take up less space than a single image. You should take into account the psychological factor - people think that a set of small images loads faster than big one.

The main drawback of image maps - are ill-defined borders of links. That is why, these borders have to be defined by different tools in the picture itself. If the picture didn't load for any number of reasons, it may be hard to make heads or tails of the collection of links.

Alternatives

It is not always necessary to use image maps, so you should pay attention to the fact that there are other options to do the task.

Use Flash

In flash-videos, you can create different link areas, taking advantage of vector graphics. Thanks to versatile Flash, you can create an amazing menu and navigation. But be careful not to lose your special idea behind these extra tricks.

Cutting images

This is one of the most popular tools in design. One image is cut with special tools into fragments that are brought together, to create an illusion of a whole picture. The areas of cutting can only be rectangular, but in most cases this is enough to create links. For each fragment, you can choose the most appropriate graphical format in which to store it, the optimization parameters, or add alternative text. Then, even if you disable image display the boundaries and the replacement image will be clearly visible.

Summary

As it turned out, there is only one reason to use image maps - a complex form of link dictated by the objectives of the design. Typical application - a geographical map regions, which serve as links. In all other cases you can use and text links, and if necessary, to create graphical navigation, single image, for convenience, can be cut into several segments. This approach will be more user-friendly, especially for those who for various reasons, disable viewing images in the browser. Yes, we need to keep in mind those people.


 

Read also

Graphics formats in HTML

Graphics formats in HTML

Image size in HTML

Image size in HTML

Inserting images in HTML

Inserting images in HTML

Aligning images in HTML

Aligning images in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation