-->
Showing posts with label map tag. Show all posts
Showing posts with label map tag. Show all posts

Wednesday, July 15, 2020

HTML page to work with map tag

Let's see following example.
----------------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--it is used for meta tags-->
<title><!-- it is used for title of page-->
inserting map
'map' means a part of image where we can have link or we can click
</title>
</head>
<body><!--it is a container-->
<img src="coffee.jpg" width="400px" height="400px" alt="building" usemap="#coffeeecen">
<!--img src is used to insert image-->
<!-- it has attributes width,height and alt-->
<!-- 'alt' is used if the picture could not be loaded/displayed-->
<!--we must make sure that the path(of image) is correct-->
<!--usemap attribute is used for picture's part we want to click-->
<!--we use hash tag for this-->
<map name="coffeeecen">
<area shape="rect" coords="40,2,166,49" alt="Computer" href="glass.html">
</map>
<!--we use mapname tag to connect specific area of picture-->
<!--we can use shape either rect or polygon or circle or default
-->
<!-- if we use default it would use entire region-->
<!--coords is for x and y value/coordinate-->
<!--values appear in pair(x and y)-->
<!--href is for that page which we want to be opened-->
</body>
</html>

 ----------------------------------------------------------------------
note:
Read the comments section written on side.

HTML page to click the certain part of picture using map tag

Let's be clear with following code.
-----------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--it is used for meta tags-->
<title><!-- it is used for title of page-->
inserting map
'map' means a part of image where we can have link or we can click
</title>
</head>
<body><!--it is a container-->
<img src="coffee.jpg" width="400px" height="400px" alt="building" usemap="#coffeeecen">
<!--img src is used to insert image-->
<!-- it has attributes width,height and alt-->
<!-- 'alt' is used if the picture could not be loaded/displayed-->
<!--we must make sure that the path(of image) is correct-->
<!--usemap attribute is used for picture's part we want to click-->
<!--we use hash tag for this-->
<map name="coffeeecen">
<area shape="rect" coords="40,2,166,49" alt="Computer" href="glass.html">
</map>
<!--we use mapname tag to connect specific area of picture-->
<!--we can use shape either rect or polygon or circle or default
-->
<!-- if we use default it would use entire region-->
<!--coords is for x and y value/coordinate-->
<!--values appear in pair(x and y)-->
<!--href is for that page which we want to be opened-->
</body>
</html>

 ---------------------------------------------------------------------------------------
First store that picture in a folder.