India Tourism Information Using DHTML

India Tourism Information Using DHTML

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

Top View