HTML Image Map: definition, explanation and examples

An HTML Image Map allows you to make different areas of an image or video clickable, directing users to internal or external links. These interactive areas are defined by specifying precise coordinates, which are then associated with the corresponding URLs.

What is an HTML Image Map?

HTML Image Maps (“image map” or “clickable map” in French) are interactive graphics that improve the usability of a site by allowing you toadd multiple clickable links to an image or video in an HTML document. These clickable areas can redirect to subpages, internal or external URLs, or allow file downloads. When users click on these areas, the corresponding actions are performed or related content is displayed.

The HTML tag (in English tag)

If you do not want to create your HTML Image Map yourself, you can use generators. With these online tools, you simply upload the desired image and then set the desired link targets in the desired areas.

What can an HTML Image Map be used for?

An Image Map can be integrated into any HTML documentas soon as the reference zones are defined. The great strength of Image Maps lies in their ability to link several destinations within the same image or video. Here are some examples of application of HTML Image Maps:

• Geographic maps with clickable areas for regions, cities, company branches or gas stations
• Recipe images providing additional information about the ingredients depicted
• Advertising banners with links to different products, categories or services
• Additional information or advertisements inserted into videos
• Image Map Websites with Multiple Navigation Elements
• Displaying game modes, functions or levels in online games

To create an Image Map, the HTML element

The Image Map can be placed wherever you want in an HTML document. To do this, you define zones and coordinates (coords) with which you concretize the position, size and shape of the deflection surface. Areas can be placed as rectangles, polygons, or circles in a chart. The coordinates you use depend on the shape of the reference surface.

With the HTML attribute

• shape : the attribute shape allows you to define the shapes of clickable areas in a chart. We can use rect for rectangles, circle for circles, or poly for polygons. The syntax for rect East rect = x1,y1,x2,y2Or x1 And y1 correspond to the coordinates of the upper left corner, and x2 And y2 in the lower right corner. The syntax for circle East circle = xc,yc,radiusand for polygons, poly = x1,y1,x2,y2,x3,y3 ....
• coords : the attribute coords specifies the coordinates that delimit a clickable area. These coordinates are defined in pixels, often using a graphics editor.
• href : the attribute href allows you to link the clickable area to a URL or an internal or external address.
• alt : the attribute alt provides alternative text in case of problems loading the Image Map, useful for text-based browsers or for accessibility.
• title : the attribute title displays a short informative text when the user hovers over a clickable area of ​​the image.
• img : the tag img is used to insert and display an image in an HTML document.

Once the Image Map has been finalized, it can be embedded into a website using the HTML tag to the desired location. To embed the desired Image Map and finally make it available on the website, additionally use the element

For the beach image in this example, three clickable areas have been defined in this case: the beach, the sea and the sky. Anyone who clicks in the areas is automatically redirected to the corresponding landing pages, which then open in a new window.

Close