Image Map
Image maps are graphics that are split into several clickable areas using invisible markings. They make it possible to provide several parts of a graphic with different hyperlinks.
Definition of image map
At least one or more geometric shapes have to be defined to create an image map. The separate areas resulting from this, can be linked to any destination, for example, with an internal subpage, a download or an external link target. Image maps can be used not only in graphics, but also in video files.
Creating an image map
The HTML element <map name=""> is used to create an image map. It defines the name of the map, which does not necessarily have to correspond to the file name. This name is used as an anchor point to address the image map later from elsewhere.
The map definition can be placed at any position within the bodies of the HTML structure. The <area> attribute defines the different areas within the image map. At least one <area> attribute must be present, otherwise the number is limited only by the number of pixels of the graphic. This attribute must be specified further using additional properties:
- Shape: The “shape” attribute can specify three different configurations. “Rect” represents a rectangular area. “Circle” defines a circle. “Poly” is used to specify a shape with multiple vertices. In our example, a polygon graphic with 14 vertices was generated.
- coords: This attribute specifies the coordinates for the boundaries of the areas. Specific areas on the graphic are outlined using pixels. An image editing program can be used in determining the coordinates. The position of the mouse pointer is usually displayed in an information or status bar.
- href: You can set a redirect to the target page with href, for example, to an internal or external webpage.
- alt: The alt attribute contains the alternative text which is displayed if the image map cannot be loaded. This may be the case with text-only browser and is also of great importance in terms of accessibility for blind users.
- title: The title attribute contains an explanatory short text that is displayed as a tooltip when a user moves their mouse over the area.
Inclusion of image map
If the image map has been fully defined, it can be accessed anytime anywhere within the document. To this end, the graphic first needs to be embedded as usual using the <img> tag in the correct position. The image map can be embedded within the <img> tag using the element usemap="#mapname".
Application examples
Image maps are used in a variety of applications in everyday life, for example:
- Interactive maps that direct to specific regions by clicking on the corresponding area
- Banners, where different areas link to different products or categories
- In videos for the display of additional information or advertising for a certain time period
Pros and cons
Image maps provide great improvement as compared to regular navigation particularly with regards to the usability of a website. Well-structured graphics can often achieve a more intuitive navigation than the classical reference lists with text references. However, this advantage can also be reversed. If graphics cannot be loaded in a particular browser, then the navigation can no longer be used in its actual form. To circumvent this problem, a “separate navigation” in the form of clickable text links should always be generated to provide alternative navigation options.
Relevance to search engine optimization
In the field of search engine optimization image maps are only conditionally recommended. They are often used in spam to disguise the real destination of a link. Therefore, many search engines do not follow the links used in image maps.
Web Links