// India Tourism Information using DHTML
// Main_Page
<html xmlns="
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " /xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8"?>
head
title>Tourisam Information System using DHTML</title>
</head>
<body bgcolor ="pink">
<h1<center>India Tourism Information Center</center</h1>
<center<imgsrc="file:///z:/lab/india_images/india_map.jpg" alt="India-Map" usemap="#indiamap" /</center>
center<blink<font color="red" size="8">Click the Center position for the Tamilnadu, Kerla and Karnataka</font</blink</center>
<map name="indiamap">
<area shape="circle" coords="174,488,10" href="Tamilnadu.html" alt="Tamilnadu" text="Tamilnadu"/>
<area shape="circle" coords="140,499,10" href="Kerla.html" alt="Kerala" text="Kerala" />
<area shape="circle" coords="128,416,10" href="Karnatakka.html" alt="Karnatakka" text="Karnatakka"/>
</map>
</body>
</html>
//Tamilnadu.html
<html xmlns="
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " /xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8"?>
head
title>Tourisam Information System using DHTML</title>
<script language="javascript">
img1 = new Image();
img2 = new Image();
img3 = new Image();
img4 = new Image();
img1.src = "vaigai_dam.jpeg";
img2.src = "surulifalls.jpeg";
img3.src = "kurangani.jpeg";
img4.src = "meenachiamman.jpeg";
functionvaigai_dam()
{
document.getElementById('image').src= img1.src;
}
functionsuruli_falls()
{
document.getElementById('image').src= img2.src;
}
functionkurangani()
{
document.getElementById('image').src= img3.src;
}
functionmeenachi()
{
document.getElementById('image').src= img4.src;
}
</script>
</head>
<body bgcolor ="pink">
marquee<font size="30" color="red" >Tamilnadu Tourist Information Center</font</marquee>
imgsrc="file:///z:/lab/india_images/tamilnadu.gif" alt="Tamilnadu"/>
img id="image" height="100" width="100" style="position:absolute;left:780;top:400" />
<table border='1' style="position:absolute;left:750;top:550" >
caption>Tamilnadu Tourist Information System</caption>
tr
thSLNO</th
thPlaces</th
</tr
tr
td>1</td>
<td onmouseover="vaigai_dam()">Vaigai Dam</td>
</tr
tr
td>2</td>
<td onmouseover="suruli_falls()">Surulifalls</td>
</tr
tr
td>3</td>
<td onmouseover="kurangani()">Kurangani</td>
</tr
tr
td>4</td>
<td onmouseover="meenachi()">MeenachiAmman</td>
</tr
</table>
</body>
</html>
//Kerla.html
<html xmlns="
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " /xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8"?>
head
title>Tourisam Information System using DHTML</title>
<script language="javascript">
img1 = new Image();
img2 = new Image();
img3 = new Image();
img4 = new Image();
img1.src = "Thakkadey.jpeg";
img2.src = "athirapally_falls.gif";
img3.src = "cochin_Harbour.jpeg";
img4.src = "munnar.jpeg";
functionThakkadey()
{
document.getElementById('image').src= img1.src;
}
functionAthirapally_Falls()
{
document.getElementById('image').src= img2.src;
}
functionCochin_Harbour()
{
document.getElementById('image').src= img3.src;
}
functionMunnar()
{
document.getElementById('image').src= img4.src;
}
</script>
</head>
<body bgcolor ="pink">
marquee<font size="30" color="red" >Kerla Tourist Information Center</font</marquee>
imgsrc="file:///z:/lab/india_images/Kerla_Map.jpeg" alt="Kerla" height="400" width="400" />
img id="image" height="100" width="100" style="position:absolute;left:500;top:150" />
<table border='1' style="position:absolute;left:470;top:270" >
caption>Tamilnadu Tourist Information System</caption>
tr
thSLNO</th
thPlaces</th
</tr
tr
td>1</td>
<td onmouseover="Thakkadey()">Thakkadey</td>
</tr
tr
td>2</td>
<td onmouseover="Athirapally_Falls()">Athirapally Falls</td>
</tr
tr
td>3</td>
<td onmouseover="Cochin_Harbour()">Cochin Harbour</td>
</tr
tr
td>4</td>
<td onmouseover="Munnar()">Munnar</td>
</tr
</table>
</body>
</html>
//Karnataka.html
<html xmlns="
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " /xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8"?>
head
title>Tourisam Information System using DHTML</title>
<script language="javascript">
img1 = new Image();
img2 = new Image();
img3 = new Image();
img4 = new Image();
img1.src = "bangalore_lal_park.jpeg";
img2.src = "mangalore.jpeg";
img3.src = "mysore_palace.jpeg";
img4.src = "mysore_samundeswari_temple.jpg";
functionLal_Park()
{
document.getElementById('image').src= img1.src;
}
function Mangalore()
{
document.getElementById('image').src= img2.src;
}
functionMysore_Palace()
{
document.getElementById('image').src= img3.src;
}
functionSamuntieswari_Temple()
{
document.getElementById('image').src= img4.src;
}
</script>
</head>
<body bgcolor ="pink">
marquee<font size="30" color="red" >Karnataka Tourist Information Center</font</marquee>
imgsrc="file:///z:/lab/india_images/karanattak_map.jpeg" alt="Karnataka" height="400" width="400" />
img id="image" height="100" width="100" style="position:absolute;left:500;top:150" />
<table border='1' style="position:absolute;left:470;top:270" >
caption>Tamilnadu Tourist Information System</caption>
tr
thSLNO</th
thPlaces</th
</tr
tr
td>1</td>
<td onmouseover="Lal_Park()">Lal Park</td>
</tr
tr
td>2</td>
<td onmouseover="Mangalore()">Mangalore</td>
</tr
tr
td>3</td>
<td onmouseover="Mysore_Palace()">Mysore Palace</td>
</tr
tr
td>4</td>
<td onmouseover="Samuntieswari_Temple()">Samuntieswari Temple</td>
</tr
</table>
</body>
</html>
Output
India_Map
Tamilnadu
Kerla
Karnataka