isMap and useMap Example : Image Map : HTML : JavaScript DHTML examples (example source code) Organized by topic

JavaScript DHTML
C++
PHP


JavaScript DHTML  »  HTML   » [  Image Map  ]   
 



isMap and useMap Example

Please note that some example is only working under IE or Firefox.

    
<html>
<head>
<script language="JavaScript">
    function function1() {
        document.all.area1.coords = "0, 0, 100, 50";
    }
    function function2() {
        document.all.area2.coords = "100, 0, 200, 50"
        document.all.area2.noHref = 'true';
    }
    function function3() {
        document.all.area3.coords = "0, 50, 100, 100";
    }
    function function4() {
        document.all.area4.coords = "100, 50, 200, 100";
    }
    function function5() {
        document.getElementById("area1").coords = "0, 0, 0, 0";
        document.getElementById("area2").coords = "0, 0, 0, 0";
        document.getElementById("area3").coords = "0, 0, 0, 0";
        document.getElementById("area4").coords = "0, 0, 0, 0";
    }
</script>
</head>
<body>
<img src="yourimage.gif" id="myImg" alt="" width="200" height="100" usemap="#myMap2"
<map name="myMap2"
    <area id="area1" 
          shape="rect" 
          href="http://www.java2s.com" 
          alt="java2s.com" 
          onClick="return false">
    <area id="area2" 
          shape="rect" 
          href="http://www.java2s.com" nohref="true" 
          alt="java2s.com home page" 
          onClick="return false">
    <area id="area3" 
          shape="rect" 
          href="http://www.java2s.com" 
          alt="java2s home page" 
          onClick="return false">
    <area id="area4" 
          shape="rect" 
          href="http://www.java2s.com" 
          alt="java2s.com" 
          onClick="return false">
</map>
<br>
<input type="button" value="Make area 1 active" onClick="function1();">
<input type="button" value="Make area 2 active" onClick="function2();">
<input type="button" value="Make area 3 active" onClick="function3();">
<input type="button" value="Make area 4 active" onClick="function4();">
<button onclick="function5();">Restore areas to inactive</button>
<button onclick="alert(myImg.isMap);">IS MAP</button>
<button onclick="alert(area2.noHref);">noHref for Area 2</button>
</body>
</html

    
      
      
Related examples in the same category
1.  Image map shape
2.  'coords' Example
3.  'noHref' Example
4.   Image Map Event Handling
5.  Creating the Image Map
6.  Methods and Properties of the Area Object
























Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.