Javascript Reference - HTML DOM Area host Property

The host property sets or gets the hostname and port part of the href attribute value.

Browser Support


`host`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the host property:

var v = areaObject.host

Set the host property:

areaObject.host = hostname:port

hostname:port specifies the hostname and port number of a URL.

Return Value

A String representing the domain name or IP address and port number of the URL.

Example

The following code shows how to get the hostname and port number of the URL for a specific area in an image-map.


<!DOCTYPE html>
<html>
<body>
<!-- w  ww. ja  v a 2 s.co m-->
<img src="http://java2s.com/style/demo/border.png" width="145" 
     height="126" usemap="#myImageMap">

<map name="myImageMap">
  <area id="myArea" shape="circle" coords="124,58,8" alt="myImage" 
      href="http://example.com#description">
</map>
<p id="demo"></p>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var x = document.getElementById("myArea").host;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the hostname and port number of the URL for a specific area in an image-map.


<!DOCTYPE html>
<html>
<body>
<!--from  w ww. ja  v a 2 s  .  c o  m-->
<img src="http://java2s.com/style/demo/border.png" width="145" 
     height="126" usemap="#myImageMap">

<map name="myImageMap">
  <area id="myArea" target="_blank" shape="circle" 
        coords="124,58,8" alt="myImage" href="http://example.com#description">
</map>
<p id="demo"></p>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myArea").host = "www.example.com:300";
    document.getElementById("demo").innerHTML = "changed";
}
</script>

</body>
</html>

The code above is rendered as follows: