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.
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.
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:
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".
Image maps are used in a variety of applications in everyday life, for example:
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.
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.