Next »
56/920
« Previous

Create an Image Map with clickable regions in HTML and CSS

Description

The following code shows how to create an Image Map with clickable regions.

Example


<!--   w  w  w  .  j a v  a 2s. co  m-->
<!DOCTYPE HTML>
<html>
<body>
<img src="http://java2s.com/style/download.png"
width="145"
height="126"
alt="Image for Image Map"
usemap="#myImageMap" />
<map name="myImageMap">
<area shape="rect"
coords="0,0,80,130"
alt="Region 1"
href="http://java2s.com" />
<area shape="circle"
coords="90,60,3"
alt="Region 2"
href="http://java2s.com" />
<area shape="circle"
coords="125,60,8"
alt="Region 3"
href="http://java2s.com" />
</map>
</body>
</html>

Click to view the demo

The code above generates the following result.

Create an Image Map with clickable regions in HTML and CSS
Next »
« Previous