Scribd Logo
Upload

Welcome to Scribd!

  • Ip 1

    Uploaded by

    Dhineshkumar D (Aaru)
    22 views9 pages
    The document describes creating an HTML page with an image map. It includes steps to add a map tag to the HTML, specify the image source and usemap attribute, add areas corresponding to hotspots with coordinates, names and links. Sample code is provided to create the main page with the map and individual pages for each hotspot with details about the location. The aim of creating such a page to display information on clicking different areas of an image is successfully achieved.

    Original Description:

    Original Title

    IP_1

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes creating an HTML page with an image map. It includes steps to add a map tag to the HTML, specify the image source and usemap attribute, add areas corresponding to hotspots with coordinates, names and links. Sample code is provided to create the main page with the map and individual pages for each hotspot with details about the location. The aim of creating such a page to display information on clicking different areas of an image is successfully achieved.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    22 views9 pages

    Ip 1

    Uploaded by

    Dhineshkumar D (Aaru)
    The document describes creating an HTML page with an image map. It includes steps to add a map tag to the HTML, specify the image source and usemap attribute, add areas corresponding to hotspots with coordinates, names and links. Sample code is provided to create the main page with the map and individual pages for each hotspot with details about the location. The aim of creating such a page to display information on clicking different areas of an image is successfully achieved.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 9

    Exp No : 1

    Date :
    IMAGE MAPPING IN HTML
    AIM :
    To create a web page which includes a map and display the related information when a hot spot
    is clicked in the map.
    PROCEDURE :
    ➢ Create a HTML file with map tag.
    ➢ Set the source attribute of the img tag to the location of the image and also set the use map attribute.
    ➢ Specify an area with name, shape and href to the appropriate values.
    ➢ Repeat Step 3 as many hot spots you want to put in the map.
    ➢ Create HTML files for each and every hot spot the user will select.

    PROGRAM :
    <!—main.html -->
    <!DOCTYPE html>

    <html>

    <head>

    <title>First Experiment</title>

    <meta charser="UTF-8" />

    <style>

    html {

    background-image: linear-gradient(90deg, orange, white, green);

    body {

    text-align: center;

    </style>

    </head>

    <body>

    <h1>IMAGE MAPPING IN HTML</h1>

    <h3>

    <strong>

    <marquee width="50%"><u>INDIA</u></marquee>

    </strong>

    </h3>

    <img src="india.jpg" usemap="#india" id="india" width="600" height="800" />


    <!—main.html-->
    <map name="india">

    <area shape="circle" coords="350, 340, 20" href="jharkand.html" target="_top" title="Jharkand"


    />

    <area shape="circle" coords="210, 660, 20" href="tamilnadu.html" target="_top" title="Tamil


    Nadu" />

    <area shape="circle" coords="250, 260, 20" href="uttarpradesh.html" target="_top" title="Uttar


    Pradesh" />

    <area shape="circle" coords="120, 290, 20" href="rajasthan.html" target="_top" title="Rajasthan"


    />

    </map>

    </body>

    </html>

    <!—tamilnadu.html -->

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Tamil Nadu</title>

    <style>

    html {

    background-image: linear-gradient(90deg, orange, white, green);

    .tamilnadu {

    text-align: center;

    .details {

    padding: 0% 10%;

    text-align: justify;

    letter-spacing: 1.5;

    line-height: 1.5;

    }
    <!—tamilnadu.html-->
    </style>

    </head>

    <body>

    <div class="tamilnadu">

    <h1>Tamil Nadu</h1>

    <div>

    <img src="tamilnadu.png" usemap="#tamilnadu" id="tamilnadu" width=" 600" height="600"


    alt="Dharmapuri">

    <map name="tamilnadu">

    <area shape="circle" coords="250, 150, 20" href="dharmapuri.html" target="_top" title="Dharmapuri"


    />

    </map>

    <pre style="text-align: justify; padding:5% 25% 5% 36%;">

    Area 1,30,058 sq.kms

    Population 7,21,47,030

    District Head Quarters Chennai

    Language Tamil</pre>

    </div>

    </div>

    <div class="details">

    <dl>

    <dt>

    <h4>History And Geography</h4>

    </dt>

    <dd>

    The State of Tamil Nadu has a hoary antiquity. Though early sangam classics throw historical references,

    we pass to recorded history only from the Pallavas. The southern states of India were under the
    hegemony of the Cholas, the Cheras and the Pandyas for centuries. The Pallavas held supremacy from
    about the second quarter of the fourth century A.D. They were the originators of the famous Dravidian
    style of temple architecture. The last Pallava ruler was Aparajita, in whose reign the later Cholas under
    Vijayalaya and Aditya asserted themselves by about the 10th century. At the end of the 11th century,
    Tamil Nadu was ruled by several dynasties like the Chalukyas, Cholas and Pandyas. In the two centuries
    that followed, the imperial Cholas gained paramountcy over South India.

    </dd>

    </dl>
    <!—dharmapuri.html-->
    </div>

    </body>

    </html>

    <!—dharmapuri.html -->

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Dharmapuri</title>

    <style>

    html {

    background-image: linear-gradient(90deg, orange, white, green);

    .dharmapuri {

    text-align: center;

    .details {

    padding: 0% 10%;

    text-align: justify;

    letter-spacing: 1.5;

    line-height: 1.5;

    </style>

    </head>

    <body>

    <div class="dharmapuri">

    <h1>Dharmapuri</h1>

    <div>

    <img src="dharmapuri.jpg" width="300" height="300" alt="Dharmapuri" />

    <pre style="text-align: justify; padding: 5% 25% 5% 36%">


    Area 4735.657327 Sq. Km.

    Population 15,06,843

    District Head Quarters Dharmapuri

    Language Tamil

    Website <span><a
    href="https://dharmapuri.nic.in/">https://dharmapuri.nic.in/</a></span></pre>

    </div>

    </div>

    <div class="details">

    <dl>

    <dt>

    <h4>History And Geography</h4>

    </dt>

    <dd>

    The earliest known chieftain, who ruled Tagadur (present Dharmapuri) during the Sangam era, is
    Adigaman Naduman Anji, whose patronage sustained the famous poetess Avvaiyar. The Western Gangas
    are also mentioned as having ruled Baramahal during the end of the 8th century. The last Mysore war in
    1799 added up several places in Hosur Taluk like Nilgiri, Anjetti, Durgam, Ratnagiri and Kelamangalam
    which were recaptured by British. After the fall of Srirangapattinam in which Tipu Sultan lost his life, the
    Balaghat area was also added to Salem District. The present Dharmapuri District was then a part of the
    Salem district. During the British rule in the country and even till 1947 Dharmapuri was one of the Taluks
    of Salem District. Dharmapuri District was formed on 2nd October, 1965 with its headquarters at
    Dharmapuri. Dharmapuri District was bifurcated into Dharmapuri and Krishnagiri districts on 9th
    September, 2004.

    </dd>

    </dl>

    </div>

    </body>

    </html>

    Result:
    Thus the creation of a webpage which includes a map and display the related information
    when a hot spot is clicked in the map was executed successfully.

    You might also like