Scribd
Upload
46 views

Internet and Web Programming: Ex No: 2 Date: 12.12.18

The document demonstrates using HTML image mapping to link different areas of an image map of India to Wikipedia pages about each Indian state. The image map outlines polygons for each state that link to demographic data about that state from Wikipedia when clicked.

Uploaded by

jo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
46 views

Internet and Web Programming: Ex No: 2 Date: 12.12.18

The document demonstrates using HTML image mapping to link different areas of an image map of India to Wikipedia pages about each Indian state. The image map outlines polygons for each state that link to demographic data about that state from Wikipedia when clicked.

Uploaded by

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

INTERNET AND WEB PROGRAMMING

Ex No: 2
Date: 12.12.18

Write a program to demonstrate the


concept
of HTML
Image
mapping
element.
Example:
Consider an image of India with different states. Use image
mapping
to give the
demographics of all the states from data.gov.in.
CODE:

<head>
<title>STATES OF INDIA</title>
</head>
<body>
<center>
<h1>STATES OF INDIA</h1>
</center>
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="states.gif" usemap="#image-map">

<map name="image-map">
<area target="_blank" alt="kerala" title="kerala"
href="https://en.wikipedia.org/wiki/Kerala"
coords="195,696,237,730,253,770,246,828,223,757"
shape="poly">
<area target="_blank" alt="andhra pradesh" title="andhra
pradesh" href="https://en.wikipedia.org/wiki/Andhra_Pradesh"
coords="265,613,456,527,338,620,337,677,260,666"
shape="poly">
<area target="_blank" alt="tamil nadu" title="tamil nadu"
href="https://en.wikipedia.org/wiki/Tamil_Nadu"
coords="242,727,337,677,321,760,258,825" shape="poly">
<area target="_blank" alt="karnataka" title="karnataka"
href="https://en.wikipedia.org/wiki/Karnataka"
coords="266,544,187,593,188,689,261,721,263,606"
shape="poly">
<area target="_blank" alt="maharashtra" title="maharashtra"
href="https://en.wikipedia.org/wiki/Maharashtra"
coords="150,503,185,445,350,462,170,612" shape="poly">
<area target="_blank" alt="telangana" title="telangana"
href="https://en.wikipedia.org/wiki/Telangana"
coords="299,501,372,561,269,611,269,545" shape="poly">
<area target="_blank" alt="gujarat" title="gujarat"
href="https://en.wikipedia.org/wiki/Gujarat"
coords="50,368,163,372,169,473,91,470" shape="poly">
<area target="_blank" alt="goa" title="goa"
href="https://en.wikipedia.org/wiki/Goa"
coords="167,611,179,616,177,635" shape="poly">
<area target="_blank" alt="madhya pradesh" title="madhya
pradesh" href="https://en.wikipedia.org/wiki/Madhya_Pradesh"
coords="182,436,292,311,402,381,349,465" shape="poly">
<area target="_blank" alt="chhattisgarh" title="chhattisgarh"
href="https://en.wikipedia.org/wiki/Chhattisgarh"
coords="421,391,384,403,340,464,367,561,444,422"
shape="poly">
</map>
</body>
<html>

OUTPUT

You might also like