HtmL image maps
You know that an image map
is an image with clickable regions. Normally, each region has an associated
hyperlink. Clicking on one of the regions takes you to the associated link.
Look at the simple HTML image map.
<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, onKey-Down, onKeyUp, onFocus, and onBlur events.
Try it yourself >>
<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 largest 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 difficult
to study from the Earth because it is always so close to
the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('Until the 1960s, Venus was often
considered a twin sister to the Earth because Venus is
the nearest planet to us, and because the two planets seem
to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>
<p id="desc"></p>
</body>
</html>
0 comments:
Post a Comment