<html>
<head>
<script type="text/javascript">
function ear(txt){document.getElementById("ear").innerHTML=txt;}
function eye(txt){document.getElementById("eye").innerHTML=txt;}
function mouth(txt){document.getElementById("mouth").innerHTML=txt;}
function elbow(txt){document.getElementById("elbow").innerHTML=txt;}
function arm(txt){document.getElementById("arm").innerHTML=txt;}
function knee(txt){document.getElementById("knee").innerHTML=txt;}
function foot(txt){document.getElementById("foot").innerHTML=txt;}
function leg(txt) { document.getElementById("leg").innerHTML=txt;}
function hand(txt) { document.getElementById("hand").innerHTML=txt;}
function shoulder(txt) { document.getElementById("shoulder").innerHTML=txt;}
function nose(txt) { document.getElementById("nose").innerHTML=txt;}
function hair(txt) { document.getElementById("hair").innerHTML=txt;}
</script>
<style type="text/css">
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="image" align="center">
<map name="Image_map">
<area shape ="rect" coords ="234, 205, 244, 224"onmouseover="ear('Ear.')"/>
<area shape ="rect" coords ="252, 216, 265, 223"onmouseover="eye('Eye.')" />
<area shape="rect" coords="255, 244, 274, 252" onmouseover="mouth('Mouth.')" />
<area shape="circ" coords="211, 331, 9" onmouseover="elbow('Elbow.')" />
<area shape="rect" coords="245, 371, 263, 389" onmouseover="arm('Arm.')" />
<area shape="rect" coords="226, 459, 243, 475" onmouseover="knee('Knee.')" />
<area shape="rect" coords="278, 541, 329, 561" onmouseover="foot('Foot.')" />
<area shape="rect" coords="278, 480, 302, 499" onmouseover="leg('Leg.')" />
<area shape="rect" coords="265, 343, 294, 361" onmouseover="hand('Hand.')" />
<area shape="rect" coords="273, 261, 294, 271" onmouseover="shoulder('Shoulder.')" />
<area shape="circ" coords="268, 236, 7" onmouseover="nose('Nose.')" />
<area shape="circ" coords="295, 200, 22" onmouseover="hair('Hair.')" />
</map>
<img src ="popo.jpg" width ="530" height ="702" alt="Map is not loaded" usemap ="#Image_map" />
<h2 id="ear" style="left: 323; top: 201px; width: 16%; height: 27px;"> </h2>
<h2 id="eye" style="left: 330; top: 263px; width: 15%; height: 20px;"> </h2>
<h2 id="mouth" style="left: 345; top: 330px; width: 15%; height: 25px" ></h2>
<h2 id="elbow" style="left: 343; top: 387px; width: 15%" ></h2>
<h2 id="arm" style="left: 334; top: 452px; width: 15%; height: 20px" ></h2>
<h2 id="knee" style="left: 334; top: 510px; width: 15%" ></h2>
<h2 id="foot" style="left: 652; top: 511px; width: 15%" ></h2>
<h2 id="leg" style="left: 655; top: 451px; width: 14%" ></h2>
<h2 id="hand" style="left: 663; top: 388px; width: 14%" ></h2>
<h2 id="shoulder" style="left: 687; top: 330px; width: 13%" ></h2>
<h2 id="nose" style="left: 661; top: 262px; width: 14%" ></h2>
<h2 id="hair" style="left: 661; top: 201px; width: 14%" ></h2>
</div>
<p id="desc">Mouse over the different body parts and see their names.</p>
</body>
</html>
