HTML Image Maps

An image map is a technique in which a user can click anywhere inside of an image, and the location of
the click affects the outcome of the click. The idea is that clicking on different sections of the image
creates different effects.
For example, the image might be a map of the United States, and clicking within the borders of a
particular state leads to a page about that state.
An image map is an image with clickable areas.
 The areas are defined with one or more <area> tags.
 The HTML <map> tag defines an image map.
 The idea behind an image map is that you should be able to perform different actions depending on
where in the image you click.

Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

Try to click on the computer, phone, or the cup of coffee in the image below:
Example
Here is the HTML source code for the image map above:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" title="computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" title="phone" href="phone.htm">
<area shape="circle" coords="337,300,44" title="coffee" href="coffee.htm">

</map> 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.

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

o rect: left, top, right, bottom
 circle - defines a circular region
o circle: center-x, center-y, radius
 poly - defines a polygonal region
o poly: x1, y1, x2, y2, ...
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:

Example
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

Shape="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

Now you have enough data to create a clickable circular area:

Example
<area shape="circle" coords="337, 300, 44" href="coffee.htm">

This is the area that becomes clickable and will send the user to the page "coffee.htm":

Shape="poly"
The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a
polygon).

This can be used to create any shape.

Types of Image Map

Two kinds of imagemaps exist, server-side and client-side.

In the server-side method, when you click an image leading to multiple links, you are actually invoking a server side
program (ex- cgi-bin,php,etc program). The program typically reads a separate map file that tells the program where
to go, depending on what part of the image you are clicking. The program returns the destination to the web browser,
which then opens the page.
The imagemap is called "server-side" because the web browser must contact the remote host to find which site to
contact.

In Client-side imagemaps, rather than requiring the program on the remote host to determine what site to access,
the web browser itself associates regions of the image with the local sites

Clients-side image maps have a number of advantages over server-side maps.

 Reduced server load, since the mapping is done on the client.

 There is no need to communicate with server side scripts.
 The user can see the image maps associated hypertext URLs in the status bar of their browser before clicking.

The ismap attribute in an img tag creates a server-side image map: The browser sends the coordinates
of the clicked point to the server.
<a href="click_on_world_map.php" target="_self">
<img src="world_map.png" ismap> <!-- Noncompliant -->

</a

On the other hand, client-side image maps, which use the usemap attribute allow for each clickable area
to specify an alternate text, enabling accessibility for the blind.

<DIV>

HTML <div> tag is used to divide the web page into different divisions or parts.

There are five attributes you can use with div tag:

o id
o width
o height
o title
o style

Using <div> tag in HTML

Code:

<html>

<head>

<title>how to work div</title>

<style type=text/css>

.one{

background-color:orange;
}

.two{

background-color:yellow;

</style>

</head>

<body>

<div class="one" >

<h1> Content1 of div tag in Html </h1>

<p> Div tag is used for group many HTML tag like table, list, paragraph

in web page.

Mostly div tag used in empty web page to partition or make section for

content or HTML tags. </p>

</div>

<div class="two">

<h1> Content2 of div tag in Html </h1>

<p> To make section of required data or content multiple div tags are

used in container.

Example: header, footer, navigation bar, table, images, texts etc. </p>

</div>

</body>

</html>

Output:
 <body>
<h1> The &lt;div&gt; Tag </h1>
<div style="background-color:#8ebf42">
<p>We use the &lt;div&gt; tag to group two paragraphs for applying a background to the text, and to add color to
this
<span style="color:#1c87c9">word</span> we place it within &lt;span&gt; tag.</p>
<p> Pay attention, that the &lt;div&gt; tag is a block-level element, so a line break is placed before and after
it.</p>
</div>
</body>

The <div> Tag

We use the <div> tag to group two paragraphs for applying a background to the text,
and to add color to this word we place it within <span> tag.

Pay attention, that the <div> tag is a block-level element, so a line break is placed
before and after it.

div tag span tag

HTML div is a block element. HTML span is an inline element

HTML div element is used to wrap HTML span element is used to wrap
large sections of elements. small portion of texts, image etc.

The <span> tag can be useful for the following task:

o To change the language of a part of the text.

o To change the color, font, background of a part of text using CSS
o To apply the scripts to the particular part of the text.
o <body>
 o <h2>Example of span tag</h2>
o <p>I have choosen only
o <span style="color: red;">red</span>,
o <span style="color: blue;">blue</span>, and
o <span style="color: green;">green</span> colors for my painting.
o </p>
o </body>
o </html>
OUTPUT