Example of HTML image map - HTML CSS HTML

HTML CSS examples for HTML:Image

  1. HOME
  2. HTML CSS
  3. HTML
  4. Image

Description

Example of HTML image map

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head> 
  <title>Example of HTML image map</title> 
 </head> <!--  w w  w. java2s  .co  m-->
 <body> 
  <h1>Click on a shape to see how it works:</h1> 
  <img src="http://java2s.com/resources/d.png" alt="Geometrical Shapes" usemap="#shapes"> 
  <map name="shapes"> 
     <area shape="circle" coords="40,40,40" href="" alt="Circle"> 
     <area shape="poly" coords="148,2,104,80,193,80" href="http://java2s.com/resources/d.png" alt="Triangle"> 
     <area shape="rect" coords="226,2,323,80" href="http://java2s.com/resources/d.png" alt="Rectangle"> 
     <area shape="poly" coords="392,2,352,32,366,80,418,80,432,32" href="http://java2s.com/resources/d.png" alt="Pentagon"> 
  </map>   
 </body>
</html>

Related Tutorials