Ex No: Web Page Creation Using Image Map Date

EX NO: WEB PAGE CREATION USING IMAGE MAP
DATE:
AIM:
To create a webpage with the following using HTML:
a. Embed an image in a webpage.

b. Show all the related information when the hotspots are clicked.
ALGORITHM:
1. Create an html file with two frames. One frame containing the map of India and the
other tag containing information about India. This will serve as the main page.
2. Create hotspots for five states in the image of India.
3. Create a separate html page for each state containing an image of the state and
information on the state.
4. When the hotspot for a particular state is clicked, the same corresponding html page
opens in the same tab.
5. When the hotspot for Delhi is clicked, a page containing a table of states, capitals and
languages is displayed.
DESCRIPTION:
1.  - Defines a comment
Example:

2.<frameset> - Defines a set of frames

The <frameset> tag defines a frameset. The frameset element holds one or more frame elements. Each
frame element can hold a separate document.
Example:
A simple three-framed page:
<html>
<frameset cols="25%,*,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
Attribute Value Description

cols pixels Specifies the number and size of columns in a frameset
%
*
rows pixels Specifies the number and size of rows in a frameset
%
*
3.<area> - Defines an area inside an image-map

The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas).
The area element is always nested inside a <map> tag.
Note: The usemap attribute in the <img> tag is associated with the map element's name attribute, and
creates a relationship between the image and the map.
Required Attributes:
alt text Specifies an alternate text for an area
Optional Attributes
coords coordinates Specifies the coordinates of an area
href URL Specifies the destination of a link in an area
nohref nohref Specifies that an area has no associated link
shape default Specifies the shape of an area
rect
circle
poly
target _blank Specifies where to open the linked page specified in the
_parent href attribute
_self
_top
4.<img> - Defines an image

The <img> tag embeds an image in an HTML page. Images are not technically inserted into an HTML
page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes: src and alt.
alt text Specifies an alternate text for an image
src URL Specifies the URL of an image
Optional Attributes
align top Deprecated. Use styles instead.
bottom Specifies the alignment of an image according to
middle surrounding elements
left
right
border pixels Deprecated. Use styles instead.
Specifies the width of the border around an image
height pixels Specifies the height of an image
%
hspace pixels Deprecated. Use styles instead.
Specifies the whitespace on left and right side of an
image
ismap ismap Specifies an image as a server-side image-map
longdesc URL Specifies the URL to a document that contains a long
description of an image
usemap #mapname Specifies an image as a client-side image-map
vspace pixels Deprecated. Use styles instead.
Specifies the whitespace on top and bottom of an image
width pixels Specifies the width of an image
%
Example:
An image is marked up as follows:
<img src="angry.gif" alt="Angry face" />
5.<map> - Defines an image-map

The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.
The name attribute is required in the map element. This attribute is associated with the <img>'s usemap
attribute and creates a relationship between the image and the map.
The map element contains a number of area elements, that defines the clickable areas in the image
map.
name mapname Specifies the name for an image-map
Example:
An image-map, with clickable areas:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>
CODE:
IndiaMap.html
<html>
<head>
<title>INDIA MAP</title>
<head>
<body>
<img src="images/India_map.jpg" usemap="#IndiaStates" />>
<map name="IndiaStates">
<area shape="rect" coords="100,20,182,110" href="Kashmir.html" alt="Kashmir" target="_parent"/>
<area shape="circle" coords="50,280,35" href="Gujarat.html" alt="Gujarat" target="_parent"/>
<area shape="circle" coords="200,380,45" href="Andra.html" alt="Andra" target="_parent"/>
<area shape="circle" coords="175,280,55" href="Madhya.html" alt="Madhya" target="_parent"/>
<area shape="circle" coords="180,480,25" href="Tamil.html" alt="Tamil" target="_parent"/>
<area shape="circle" coords="130,490,15" href="Kerala.html" alt="Kerala" target="_parent"/>
<area shape="circle" coords="150,180,15" href="Capitals.html" alt="Capitals" target="_parent"/>
</map>
</body>
</html>
IndiaInfo.html
<html>
<head>
<title>INDIA INFO</title>
<head>
<body>
It is the seventh-largest country by geographical area the second-most populous country with over 1.2
billion people the most populous democracy in the world. Mainland India is bounded by the Indian
Ocean on the south, the Arabian Sea on the west, and the Bay of Bengal on the east.
Home to the ancient Indus Valley Civilisation
</body>
</html>
India.html
<html>
<head>
<title>INDIA</title>
<frameset cols="50%,50%">
<frame name="IndiaMap" src="IndiaMap.html">
<frame name="IndiaInfo" src="IndiaInfo.html">
</frameset>
<head>
<body>
</body>
</html>
Capitals.html
<html>
<head>
<head>
<body>
<table border="1">
<tr>
<th>STATE</th>
<th>CAPITAL</th>
<th>LANGUAGE</th>
</tr>
<tr>
<td>Andhra Pradesh</td>
<td>Hyderabad</td>
<td>Telugu</td>
</tr>
<tr>
<td>Gujarat</td>
<td>Gandhinagar</td>
<td>Gujarati</td>
</tr>
<tr>
<td>Jammu and Kashmir</td>
<td>• Srinagar (S)
• Jammu (W)</td>
<td>Kashmiri,Dogri,Urdu</td>
</tr>
<tr>
<td>Kerala</td>
<td>Thiruvananthapuram</td>
<td>Malayalam</td>
</tr>
<tr>
<td>Madhya Pradesh</td>
<td>Bhopal</td>
<td>Standard Hindi,Marathi</td>
</tr>
<tr>
<td>Tamil Nadu</td>
<td>Chennai</td>
<td>Tamil</td>
</tr>
</table>
</body>
</html>
Tamil.html
<html>
<head>
<head>
<body>
<table border="1">
<tr>
<td><img src="images/tamil1.jpg"/></td>
<td>It was created on 1 November 1956, with the passing of the States Reorganisation Act bringing
together the areas where Malayalam was the dominant language. Thiruvananthapuram is the capital
and largest city of Kerala. Kochi and Kozhikode are the other major cities. Kerala is also known for its
many small towns that are scattered across the state, thus creating a higher density of population.
Kerala is a popular tourist destination famous for its backwaters, Ayurvedic treatments and tropical
greenery.
</td>
</tr>
</table>
</body>
</html>
Andra.html
<html>
<head>
<head>
<body>
<table border="1">
<tr>
<td><img src="images/andhra.jpg"/></td>
<td> It is India's fourth largest state by area and fifth largest by population. Its capital and largest city
is Hyderabad.The State has the second-longest coastline 972 km (604 mi) among all the States in India.
The official language of Andhra Pradesh is Telugu, while other languages spoken in Andhra Pradesh are
Kannada, Urdu, English, Tamil and Hindi.</td>
</tr>
</table>
</body>
</html>
Gujarat.html
<html>
<head>
<head>
<body>
<table border="1">
<tr>
<td><img src="images/gujarat.jpg"/></td>
<td>Its capital is Gandhinagar, while its largest city is Ahmedabad. Gujarat is home to the Gujarati-
speaking people of India. The state encompasses major sites of the ancient Indus Valley Civilization, such
as Lothal and Dholavira. Lothal, one of the world's first ports, is located in Gujarat. Mohandas Gandhi,
considered India's "father of the nation", was a Gujarati who led the Indian Independence Movement
against the British colonial rule. Even today, Gujarat has one of the fastest growing economies in
India</td>
</tr>
</table>
</body>
</html>
Kerala.html
<html>
<head>
<head>
<body>
<table border="1">
<tr>
<td><img src="images/kera.jpg"/></td>
<td> Its capital and largest city is Chennai. Tamil Nadu lies in the southernmost part of the Indian
Peninsula Tamil Nadu is the eleventh largest state in India by area (about the size of Greece) and the
seventh most populous state.It is the fifth largest contributor to India's GDP[4] and ranks tenth in
Human Development Index as of 2006.Tamil Nadu is also the most urbanised state in India.The state has
the highest number (10.56%) of business enterprises and stands second in total employment (9.97%) in
India,compared to the population share of about 6%.</td>
</tr>
</table>
</body>
</html>
Madhya.html
<html>
<head>
<head>
<body>
<table border="1">
<tr>
<td><img src="images/madhya.jpg"/></td>
<td> Madhya Pradesh,often called the Heart of India, is a state in central India. Its capital is Bhopal.
Madhya Pradesh was the largest state in India until 1 November 2000, when the state of Chhattisgarh
was carved out of it. It borders the states Uttar Pradesh, Chhattisgarh, Maharashtra, Gujarat and
Rajasthan. The state has an area of 308,252 km2</td>
</tr>
</table>
</body>
</html>
OUTPUT:
RESULT:
Thus The web page has been created with hotspots.

Ex No: Web Page Creation Using Image Map Date

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ex No: Web Page Creation Using Image Map Date

Uploaded by

Copyright:

Available Formats

EX NO: WEB PAGE CREATION USING IMAGE MAP

To create a webpage with the following using HTML:

a. Embed an image in a webpage.

1.  - Defines a comment

2.<frameset> - Defines a set of frames

Attribute Value Description

3.<area> - Defines an area inside an image-map

4.<img> - Defines an image

5.<map> - Defines an image-map

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

Thus The web page has been created with hotspots.

You might also like