| 1 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
| 2 |
<head> |
| 3 |
<title>Nested <map> elements</title> |
| 4 |
<!-- Original: From HTML5 spec --> |
| 5 |
</head> |
| 6 |
<body> |
| 7 |
<h1>Shape 1: Only the red box and the green circle should be activatable |
| 8 |
as hyperlinks</h1> |
| 9 |
<img src="../../../support/sample-usemap.png" usemap="#shapes1" |
| 10 |
alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star."/> |
| 11 |
|
| 12 |
<h1>Shape 2: All of the four shapes should be activatable as hyperlinks</h1> |
| 13 |
<img src="../../../support/sample-usemap.png" usemap="#shapes2" |
| 14 |
alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star."/> |
| 15 |
|
| 16 |
<map name="shapes2" id="shapes2"> |
| 17 |
<map name="shapes1" id="shapes1"> |
| 18 |
<area shape="rect" coords="50,50,100,100"/> <!-- the hole in the red box --> |
| 19 |
<area shape="rect" coords="25,25,125,125" href="red.html" alt="Red box."/> |
| 20 |
<area shape="circle" coords="200,75,50" href="green.html" alt="Green circle."/> |
| 21 |
</map> |
| 22 |
<area shape="poly" coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle."/> |
| 23 |
<area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" |
| 24 |
href="yellow.html" alt="Yellow star."/> |
| 25 |
</map> |
| 26 |
</body> |
| 27 |
</html> |