Assign different location href for different part of an image : Image Map « HTML « JavaScript DHTML






  1. JavaScript DHTML
  2. HTML
  3. Image Map

Assign different location href for different part of an image

  

<html> 
<head> 
<title>Navigation Bar</title> 
<script type="text/javascript"> 
function goNext() { 
    var currOffset = parseInt(parent.currTitle); 
    
    if (currOffset < 5) { 
        currOffset += 1; 
        parent.entryForms.location.href =  currOffset + ".htm"; 
        parent.instructions.location.hash = currOffset; 
    } else { 
        alert("This is the last form."); 
    } 
} 
function goPrev() { 
    var currOffset = parseInt(parent.currTitle); 
    if (currOffset > 1) { 
        currOffset -= 1; 
        parent.entryForms.location.href = currOffset + ".htm"; 
        parent.instructions.location.hash = currOffset; 
    } else { 
        alert("This is the first form."); 
    }
} 
</script> 
</head> 
<body bgcolor="white"> 
<map name="navigation"> 
<area shape="rect" coords="5,80,66,116" href="javascript:goNext()"> 
<area shape="rect" coords="4,12,67,161" href="javascript:goPrev()"> 
</map> 
<img src="logo.gif" height="240" width="96" border="0" usemap="#navigation" alt="navigation bar"> 
</body> 
</html>








Related examples in the same category

1.Image map shape
2.'coords' Example
3.'noHref' Example
4.isMap and useMap Example
5. Image Map Event Handling
6.Creating the Image Map
7.Methods and Properties of the Area Object