Scribd
Upload
26 views

HTML Image Maps Image Maps

The document explains what HTML image maps are and how they work. Image maps allow parts of an image to be clickable links. An image map uses the <map> and <area> tags to define the clickable areas of an image linked to other pages.

Uploaded by

Jeaver Mhor G. Calinsuay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views

HTML Image Maps Image Maps

The document explains what HTML image maps are and how they work. Image maps allow parts of an image to be clickable links. An image map uses the <map> and <area> tags to define the clickable areas of an image linked to other pages.

Uploaded by

Jeaver Mhor G. Calinsuay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML Image Maps

Image Maps
The <map> tag defines an image-map. An image-map is an image with clickable areas.

<!DOCTYPE html>
<html>
<head>
<title>Image Map</title
</head>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<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="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>

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 a map containing some rules that describe 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.

The 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 name attribute:
<map name="workmap">
The name attribute must have the same value as the 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 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

Coordinates
You must define some coordinates to be able to place the clickable area onto the image.
The coordinates come in pairs, one for the x-axis and one for the y-axis.

Rectangle
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:
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

Circle
To add a circle area, first locate the coordinates of the center of the circle:
337, 300
Then specify the radius of the circle:
44 pixels
<area shape="circle" coords="337, 300, 44" href="coffee.htm">

Image Map and JavaScript


A clickable area does not have to be a link to another page, it can also trigger a JavaScript function.

HTML Picture Element


The picture element allows us to display different pictures for different devices or screen sizes.

The HTML <picture> Element


HTML5 introduced the <picture> element to add more flexibility when specifying image resources.

The <picture> element contains a number of <source> elements, each referring to different image sources. This way the
browser can choose the image that best fits the current view and/or device.

Each <source> element have attributes describing when their image is the most suitable.

<!DOCTYPE html>
<html>
<head>
<title>Picture Element</title>
</head>
<body>

<h2>The picture Element</h2>

<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" style="width:auto;">
</picture>

<p>Resize the browser to see different versions of the picture loading at different viewport sizes.
The browser looks for the first source element where the media query matches the user's current viewport width,
and fetches the image specified in the srcset attribute.</p>

<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support the picture element, or if
none of the source tags matched.
</p>

<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p>

</body>
</html>

You might also like