JavaScript Image Maps

« Previous Chapter Next Chapter »

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. .

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 HTML image-map example, with some JavaScript added:

Example

<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>

<body>
<img src="../../images/avatar.jpg" width="145" height="126"
alt="avatar" usemap="#avatarmap" />

<map name="avatarmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant avatars like Jupiter
are by far the largest objects in our Solar System.')"
href ="avatar.html" target ="_blank" alt="Sun" />

<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('The avatar Mercury is very difficult to study
from the Earth because it is always so close to the Sun.')"
href ="mercury.html" 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 avatar to us, and
because the two avatars seem to share many characteristics.')"
href ="venus.html" target ="_blank" alt="Venus" />
</map>

<p id="desc"></p>

</body>
</html>
Code it Online »

« Previous Chapter Next Chapter »
Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!