JavaScript DHTML/HTML/Image Map

Материал из Web эксперт
Перейти к: навигация, поиск

Assign different location href for different part of an image

   <source lang="html4strict">

<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> 


 </source>


"coords" Example

   <source lang="html4strict">

<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="http://www.wbex.ru/style/logo.png" 

    id="myImg" 
    alt="http://www.wbex.ru" 
    width="200" 
    height="100" 
    usemap="#myMap">

<map name="myMap"> 

   <area id="area1" 
         shape="rect" 
         href="http://www.wbex.ru" 
         alt="wbex.ru" 
         onClick="return false">
   <area id="area2" 
         shape="rect" 
         href="http://www.wbex.ru" nohref="true" 
         alt="wbex.ru home page" 
         onClick="return false">
   <area id="area3" 
         shape="rect" 
         href="http://www.wbex.ru" 
         alt="wbex home page" 
         onClick="return false">
   <area id="area4" 
         shape="rect" 
         href="http://www.wbex.ru" 
         alt="wbex.ru" 
         onClick="return false">

</map>
<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> 


 </source>


Creating the Image Map

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Client-Side Image Maps</TITLE> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> </HEAD> <BODY> <MAP NAME="bizmap"> 

 <AREA NAME="whatsNew" COORDS="219,250,50" shape="circle" HREF="javascript:void(0)" onMouseOver="goWhatsNew();return true">
 <AREA NAME="products" COORDS="205,226,100" shape="circle" HREF="javascript:void(0)" onMouseOver="goProducts(); return true">
 <AREA NAME="company" COORDS="192,202,155" shape="circle" HREF="javascript:void(0)" onMouseOver="goCompany()">
 <AREA NAME="field" COORDS="183,189,188" shape="circle" HREF="javascript:void(0)" onMouseOver="goField()">

</MAP> <IMG SRC="http://www.wbex.ru/style/logo.png" BORDER="0" USEMAP="#bizmap"> </HTML> 


 </source>


Image Map Event Handling

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Image Map Event Handling</TITLE> <SCRIPT LANGUAGE="JavaScript"> </SCRIPT> </HEAD> <BODY>

Image Map Event Handling

<IMG SRC="http://www.wbex.ru/style/logo.png" USEMAP="#blockman"> <MAP NAME="blockman"> <AREA COORDS="80,88,120,125" HREF="A.htm" onMouseOver="myEye()"> <AREA COORDS="169,88,208,125" HREF="B.htm" onMouseOver="myEye()"> <AREA COORDS="124,147,165,181" HREF="C.htm" onMouseOut="myNose()"> <AREA COORDS="92,210,192,228" HREF="D.htm" onMouseOut="myMouth()"> <AREA COORDS="6,4,292,266" HREF="E.htm" onMouseOver="onHead()"> </MAP> </BODY> </HTML> 


 </source>


Image map shape

   <source lang="html4strict">

<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="http://www.wbex.ru/style/logo.png" id="myImg" alt="" width="200" height="100" usemap="#myMap2"> <map name="myMap2"> 

   <area id="area1" 
         shape="rect" 
         href="http://www.wbex.ru" 
         alt="wbex.ru" 
         onClick="return false">
   <area id="area2" 
         shape="rect" 
         href="http://www.wbex.ru" nohref="true" 
         alt="wbex.ru home page" 
         onClick="return false">
   <area id="area3" 
         shape="rect" 
         href="http://www.wbex.ru" 
         alt="wbex home page" 
         onClick="return false">
   <area id="area4" 
         shape="rect" 
         href="http://www.wbex.ru" 
         alt="wbex.ru" 
         onClick="return false">

</map>
<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> 


 </source>


isMap and useMap Example

   <source lang="html4strict">

<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.wbex.ru" 
         alt="wbex.ru" 
         onClick="return false">
   <area id="area2" 
         shape="rect" 
         href="http://www.wbex.ru" nohref="true" 
         alt="wbex.ru home page" 
         onClick="return false">
   <area id="area3" 
         shape="rect" 
         href="http://www.wbex.ru" 
         alt="wbex home page" 
         onClick="return false">
   <area id="area4" 
         shape="rect" 
         href="http://www.wbex.ru" 
         alt="wbex.ru" 
         onClick="return false">

</map>
<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> 


 </source>


Methods and Properties of the Area Object

   <source lang="html4strict">

/* JavaScript Unleashed, Third Edition by Richard Wagner and R. Allen Wyke ISBN: 067231763X Publisher Sams CopyRight 2000 +---------+----------------+-------------------------------------------------+ 

 Type      Item             Description

+---------+----------------+-------------------------------------------------+ 

 Method

+---------+----------------+-------------------------------------------------+ 

          handleEvent()     Calls the event handler associated with this event.

+---------+----------------+-------------------------------------------------+ 

Property

+---------+----------------+-------------------------------------------------+ 

           hash             The portion of the URL that is the anchor, 
                            including the # symbol.

+---------+----------------+-------------------------------------------------+ 

           host             The hostname (IP address) and port specified in the URL.

+---------+----------------+-------------------------------------------------+ 

           hostname         The hostname specified within the URL.

+---------+----------------+-------------------------------------------------+ 

           href             The entire URL.

+---------+----------------+-------------------------------------------------+ 

           pathname         The path of the file specified in the URL, beginning 
                            with the / symbol.

+---------+----------------+-------------------------------------------------+ 

           port             The port specified in the URL.

+---------+----------------+-------------------------------------------------+ 

           protocol         The protocol specified in the URL, including the ending 
                            colon (:).

+---------+----------------+-------------------------------------------------+ 

           search           The search part of the URL, including the beginning 
                            question mark (?).

+---------+----------------+-------------------------------------------------+ 

           target           The name of the target window in which the URL should 
                            be displayed.

+---------+----------------+-------------------------------------------------+ 

           text             The text that appears between the <area> and </area> tags.

+---------+----------------+-------------------------------------------------+ 

           x                The x-coordinate of the area.

+---------+----------------+-------------------------------------------------+ 

           y                The y-coordinate of the area.

+---------+----------------+-------------------------------------------------+ 


 </source>


"noHref" Example

   <source lang="html4strict">

<html> <head> <script language="JavaScript"> 

   function function11() {
       document.all.area1.coords = "0, 0, 100, 50";
   }
   function function12() {
       document.all.area2.coords = "100, 0, 200, 50"; 
       document.all.area2.noHref = "true";
   }
   function function13() {
       document.all.area3.coords = "0, 50, 100, 100";
   }
   function function14() {
       document.all.area4.coords = "100, 50, 200, 100";
   }
   function function15() {
       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.wbex.ru" 
         alt="wbex.ru" 
         onClick="return false">
   <area id="area2" 
         shape="rect" 
         href="http://www.wbex.ru" nohref="true" 
         alt="wbex.ru home page" 
         onClick="return false">
   <area id="area3" 
         shape="rect" 
         href="http://www.wbex.ru" 
         alt="wbex home page" 
         onClick="return false">
   <area id="area4" 
         shape="rect" 
         href="http://www.wbex.ru" 
         alt="wbex.ru" 
         onClick="return false">

</map>
<input type="button" value="Make area 1 active" onClick="function11();"> <input type="button" value="Make area 2 active" onClick="function12();"> <input type="button" value="Make area 3 active" onClick="function13();"> <input type="button" value="Make area 4 active" onClick="function14();"> <button onclick="function15();">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> 


 </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/Image_Map&oldid=2597»