With HTML image maps, you can create clickable areas on an image.
Image Maps
The HTML <map>
tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area>
tags.
Try to click on the computer, phone, or the cup of coffee in the image below:

Example
<img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> </map>
How Does it Work?
The idea behind an image map is that you should be able to perform different actions depending on where in the image you click. To create an image map you need an image, and some HTML code that describes the clickable areas.
The Image
The image is inserted using the <img>
tag. The only difference from other images is that you must add a usemap
attribute:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
The usemap
value starts with a hash tag #
followed by the name of the image map, and is used to create a relationship between the image and the image map.
Tip: You can use any image as an image map!
Create Image Map
Then, add a <map>
element. The <map>
element is used to create an image map, and is linked to the image by using the required name
attribute:
<map name="workmap">
The name
attribute must have the same value as the <img>
‘s usemap
attribute .
The Areas
Then, add the clickable areas. A clickable area is defined using an <area>
element.
Shape
You must define the shape of the clickable area, and you can choose one of these values:
rect
– defines a rectangular regioncircle
– defines a circular regionpoly
– defines a polygonal regiondefault
– defines the entire region
You must also define some coordinates to be able to place the clickable area onto the image.
Shape=”rect”
The coordinates for shape="rect"
come in pairs, one for the x-axis and one for the y-axis.
So, the coordinates 34,44
is located 34 pixels from the left margin and 44 pixels from the top:

The coordinates 270,350
is located 270 pixels from the left margin and 350 pixels from the top:

Now we have enough data to create a clickable rectangular area:
Example
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
HTML Background Images
A background image can be specified for almost any HTML element.
Background Image on a HTML element
To add a background image on an HTML element, use the HTML style
attribute and the CSS background-image
property:
Example
Add a background image on a HTML element:
<p style="background-image: url('img_girl.jpg');">
Example
Specify the background image in the <style>
element:
<style> p { background-image: url('img_girl.jpg'); } </style>
Background Image on a Page
If you want the entire page to have a background image, you must specify the background image on the <body>
element:
Example
<style> body { background-image: url('img_girl.jpg'); } </style>
Background Repeat
If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:
Example
<style> body { background-image: url('example_img_girl.jpg'); } </style>
Background Cover
If you want the background image to cover the entire element, you can set the background-size
property to cover.
This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):
Example
<style> body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } </style>
HTML <picture> Element
The HTML <picture> Element
The HTML <picture>
element gives web developers more flexibility in specifying image resources. The <picture>
element contains one or more <source>
elements, each referring to different images through the srcset
attribute. This way the browser can choose the image that best fits the current view and/or device. Each <source>
element has a media
attribute that defines when the image is the most suitable.
Example
Show different images for different screen sizes:
<picture> <source media="(min-width: 650px)" srcset="img_food.jpg"> <source media="(min-width: 465px)" srcset="img_car.jpg"> <img src="img_girl.jpg"> </picture>
When to use the Picture Element
There are two main purposes for the <picture>
element:
1. Bandwidth
If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first <source>
element with matching attribute values, and ignore any of the following elements.
2. Format Support
Some browsers or devices may not support all image formats. By using the <picture>
element, you can add images of all formats, and the browser will use the first format it recognizes, and ignore any of the following elements.
Example
<picture> <source srcset="img_avatar.png"> <source srcset="img_girl.jpg"> <img src="img_beatles.gif" alt="Beatles" style="width:auto;"> </picture>