|
An image-map is an image with clickable
regions.
HTML Image Maps
From our HTML tutorial we have learned 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.
Example
The example below demonstrates how to create an HTML image
map, with clickable regions. Each of the regions is a hyperlink:
<img src ="planets.gif"
width ="145" height ="126"
alt="Planets"
usemap ="#planetmap" />
<map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="" target ="_blank"
alt="Sun" />
<area shape ="circle" coords ="90,58,3"
href ="" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="" target ="_blank"
alt="Venus" />
</map>
|
Result
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.
Here's the above example, with some JavaScript added:
<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 id ="planetmap" 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 ="" 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 ="" 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 ="" target ="_blank" alt="Venus" />
</map>
<p id="desc"></p>
</body>
</html>
|
|
