Scribd
Upload
200 views10 pages

India

The document describes creating a web page using an image map with the following key points: 1. The web page displays an India map in one frame and its description in another. Clicking on state hot spots displays the respective state map and description. 2. A "capitals" link displays a table with each state name and its capital in the description frame. 3. HTML elements like <img>, <map>, <area>, and frames are used to create the image map and link state images to descriptions. CSS properties set image sizes.

Uploaded by

pediatech
Copyright
© Attribution Non-Commercial (BY-NC)
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
200 views10 pages

India

The document describes creating a web page using an image map with the following key points: 1. The web page displays an India map in one frame and its description in another. Clicking on state hot spots displays the respective state map and description. 2. A "capitals" link displays a table with each state name and its capital in the description frame. 3. HTML elements like <img>, <map>, <area>, and frames are used to create the image map and link state images to descriptions. CSS properties set image sizes.

Uploaded by

pediatech
Copyright
© Attribution Non-Commercial (BY-NC)
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/ 10

WEB PAGE CREATION USING IMAGE MAP

AIM:
To implement web page creation using image map

ALGORITHM:
1. Create a web page with India map in the first frame and its description in the second frame 2. On clicking the hot spots marked i.e the states the respective state map and its description should be displayed 3. In addition to this there should be a link named capitals which on clicking should display the state name and its capitals in the first frame 4. Each page should have a link to the home page

HTML ELEMENTS:
HTML Images - The <img> Tag and the Src Attribute. In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. Syntax for defining an image: <img src="url" alt="some_text"/> HTML Images - The Alt Attribute The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.The value of the alt attribute is an author-defined text HTML Images - Set Height and Width of an Image The height and width attributes are used to specify the height and width of an image.The attribute values are specified in pixels by default HTML Frames With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are:

1. Frames are not expected to be supported in future versions of HTML 2. Frames are difficult to use. (Printing the entire page is difficult). 3. The web developer must keep track of more HTML documents The HTML frameset Element The frameset element holds one or more frame elements. Each frame element can hold a separate document. The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them. The HTML frame Element The <frame> tag defines one particular window (frame) within a frameset. The HTML map Element The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas. The name attribute of the <map> element is required and it is associated with the <img>'s usemap attribute and creates a relationship between the image and the map. The <map> element contains a number of <area> elements, that defines the clickable areas in the image map. The Html usemap Attribute The usemap attribute specifies an image as a client-side image-map. An image-map is an image with clickable areas. The usemap attribute is associated with a <map> element's name or id attribute, and creates a relationship between the image and the map. Syntax: <img usemap="#mapname" /> The HTML area Element The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas).The <area> element is always nested inside a <map> tag.

The HTML shape Attribute The shape attribute specifies the shape of an area.The shape attribute is used together with the coords attribute to specify the size, shape, and placement of an area. Syntax <area shape="default|rect|circle|poly" /> The HTML coords attribute The coords attribute is used together with the shape attribute to specify the size, shape, and placement of a link in an <object> or <img> element.The coordinates of the top-left corner are 0,0. Syntax: <a coords="value"> The HTML target Attribute The target attribute specifies where to open the linked document Syntax <a target="_blank|_self|_parent|_top|framename"> Attribute Values Value _blank _self _parent _top framename Description Opens the linked document in a new window or tab Opens the linked document in the same frame as it was clicked (this is default) Opens the linked document in the parent frame Opens the linked document in the full body of the window Opens the linked document in a named frame

PROGRAM:
Image Map.html <html> <frameset cols="50%,*"> <frame name="f1" src="india1.html">

<frame name="f2" src="india.html"> </frameset> </html> india.html <html> <body> <ul> <li>India is my country <li>India is rich in resources <li>India is famous for its diversity </ul> </body> </html> india1.html <html> <body> <a href="capitals.html" target="f2">Capitals</a> <img src="india.jpg" alt="India" usemap="#image map" /> <map name="image map"> <area shape="rect" coords="174,378,235,431" href="andhra.html" target="_blank"></area> <area shape="rect" coords="27,262,77,294" href="gujarat.html" target="_blank"></area> <area shape="rect" coords="145,474,190,510" href="tamil.html" target="_blank"></area> <area shape="rect" coords="134,253,252,306" href="madhya.html" target="_blank"></area> <area shape="rect" coords="122,469,151,532" href="kerala.html" target="_blank"></area> </map> </body> </html>

tamil.html <html> <body> <a href="Image Map.html">Main</a> <table border="1"> <tr> <td><img src="tamil.jpg.bmp"> </img></td> <td> <ul> <li>Chennai is the capital of TamilNadu <li>Its a hub for many IT companies <li>Its famous for hospitality </ul> </td> </tr> </table> </body> </html> gujarat.html <html> <body> <a href="Image Map.html">Main</a> <table border="1"> <tr> <td><img src="gujarat.jpg">

</img></td> <td> <ul> <li>Gandhiji born in this state <li>The state of Gujarat has been one of the main centers of the Indus Valley Civilization. <li>Gujarati is the language spoken by the people </ul> </td> </tr> </table> </body> </html> kerala.html <html> <body> <a href="Image Map.html">Main</a> <table border="1"> <tr> <td><img src="kerala.jpg"> </img></td> <td> <ul> <li>Kerala is famous for coconuts <li>Malayalam is the language spoken by the people <li>Kerala was a major spice exporter as early as 3,000 BCE </ul> </td>

</tr> </table> </body> </html> madhya.html <html> <body> <a href="Image Map.html">Main</a> <table border="1"> <tr> <td><img src="madhya.jpg"> </img></td> <td> <ul> <li>Bhopal is the capital <li>Madhya Pradesh is the second largest state by area <li>The sixth largest state in India by population. </ul> </td> </tr> </table> </body> </html> andhra.html <html> <body> <a href="Image Map.html">Main</a>

<table border="1"> <tr> <td><img src="andhra.jpg"> </img></td> <td> <ul> <li>Hyderabad is the capital <li>Telugu is the language spoken by the people <li>India's fourth largest state by area and fifth largest by population </ul> </td> </tr> </table> </body> </html> capitals.html <html> <body> <a href="india.html" target="f2"> Main</a> <table border="1"> <tr> <th>State</th> <th>Capitals</th> </tr> <tr> <td>TamilNadu</td> <td>Chennai</td>

</tr> <tr> <td>Kerala</td> <td>Thiruvananthapuram</td> </tr> <tr> <td>Gujarat</td> <td>Gandhinagar</td> </tr> <tr> <td>Madhya Pradesh</td> <td>Bhopal</td> </tr> <tr> <td>Andhra Pradesh</td> <td>Hyderabad</td> </tr> </table> </body> </html>

OUTPUT:

RESULT:

Thus the web page creation using image map is done successfully

You might also like