JavaScript Tutorial/HTML Tags/Area

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

Area

An instance of the Area object is created with each occurrence of the <area> tag within an HTML document.

In HTML documents, the <area> tag is used in conjunction with the <map> tag to define an area within a picture that will act as a hyperlink.

Because the Area object is a hyperlink, it is equivalent to the Link object in JavaScript.

The Area object is stored in the same array where Link objects are stored.

Properties/Methods/Event Handlers Description 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 handleEvent() Calls the event handler associated with this event onDblClick Invoked when the mouse is double-clicked while in the region defined by the Area object onMouseOut Invoked when the mouse moves outside the region defined by the Area object onMouseOver Invoked when the mouse moves into the region defined by the Area object



<html>
    <body>
    <map name="colorMap">
      <area name="redArea"
            coords="1,1,48,48"
            href="http://www.wbex.ru"
            target="_top"
            onMouseOver="overBox(0)"
            onMouseOut="clearBox()">
      <area name="greenArea"
            coords="51,1,99,49"
            href="http://www.wbex.ru"
            target="_top"
            onMouseOver="overBox(1)"
            onMouseOut="clearBox()">
      <area name="yellowArea"
            coords="1,51,51,99"
            href="http://www.wbex.ru"
            target="_top"
            onMouseOver="overBox(2)"
            onMouseOut="clearBox()">
      <area name="blueArea"
            coords="51,51,99,99"
            href="http://www.wbex.ru"
            target="_top"
            onMouseOver="overBox(3)"
            onMouseOut="clearBox()">
    </map>
    <img src="http://www.wbex.ru/style/logo.png" align="top"
         height="100"   width="100" usemap="#colorMap">
    <br><br><b><u>AREA Properties</u></b>
    <form name="myForm">
      hash=<input name="tHash" type="textarea"><br>
      host=<input name="tHost" type="textarea"><br>
      hostname=<input name="tHostName" type="textarea"><br>
      href=<input name="tHref" type="textarea"><br>
      pathname<input name="tPathName" type="textarea"><br>
      port=<input name="tPort" type="textarea"><br>
      protocol=<input name="tProtocol" type="textarea"><br>
      search=<input name="tSearch" type="textarea"><br>
      target=<input name="tTarget" type="textarea"><br>
    </form>
    <script language="javascript">
    <!--
    function overBox(num) {
      document.myForm.tHash.value = document.links[num].hash;
      document.myForm.tHost.value = document.links[num].host;
      document.myForm.tHostName.value = document.links[num].hostname;
      document.myForm.tHref.value = document.links[num].href;
      document.myForm.tPathName.value = document.links[num].pathname;
      document.myForm.tPort.value = document.links[num].port;
      document.myForm.tProtocol.value = document.links[num].protocol;
      document.myForm.tSearch.value = document.links[num].search;
      document.myForm.tTarget.value = document.links[num].target;
    }
    function clearBox()  {
      document.myForm.tHash.value = "";
      document.myForm.tHost.value = "";
      document.myForm.tHostName.value = "";
      document.myForm.tHref.value = "";
      document.myForm.tPathName.value = "";
      document.myForm.tPort.value = "";
      document.myForm.tProtocol.value = "";
      document.myForm.tSearch.value = "";
      document.myForm.tTarget.value = "";
    }
    // End Hide-->
    </script>
    </body>
    </html>


Area.handleEvent()

Syntax



document.links[num].handleEvent(event)


Area.host

Syntax



document.links[num].host


Area.hostname

Syntax



document.links[num].hostname


Area.href

Syntax



document.links[num].href


Area.onDblClick

Syntax



onDblClick="command"


Area.onMouseOut

Syntax



onMouseOut="command"


Area.onMouseOver

Syntax



onMouseOver="command"


Area.pathname

Syntax



document.links[num].pathname


Area.port

Syntax



document.links[num].port


Area.protocol

Syntax



document.links[num].protocol


Area.search

Syntax



document.links[num].search


Area.target

Syntax



document.links[num].target