# 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 coordinates and linked to associated URLs or web addresses.

## What is an HTML image map?

HTML image maps are clickable graphics that improve user-friendliness and interactivity. More specifically, HTML image maps can be used to provide graphics and videos in an [HTML](https://www.ionos.com/digitalguide/websites/web-development/what-is-html/) document **with several linked and clickable areas**. Integrated reference areas can be subpages, hyperlinks 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](https://www.ionos.com/digitalguide/websites/web-development/html-tags/) `<map>` is used to generate image maps. The [HTML tag img](https://www.ionos.com/digitalguide/websites/web-development/img-tag-in-html/) is used to integrate image maps.

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

Tip Want to learn more about **how HTML works and different ways to use it**? Our [HTML beginner tutorial](https://www.ionos.com/digitalguide/websites/web-development/learning-html-a-beginners-tutorial/) offers you a quick and easy introduction to the markup language.

## What can HTML image maps be used for?

You can integrate an image map **into any HTML document** once you have defined the respective reference areas. The advantage of image maps is their ability to link to multiple destinations 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 additional information about the ingredients
- Banner ads with links to different products, categories or services
- Displaying additional information or advertisements in videos
- A website as an image map with multiple navigation elements
- Displaying 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 referenced 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 coordinates for linked areas** below.

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

You can use the HTML attribute `<area>` to define **individual areas of the image map**. At least one `area` attribute is required to use an image map. The following [HTML attributes](https://www.ionos.com/digitalguide/websites/web-development/html-attributes/) can be used to specify the properties of the image map and its individual reference areas:

- `shape`: The `shape` attribute defines the shape of clickable areas within an image. You can choose from `rect` for rectangles, `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 coordinates that outline the clickable area. These coordinates are often determined using a graphic editor.
- `href`: The `href` attribute links the clickable area to an internal or external URL.
- `alt`: The `alt` attribute provides alternative text if the image map fails to load, ensuring accessibility, especially for text-only browsers or users with disabilities.
- `title`: The `title` attribute adds a brief description 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 integrated into an HTML page?

Once the image map is defined, you can incorporate it **in the desired location on your website** using the `<img>` [HTML tag](https://www.ionos.com/digitalguide/websites/web-development/html-tags/). To link the image map and make it functional, you’ll also need to include the `<map>` element. The following example illustrates how to implement this:

```html
<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 automatically redirected to the corresponding landing pages, which open in a new window.

[![Image: Image map: Example image with markings](https://www.ionos.com/digitalguide/fileadmin/_processed_/9/1/csm_beach-image_38f2aa397d.webp "Image map: Example image with markings")](https://www.ionos.com/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/beach-image.jpg) In this example, three areas of the HTML image map were defined using shape attributes, all set to “rect”.


This is a markdown version of: [https://www.ionos.com/digitalguide/websites/web-development/html-image-map/](https://www.ionos.com/digitalguide/websites/web-development/html-image-map/) for AI/LLM consumption.