Back
Next
Here in JavaScript Tutorial we will learn
how image maps work in JavaScript, then how they are created and what they're used for
in our real life.
What is image map?
In an image mapping one image is used and multiple of clickable areas we define this technique is called image maps,
now we will grip how to handle it with JavaScript.
Shapes used in JavaScript image map.
There are three different shapes used in image map first is "Rect" second is
"Circ" and third is "poly".
rect:
It is short for rectangle.
We'll need two different
co-ordinates Top right and
bottom left.
For example:
shape ="rect"
cords
="0,0,10,10"
Circ:
It is the easiest of all.
All we need is the centre
co-ordinate the point in
the centre of our shape
and it's radius size.
For example:
shape ="circ"
cords
="30,100,10"
Poly:
It is used for the polygon.
So if we are going to have a
pentagon, then we list all
five co-ordinates. All
co-ordinates should have
listed in order.
For example:
shape ="poly"
cords
="40,50,55,60,70,80,85,90,145,126"
JavaScript Image mapping Example
In Image mapping we can add events that can call a
JavaScript Events 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.
We use only onMouseOver event here to explain how to use JavaScript with image
mapping.
<html>
<head>
<title> JavaScript
Tutorial, Image
mapping with JavaScript</title>
<script type="text/javascript">
function details(txt)
{
document.getElementById("description").innerHTML=txt
}
</script>
</head>
<body>
<map name="myApplesMapping">
<area href="" shape=" circle" coords="139, 130, 48"
onmouseover="details('Red
Apple')">
<area href="" shape=" circle" coords="88, 55, 47"
onmouseover="details('Green
Apple')">
<area href="" shape=" circle" coords="48, 137, 48"
onmouseover="details('Yellow
Apple')">
</map>
<img src ="Apples.gif" alt="Put your mouse over any apple" width ="198"
height
="202" usemap="#myApplesMapping" /></p>
<br>
<p id="description"></p>
</body>
</html>
Out put of JavaScript Image mapping example.
Put your mouse over any apple now.
Back
Next
|
Home 
