HTML Area protocol Property: Area Protocol

HTML Area protocol Property: Understanding the Protocol of an Area Link

The protocol property of the HTML <a> (anchor) element, when used within a <map> and <area>, allows you to get or set the protocol part of the URL linked by an area within an image map. The protocol is the first part of a URL, such as http:, https:, ftp:, etc. This property is useful for dynamically determining or changing the protocol of a linked resource.

What is the protocol Property?

The protocol property reflects the protocol scheme of the URL specified in the href attribute of the <area> element. It includes the colon (:) at the end. This property is a string that can be both read and written, allowing you to modify the URL’s protocol via JavaScript.

Syntax

Getting the protocol

let protocol = areaObject.protocol;

Setting the protocol

areaObject.protocol = "new_protocol:";

Property Values

| Value | Description |
| :———– | :————————————————————————————————————————————————————————– |
| "protocol:" | A string representing the protocol part of the URL, including the colon (:). Examples: "http:", "https:", "ftp:", "mailto:", "file:", "data:". |

Examples

Example 1: Getting the protocol

In this example, we retrieve and display the protocol of the URL linked by an area in an image map.

<img
  src="shapes.png"
  alt="Shapes"
  usemap="#shapesMap"
  width="300"
  height="200"
/>

<map name="shapesMap">
  <area
    id="area1"
    shape="rect"
    coords="0,0,100,100"
    href="https://www.example.com/rectangle.html"
    alt="Rectangle"
  />
</map>

<p id="protocolOutput1"></p>

<script>
  const areaEl1 = document.getElementById("area1");
  const protocolEl1 = document.getElementById("protocolOutput1");

  const protocol1 = areaEl1.protocol;
  protocolEl1.textContent = "Protocol: " + protocol1;
</script>

Output:

Protocol: https:

Example 2: Setting the protocol

In this example, we change the protocol of the URL linked by an area and display the updated URL.

<img
  src="shapes.png"
  alt="Shapes"
  usemap="#shapesMap2"
  width="300"
  height="200"
/>

<map name="shapesMap2">
  <area
    id="area2"
    shape="circle"
    coords="150,50,40"
    href="http://www.example.com/circle.html"
    alt="Circle"
  />
</map>

<p id="protocolOutput2"></p>

<script>
  const areaEl2 = document.getElementById("area2");
  const protocolEl2 = document.getElementById("protocolOutput2");

  areaEl2.protocol = "ftp:";
  protocolEl2.textContent = "New Protocol: " + areaEl2.protocol;
</script>

Output:

New Protocol: ftp:

Example 3: Dynamically Changing the Protocol Based on User Input

In this example, we provide a text input field and a button. When the user enters a new protocol and clicks the button, the protocol of the area’s URL is updated.

<img
  src="shapes.png"
  alt="Shapes"
  usemap="#shapesMap3"
  width="300"
  height="200"
/>

<map name="shapesMap3">
  <area
    id="area3"
    shape="poly"
    coords="200,100,250,50,300,100"
    href="http://www.example.com/triangle.html"
    alt="Triangle"
  />
</map>

<label for="newProtocol">New Protocol:</label>
<input type="text" id="newProtocol3" value="https:" /><br /><br />
<button id="updateProtocolButton3">Update Protocol</button>
<p id="protocolOutput3"></p>

<script>
  const areaEl3 = document.getElementById("area3");
  const protocolEl3 = document.getElementById("protocolOutput3");
  const newProtocolInput3 = document.getElementById("newProtocol3");
  const updateProtocolButton3 = document.getElementById("updateProtocolButton3");

  updateProtocolButton3.addEventListener("click", function () {
    areaEl3.protocol = newProtocolInput3.value;
    protocolEl3.textContent = "Updated Protocol: " + areaEl3.protocol;
  });
</script>

After entering ftp: and clicking the “Update Protocol” button:

Output:

Updated Protocol: ftp:

Example 4: Handling Different Protocols and Validations

This example demonstrates how to validate and handle different protocols before setting the protocol property.

<img
  src="shapes.png"
  alt="Shapes"
  usemap="#shapesMap4"
  width="300"
  height="200"
/>

<map name="shapesMap4">
  <area
    id="area4"
    shape="rect"
    coords="0,100,100,200"
    href="http://www.example.com/lower-rectangle.html"
    alt="Lower Rectangle"
  />
</map>

<label for="newProtocol">New Protocol:</label>
<input type="text" id="newProtocol4" value="https:" /><br /><br />
<button id="updateProtocolButton4">Update Protocol</button>
<p id="protocolOutput4"></p>

<script>
  const areaEl4 = document.getElementById("area4");
  const protocolEl4 = document.getElementById("protocolOutput4");
  const newProtocolInput4 = document.getElementById("newProtocol4");
  const updateProtocolButton4 = document.getElementById("updateProtocolButton4");

  updateProtocolButton4.addEventListener("click", function () {
    const newProtocol = newProtocolInput4.value.trim();
    if (newProtocol.endsWith(":") && /^[a-zA-Z]+:$/.test(newProtocol)) {
      areaEl4.protocol = newProtocol;
      protocolEl4.textContent = "Updated Protocol: " + areaEl4.protocol;
    } else {
      protocolEl4.textContent = "Invalid Protocol format. Please use 'protocol:' format.";
    }
  });
</script>

If you enter an invalid format like ftp (without the colon), the output will be:

Output:

Invalid Protocol format. Please use 'protocol:' format.

If you enter a valid format like ftp:, the output will be:

Output:

Updated Protocol: ftp:

Practical Uses

• Dynamic URL Management: Adaptively change the protocol based on user preferences or network conditions (e.g., switching from http: to https:).
• Protocol Validation: Ensure that URLs conform to specific protocol requirements before submitting forms or navigating to new pages.
• Conditional Linking: Modify the linking protocol depending on the context of the application (e.g., using mailto: for email links or tel: for phone number links).

Notes

• Always include the colon (:) when setting the protocol property.
• Ensure that the new protocol is valid and supported by the browser.
• Be cautious when modifying URLs, as incorrect changes can lead to broken links or security vulnerabilities.

The HTMLAreaElement.protocol property provides a straightforward way to access and modify the protocol part of a URL linked within an <area> element. By understanding and utilizing this property, developers can create more dynamic and adaptable web applications.