Scribd
Upload
34 views5 pages

Web Page Using Image Mapping DATE:31.8.10

The document outlines how to create a web page using HTML image mapping. It describes drawing an India map in MS Paint, placing the image in an HTML document using image mapping tags to define hotspots for cities, and linking each hotspot to a separate page about that city. Example code is provided for the main page with the map and individual pages for Chennai, Goa, Delhi, and Kolkata that describe points of interest and include common branding.

Uploaded by

Vishal Gupta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
34 views5 pages

Web Page Using Image Mapping DATE:31.8.10

The document outlines how to create a web page using HTML image mapping. It describes drawing an India map in MS Paint, placing the image in an HTML document using image mapping tags to define hotspots for cities, and linking each hotspot to a separate page about that city. Example code is provided for the main page with the map and individual pages for Chennai, Goa, Delhi, and Kolkata that describe points of interest and include common branding.

Uploaded by

Vishal Gupta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 5

WEB PAGE USING IMAGE MAPPING

DATE:31.8.10
Aim:
To create a web page using HTML image map.
Hardware requirements:
Intel pentium Processor IV
128mb RAM
Software requirements:
Jdk1.6.0
Algorithm:
1.
2.
3.
4.

Create a HTML document


Draw India map using MS Paint and store it in a file
Place the image in the HTML document using <IMG> tag
Using image map concept fix the hot spots Chennai, Mumbai,
Kolkalta, Delhi in India map using <MAP> & <AREA> tags
5. Create 4 relevant pages for the four cities and invoke them when the
corresponding hot spot is clicked.

WEB PAGE USING IMAGE MAPPING


PROGRAM:
<html>
<head><title>India Map</title><head>
<body>
<h1 align="Center">India map<h1>
<center>
<img src="Z:\IP\image mapping\India.bmp" align="center" usemap="#Cities"
height="672" width="597" TITLE="INDIA MAP" ALT="IMAGE DOES NOT EXIST">
</center>
<Map Name="cities">
<area shape="CIRCLE" COORDS="240,556,25" href="Z:\IP\image
mapping\chennai.html" TITLE="This Connects to chennai" TABINDEX="1" >
<area shape="CIRCLE" COORDS="119,489,25" href="Z:\IP\image mapping\goa.html"
TITLE="This Connects to goa" TABINDEX="1" >
<area shape="CIRCLE" COORDS="195,208,25" href="Z:\IP\image
mapping\delhi.html" TITLE="This Connects to delhi" TABINDEX="1" >
<area shape="CIRCLE" COORDS="409,335,25" href="Z:\IP\image
mapping\kolkatta.html" TITLE="This Connects to kolkatta" TABINDEX="1" >
</map>
</body>
</html>
Chennai.html
<html>
<head><title>CHENNAI</title></head>
<body BGCOLOR="BLUE" TEXT="WHITE">
<h1><MARQUEE> WELCOME TO SINGARA CHENNAI</MARQUEE></h1>
<BR><BR><BR><BR><BR>
<CENTER><h3>Intersting Places to visit in Chennai</h3></CENTER>
<CENTER>
<OL>
<LI>BEECH</LI>
<LI>VANDALOOR ZOO</LI>
<LI>SPENCER PLAZA</LI>
</OL>
<BR><BR><BR><BR><BR><BR>
<B>VISIT US AT........</B>
<BR>
www.suntour.com
</CENTER>
</body></html>

Goa.html
<html>
<head><title>GOA</title></head>
<body BGCOLOR="BLUE" TEXT="WHITE">
<h1><MARQUEE> WELCOME TO GOA</MARQUEE></h1>
<BR><BR><BR><BR><BR>
<CENTER><h3>Intersting Places to visit in goa</h3></CENTER>
<CENTER>
<OL>
<LI>BEECH</LI>
<LI>TEMPLES</LI>
</OL>
<BR><BR><BR><BR><BR><BR>
<B>VISIT US AT........</B>
<BR>
www.suntour.com
</CENTER>
</body>
</html>
Delhi.html
<html>
<head><title>delhi</title></head>
<body BGCOLOR="BLUE" TEXT="WHITE">
<h1><MARQUEE> WELCOME TO DELHI</MARQUEE></h1>
<BR><BR><BR><BR><BR>
<CENTER><h3>Intersting Places to visit in delhi</h3></CENTER>
<CENTER>
<OL>
<LI>RED FORT</LI>
<LI>PARLIAMENT</LI>
<LI>TAJMAHAL</LI>
</OL>
<BR><BR><BR><BR><BR><BR>
<B>VISIT US AT........</B>
<BR>
www.suntour.com
</CENTER>
</body></html>

Kolkatta.html
<html>
<head><title>KOLKATTA</title></head>
<body BGCOLOR="green" TEXT="WHITE">
<h1><MARQUEE> WELCOME TO KOLKATTA</MARQUEE></h1>
<BR><BR><BR><BR><BR>
<CENTER><h3>Intersting Places to visit in kolkatta</h3></CENTER>
<CENTER>
<OL>
<LI>VICTORIA PALACE</LI>
<LI>HOWRAH BRIDGE</LI>
</OL>
<BR><BR><BR><BR><BR><BR>
<B>VISIT US AT........</B>
<BR>
www.suntour.com
</CENTER>
</body>
</html>
OUTPUT:

RESULT:
Thus the web page was designed using image mapping.

You might also like