|
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 connected hyperlink. Clicking on one of the regions takes you to the connected 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 ="sun.png" target ="_blank" alt="Sun" />
</map> Result 
Adding some JavaScript We can add actions (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 ="sun.png" target ="_blank" alt="Sun" />
</map>
<p id="desc"></p>
</body></html> Examples Simple HTML Image map Image map with added JavaScript
|
