How to use an HTML image map

An HTML image map refers to website graphics or videos that have several clickable areas that lead to internal or external URLs. The link-sensitive areas of an image map are created with selected co­ordin­ates and linked to as­so­ci­ated URLs or web addresses.

What is an HTML image map?

HTML image maps are clickable graphics that improve user-friend­li­ness and in­ter­activ­ity. More spe­cific­ally, HTML image maps can be used to provide graphics and videos in an HTML document with several linked and clickable areas. In­teg­rated reference areas can be subpages, hy­per­links to internal or external URLs or downloads. As soon as a user clicks on the linked elements, content is displayed, or specific actions are triggered.

The HTML tag <map> is used to generate image maps. The HTML tag img is used to integrate image maps.

If you don’t want to create your own HTML image map, you can use image map gen­er­at­ors. With these online tools, you simply upload an image and then define the desired link targets in image areas.

What can HTML image maps be used for?

You can integrate an image map into any HTML document once you have defined the re­spect­ive reference areas. The advantage of image maps is their ability to link to multiple des­tin­a­tions within a graphic or video. HTML image maps can be used for:

• Maps with clickable areas for regions, cities, company locations or petrol stations
• Recipe images with ad­di­tion­al in­form­a­tion about the in­gredi­ents
• Banner ads with links to different products, cat­egor­ies or services
• Dis­play­ing ad­di­tion­al in­form­a­tion or ad­vert­ise­ments in videos
• A website as an image map with multiple nav­ig­a­tion elements
• Dis­play­ing various modes, functions or levels in online games

How is an HTML image map generated?

The HTML element <map> is used to generate an image map. When creating this element, you also need to include the name attribute so the map can be ref­er­enced later on. Using the map name, you can anchor, link or reference specific areas in an image or video. We’ll go into more detail on how you can specify the co­ordin­ates for linked areas below.

An HTML image map can be placed at any position in an HTML document. To do this, define areas and co­ordin­ates (coords) to specify the position, size and shape of the reference area. Areas can be placed in a graphic in the form of rect­angles, polygons or circles. The co­ordin­ates you use depend on the shape of the reference area.

You can use the HTML attribute <area> to define in­di­vidu­al areas of the image map. At least one area attribute is required to use an image map. The following HTML at­trib­utes can be used to specify the prop­er­ties of the image map and its in­di­vidu­al reference areas:

• shape: The shape attribute defines the shape of clickable areas within an image. You can choose from rect for rect­angles, circle for circles, or poly for polygons. The syntax for a rectangle is rect = x1,y1,x2,y2, where x1 and y1 mark the top-left corner, and x2 and y2 define the bottom-right corner. For circles, the syntax is circle = xc,yc,radius. For polygons, it’s poly = x1,y1,x2,y2,x3,y3 ….
• coords: The coords attribute specifies the pixel co­ordin­ates that outline the clickable area. These co­ordin­ates are often de­term­ined using a graphic editor.
• href: The href attribute links the clickable area to an internal or external URL.
• alt: The alt attribute provides al­tern­at­ive text if the image map fails to load, ensuring ac­cess­ib­il­ity, es­pe­cially for text-only browsers or users with dis­ab­il­it­ies.
• title: The title attribute adds a brief de­scrip­tion that appears when users hover over the image area.
• img: The img tag is used to embed and display an image in an HTML document.

How can an image map be in­teg­rated into an HTML page?

Once the image map is defined, you can in­cor­por­ate it in the desired location on your website using the <img> HTML tag. To link the image map and make it func­tion­al, you’ll also need to include the <map> element. The following example il­lus­trates how to implement this:

<img src="beach-image.jpg" usemap="#image-map">
<map name="image-map">
    <area target="_blank" alt="beach" title="beach" href="https://example.com/beach" coords="1,928,3260,1834" shape="rect">
    <area target="_blank" alt="ocean" title="ocean" href="https://example.com/ocean" coords="3263,556,7,919" shape="rect">
    <area target="_blank" alt="sky" title="sky" href="https://example.com/sky" coords="3263,510,10,0" shape="rect">
</map>

For the beach image below, three clickable areas were defined: beach, ocean, and sky. When users click on these areas, they are auto­mat­ic­ally re­dir­ec­ted to the cor­res­pond­ing landing pages, which open in a new window.

Close