HTML Image Maps | Background Color | A Picture Element

Navdeep kaur HTML

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:

Workplace

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 region
  • circle – defines a circular region
  • poly – defines a polygonal region
  • default – 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:

Workplace

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

Workplace

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>

HTML Image Maps | Background Color | A Picture Element
Show Buttons
Hide Buttons