Home Tutorial Html Html5 HTML5 map tag, Example of  <map> tag in html5

 
 

Share on Google+Share on Google+
HTML5 map tag, Example of  <map> tag in html5
Posted on: September 10, 2010 at 12:00 AM
Advertisement
In this section we will discuss the use of <map> tag and about its implementation in the html document.

HTML5 map tag, Example of  <map> tag in html5

In this section we will discuss the use of <map> tag and about its implementation in the html document. The <map> tag is used for defining an image map. Image map is the image divided in to clickable areas or we can say mouse sensitive areas. It means when we click on those areas in the image map it sends to another page or resource. It works just like a hyperlink works in the text. The <map> tag is used in conjuction with <img> tag. The <area> tag is used only within the <map> tag, the regions within image map is mouse sensitive.

Declaration Syntax:

The syntax for the <map> tag is as follows.

<map name="value">Areas Definition </map>

Attribute of <map> tag.

In the <map> tag there are only one specific attribute given below. some times programmer use "id" attribute, Have same meaning.

name="value"  The value of the attribute is the name assingned to the map.

Example_map_tag.html.

<!DOCTYPE html >
<html>
 <head>
  <title> Example of map Tag </title>
 </head>
 <body>
  <img src="comp.gif" width="350" height="299"  usemap="#computermap" />
     <map name="computermap">
     <area  coords="16, 78, 123, 242"  href="cpu.gif" shape="rect" alt="cpu"/>
     <area  coords="138, 90, 303, 239"  href="monitor.gif" shape="rect" alt="monitor"/>
     <area  coords="70, 244, 324, 290" href="keyboard.gif" shape="rect" alt="keyboard">
    </map>
 </body>
</html>

Output: For getting output, please click the image and then any part of the image.

Download This Example.

Difference between HTML5 and HTML4

There is no difference from html4.

Advertisement

Related Tags for HTML5 map tag, Example of  <map> tag in html5:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: September 10, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com