Javascript Reference - HTML DOM Area protocol Property








The protocol property sets or gets the protocol part of the href attribute value.

Browser Support

protocol Yes Yes Yes Yes Yes

Syntax

Return the protocol property:

var v = areaObject.protocol

Set the protocol property:

areaObject.protocol = protocol;

Property Values

Value Description
protocol The protocol of a URL. Possible Values:
  • file:
  • ftp:
  • http:
  • https:
  • mailto:
  • etc..




Return Value

A String representing the URL protocol.

Example

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


<!DOCTYPE html>
<html>
<body>
<!--  w  w  w  . j  a  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" shape="circle" coords="124,58,8" alt="myImage" href="http://example.com">
</map>

<p id="demo"></p>

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

<script>
function myFunction() {
    var x = document.getElementById("myArea").protocol;
    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 protocol part of a specific area in an image-map.


<!DOCTYPE html>
<html>
<body>
<!--from   w  w  w .java 2 s.  com-->
<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">
</map>

<p id="demo"></p>

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

<script>
function myFunction() {
    document.getElementById("myArea").protocol = "mailto:";
    document.getElementById("demo").innerHTML = "changed";
}
</script>

</body>
</html>

The code above is rendered as follows: