0% found this document useful (0 votes)
29 views2 pages

35 Image Maps

JavaScript can be used to add click events to areas in an HTML image map. The area tag supports mouseover, mousedown, mouseup, mousemove, mouseout, keypress, keydown, and keyup events. An example shows an image map with planets where hovering over each area causes different text to appear in a paragraph below the image using JavaScript.

Uploaded by

BaneeIshaqueK
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
29 views2 pages

35 Image Maps

JavaScript can be used to add click events to areas in an HTML image map. The area tag supports mouseover, mousedown, mouseup, mousemove, mouseout, keypress, keydown, and keyup events. An example shows an image map with planets where hovering over each area causes different text to appear in a paragraph below the image using JavaScript.

Uploaded by

BaneeIshaqueK
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 2

JavaScript Image Maps

An image-map is an image with clickable regions.


HTML Image Maps
From our HTML tutorial we have learne that an image-map is an image with clickable regions.
!ormall"# each region has an associate h"perlink. $licking on one o% the regions takes "ou to the
associate link. Look at our simple HTML image-map.
Aing some JavaScript
&e can a events 'that can call a JavaScript( to the )area* tags insie the image map. The
)area* tag supports the on$lick# on+bl$lick# onMouse+own# onMouse,p# onMouse-ver#
onMouseMove# onMouse-ut# on.e"/ress# on.e"+own# on.e",p# onFocus# an on0lur events.
Here1s the HTML image-map e2ample# with some JavaScript ae3
42ample
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document!et"lement#y$d("desc")inner%T&'=txt(
)
</script>
</head>
<*ody>
<im! src="planets!if" width="+,-" hei!ht="+./"
alt="0lanets" usemap="1planetmap" />
<map name="planetmap">
<area shape ="rect" coords ="23234.3+./"
on&ouse5ver="writeText(6The 7un and the !as !iant planets li8e 9upiter
are *y far the lar!est o*jects in our 7olar 7ystem6)"
href ="sunhtm" tar!et =":*lan8" alt="7un" />
<area shape ="circle" coords =";23-43<"
on&ouse5ver="writeText(6The planet &ercury is very difficult to study
from the "arth *ecause it is always so close to the 7un6)"
href ="mercurhtm" tar!et =":*lan8" alt="&ercury" />
<area shape ="circle" coords ="+.,3-434"
on&ouse5ver="writeText(6=ntil the +;/2s3 >enus was often considered a
twin sister to the "arth *ecause >enus is the nearest planet to us3 and
*ecause the two planets seem to share many characteristics6)"
href ="venushtm" tar!et =":*lan8" alt=">enus" />
</map>
<p id="desc"></p>
</*ody>
</html>

You might also like