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> |