This is my webpage...
Open Lightbox
Showing posts with label Sir Hashmi. Show all posts
Showing posts with label Sir Hashmi. Show all posts
Tuesday, August 20, 2013
Saturday, June 1, 2013
On mouse over THE text box is filled with the specific body join Image MAp in html
<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>
Subscribe to:
Posts (Atom)