JavaScript Image Maps
HTML Image Maps
Adding Some JavaScript
An image map is an image with clickable regions
HTML Image Maps
<html>
<body>
<img src = "planets.gif" width="145" height="126" alt="planets" usemap="#planetmap"/>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" target="_blank" alt="sun"/>
<area shape="circle" coords="90,58,3" href="mercur.htm" target="_blank" alt="Mercury"/>
<area shape="circle" coords="124,58,8" href="venus.htm" target=_blank" alt="venus"/>
</map>
</body>
</html>
Adding Some JavaScript
we can add events(that can call a JavaScript) to the <area> tags inside the image map.
The <area> tag supports the
onClick
onDblClick
onMouseDown
onMouseUp
onMouseOver
onMouseMove
onMouseOut
onKeyPress
onKeyDown
onKeyUp
onFocus and
onBlur events
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>
<body>
<img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap"/>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" onMouseOver="writeText('The sun and the gas giant planets like Jupiter are by far the latgest objects in our Solar System.')" href="sun.htm" target="_blank" alt="sun"/>
<area shape="circle" coords="90,58,3" onMouseOver="writeText('The planet Mercury is very diffivult to study from the earth because it is always so close to the sun.')" href="mercur.htm" target="_blank" alt="mercur"/>
<area shape="circle" coords="124,58,8" onMouseOver="writeText('Until the 1960's venus was often considered a twin sister to the earth because venus is the nearest planet to us, and because the two plannets seem to share many characteristics.')" href="venus.htm" target="_blank" alt="venus"/>
</map>
<p id="desc"></p>
</body>
</html>
HTML Image Maps
Adding Some JavaScript
An image map is an image with clickable regions
HTML Image Maps
<html>
<body>
<img src = "planets.gif" width="145" height="126" alt="planets" usemap="#planetmap"/>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" target="_blank" alt="sun"/>
<area shape="circle" coords="90,58,3" href="mercur.htm" target="_blank" alt="Mercury"/>
<area shape="circle" coords="124,58,8" href="venus.htm" target=_blank" alt="venus"/>
</map>
</body>
</html>
Adding Some JavaScript
we can add events(that can call a JavaScript) to the <area> tags inside the image map.
The <area> tag supports the
onClick
onDblClick
onMouseDown
onMouseUp
onMouseOver
onMouseMove
onMouseOut
onKeyPress
onKeyDown
onKeyUp
onFocus and
onBlur events
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>
<body>
<img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap"/>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" onMouseOver="writeText('The sun and the gas giant planets like Jupiter are by far the latgest objects in our Solar System.')" href="sun.htm" target="_blank" alt="sun"/>
<area shape="circle" coords="90,58,3" onMouseOver="writeText('The planet Mercury is very diffivult to study from the earth because it is always so close to the sun.')" href="mercur.htm" target="_blank" alt="mercur"/>
<area shape="circle" coords="124,58,8" onMouseOver="writeText('Until the 1960's venus was often considered a twin sister to the earth because venus is the nearest planet to us, and because the two plannets seem to share many characteristics.')" href="venus.htm" target="_blank" alt="venus"/>
</map>
<p id="desc"></p>
</body>
</html>
No comments:
Post a Comment