AIM:
To create a web page to embed an image in
the web page, to fix the hot spots and to show the related information when the
hot spot is clicked.
ALGORITHM:
Step 1: Open the notepad.
Step 2: Create the HTML header and give the
title as “Image map”.
Step 3: In the body of the HTML give the image
source to display the required image.
Step 4: Specify the name of the image using
“map name”.
Step 5: Open the source image in the paint
application to mark the hot spot and use the value in
“coords” while creating the
link.
Step 6:
Specify the name or url of the embedded
image in the link using “href”.
Step 7: Save the HTML codes and run the file
to get the output.
PROGRAM:
<html>
<head>
<title>image map</title>
</head>
<body>
<p>Click on the TN or on one of the states to watch it closer:</p>
<img src="images/india.jpg" alt="India" usemap="#indiamap">
<map name="indiamap">
<area shape="poly" coords="127,235,162,262,192,249,144,315,107,311" alt="AP" href="images/AP.jpg">
<area shape="poly" coords="113,327,142,320,103,388,92,342" alt="TN" href="images/TN.jpg">
<area shape="poly" coords="113,253,100,300,110,327,91,341,72,325,67,297" alt="Karnataka" href="images/Karnataka.jpg">
</map>
</body>
</html>
<head>
<title>image map</title>
</head>
<body>
<p>Click on the TN or on one of the states to watch it closer:</p>
<img src="images/india.jpg" alt="India" usemap="#indiamap">
<map name="indiamap">
<area shape="poly" coords="127,235,162,262,192,249,144,315,107,311" alt="AP" href="images/AP.jpg">
<area shape="poly" coords="113,327,142,320,103,388,92,342" alt="TN" href="images/TN.jpg">
<area shape="poly" coords="113,253,100,300,110,327,91,341,72,325,67,297" alt="Karnataka" href="images/Karnataka.jpg">
</map>
</body>
</html>
RESULT:
A web
page to embed an image in the web page, to fix the hot spots and to show the
related information when the hot spot is clicked has been created and verified
successfully.
No comments:
Post a Comment