JavaScript in Mapping, JavaScript Tutorial, Global Guide Line Technology.
Forum | Blog |


Basic JavaScript Guide.
 JScript Introduction.            
 JScript Why?                       
 JScript Recognitions.          
 JScript onMouseover.         
 JScript with Buttons.           
 JScript Alerts.                     
 JScript Variables.               
 JScript Operators.               
 JScript Functions.               
 JScript Prompts.                 
 JScript Conditions.             
 JScript Validations.            
 JScript Confirmation Boxes.
 JScript Browser Detection.  
 JScript Redirection.            
 JScript on Links.                 
 JScript Switch.                    
 JScript Loops.                     
 JScript Events.                    
 JScript Exception Handling.
 JScript Reserve Characters. 
 JScript with Objects.            
 JScript Math Object.           
 JScript using Dates.             
 JScript using String.            
 JScript using Arrays.            
 JScript Operations.              
 JScript Handling Cookies.   
 JScript in Mapping.
 JScript Time Out.                
 JScript Summary.                

JavaScript Tutorial >> JavaScript in Mapping.

     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.

<title>JavaScript Tutorial, Image mapping with JavaScript</title>
<script type="text/javascript">
 function details(txt)
  <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')">

  <img src ="Apples.gif" alt="Put your mouse over any apple" width ="198"
  height ="202" usemap="#myApplesMapping" /></p>
  <p id="description"></p>

Out put of JavaScript Image mapping example.

Put your mouse over any apple now.
Put your mouse over any apple

     Back             Next     

JavaScript Image Object Examples

[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2023 All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 354 visitors are online now