Scribd
Upload
44 views

Image Formatting in HTML

The HTML <map> tag defines an image map which allows images to have clickable areas. An image map contains one <img> tag specifying the image and usemap attribute linking to the map, and one <map> tag containing multiple <area> tags that define the clickable shapes and coordinates for each area on the image. Clicking different areas can lead to different actions.

Uploaded by

SURYA K
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
44 views

Image Formatting in HTML

The HTML <map> tag defines an image map which allows images to have clickable areas. An image map contains one <img> tag specifying the image and usemap attribute linking to the map, and one <map> tag containing multiple <area> tags that define the clickable shapes and coordinates for each area on the image. Clicking different areas can lead to different actions.

Uploaded by

SURYA K
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 7

IMAGE FORMATTING

IN HTML
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.
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.
SUMMARY

Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

<picture> Defines a container for multiple image resources

You might also like