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­or­di­nates and linked to as­so­ci­at­ed 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­ac­tiv­i­ty. More specif­i­cal­ly, HTML image maps can be used to provide graphics and videos in an HTML document with several linked and clickable areas. In­te­grat­ed 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­a­tors. 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­spec­tive reference areas. The advantage of image maps is their ability to link to multiple des­ti­na­tions within a graphic or video. HTML image maps can be used for:

• Maps with clickable areas for regions, cities, company locations or service stations
• Recipe images with ad­di­tion­al in­for­ma­tion about the in­gre­di­ents
• Banner ads with links to different products, cat­e­gories or services
• Dis­play­ing ad­di­tion­al in­for­ma­tion or ad­ver­tise­ments in videos
• A website as an image map with multiple nav­i­ga­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­or­di­nates 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­or­di­nates (coords) to specify the position, size and shape of the reference area. Areas can be placed in a graphic in the form of rec­tan­gles, polygons or circles. The co­or­di­nates you use depend on the shape of the reference area.

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

• shape: The shape attribute defines the shape of clickable areas within an image. You can choose from rect for rec­tan­gles, 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­or­di­nates that outline the clickable area. These co­or­di­nates are often de­ter­mined using a graphic editor.
• href: The href attribute links the clickable area to an internal or external URL.
• alt: The alt attribute provides al­ter­na­tive text if the image map fails to load, ensuring ac­ces­si­bil­i­ty, es­pe­cial­ly for text-only browsers or users with dis­abil­i­ties.
• 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­te­grat­ed into an HTML page?

Once the image map is defined, you can in­cor­po­rate 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 au­to­mat­i­cal­ly redi­rect­ed to the cor­re­spond­ing landing pages, which open in a new window.

Close