Image Maps with HTML

We explain in detail the process to create image maps, that is, images that have several associated links in different areas.

In previous chapters we have been able to delve into the basic element of web navigation: The hypertext link. We have seen that these links are words, texts or images that, when clicking on them, send us to other pages or areas.

Image maps is a new navigation approach that incorporates a series of links within the same image. These links are defined by geometric figures and work in exactly the same way as the other links. you can .

At first, these maps were not directly recognized by browsers and they resorted to to be displayed. Today they can be implemented through HTML code as we will see in this chapter.

Note: Imagemaps, though popular at one time and still available in the HTML5 standard, are hardly used today. If you are reading the to start developing web pages and you are interested in advancing quickly to later introduce yourself to languages ​​that are also necessary, such as , we recommend you skip this article.

We can use these maps, for example, on covers where we make known each of the sections of the site through an image. It can also be very useful in geographical maps where each city, province or any point represents a link to a page.

In any case, the use of these maps must be systematically accompanied by an explanatory text that makes the user aware of the possibility of clicking on the different points of the image. Phrases like “Click on such an icon to access such information” are very indicative when it comes to making navigation through the image maps intuitive. On the other hand, it doesn’t hurt to introduce that same explanation in the .

Thus, an image map is composed of two parts:

• The image itself that will be located as usual within the BODY tag of our HTML document.
• A code, located inside the MAP label, that will delimit by means of imaginary geometric lines each one of the areas of the links presented in the image.

The geometric lines that delimit the links, that is, the areas of the links, must be defined by means of coordinates. Each image is defined by some dimensions of width (X) and height (Y) and each point of the image can therefore be defined by saying at what height (x) and width (y) we are. Thus, the upper left corner corresponds to the 0,0 position and the lower right corner corresponds to the X,Y coordinates. If we want to know which coordinates correspond to a specific point in our image, it is best to use a graphic design program such as Photoshop or Paint Shop Pro.

The best way to explain how this type of map works is through a practical example. Suppose we have an image with a map like this:

Within it we want to introduce a link to each of the elements that compose it. To do this, we will define our links as small circular areas that will be distributed throughout the image.

Here is the code we will use:

Note: Area hrefs go to #

This is a partial example of using the maps, it would be necessary to place the hrefs with real values ​​and not with the #. Each of the area links – href attribute of the AREA tag – should lead to a web page. The example would be complete if we created all the pages where to link the areas and we put the hrefs directed towards those pages. As we have not made the “destination” pages, we have placed links that do not lead to any site, which, as you can see, is indicated with the “#” character.

You can see, as we have explained before, that our map consists of two main parts: the image and the MAP label that defines the areas of each link.

Each area is indicated by an AREA tag that has the following attributes:

alt

To indicate a text that will be displayed when we place the mouse in the area.

shapes

Indicates the type of area.

coordinates

The coordinates that define the area. They will be a group of different numerical values ​​depending on the type of area (shape) that we are defining.

href

To indicate the destination of the link corresponding to the area.

In this case we have used some circular areas (shape=”CIRCLE”), which are defined by indicating the center of the circle -a coordinate (X,Y) and the radius, which is an integer that corresponds to the number of pixels from the center to the edge of the circle.

Types of areas: different shapes

There are three different types of areas, enough to make almost any type of figure. We detail them below.

shape=”RECT”

Create a rectangular area. To define it, the coordinates of the points of the upper left corner and the lower right corner are used. As these coordinates are named in our drawing, the area would have the following label:

shape=”CIRCLE”

Creates a circular area, indicated by the coordinate of the center of the circle and the radius. Looking at our drawing, the label of a circular area would look like this:

shape=”POLY”

This type of area, polygonal, is the most complex of all. A polygon is defined by indicating all its points, but be careful, we have to indicate them in order, following the path marked by the perimeter of the polygon. In view of the drawing and the names that we have given to the points of the polygon, the AREA label would look like this.