HTML Area username Property: Area Username

HTML Area username Property: Comprehensive Guide

The username property of the HTML <area> element is used to set or retrieve the username portion of the URL associated with a specific area in an image map. This property allows you to programmatically access and modify the username within the href attribute of an <area> element. In this guide, we’ll delve into the details of the username property, covering its syntax, usage, and practical examples.

Understanding the HTML Area username Property

The username property is a string that represents the username part of the URL specified in the href attribute of an <area> element. It’s a valuable tool for dynamically manipulating URLs and handling user authentication scenarios within image maps.

Syntax

To set or retrieve the username property, use the following syntax:

• Getting the username:

let username = areaObject.username;

• Setting the username:

areaObject.username = "newUsername";

Where areaObject is a reference to an HTML <area> element.

Practical Examples

Let’s explore practical examples demonstrating how to use the username property.

Example 1: Retrieving the username

In this example, we’ll retrieve the username from an <area> element and display it.

<img src="shapes.png" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area
    id="myArea1"
    shape="rect"
    coords="0,0,82,126"
    href="https://username:[email protected]/index.html"
    alt="Sun"
  />
  <area
    shape="circle"
    coords="90,58,3"
    href="circle.htm"
    alt="Mercury"
  />
  <area
    shape="circle"
    coords="124,58,8"
    href="venus.htm"
    alt="Venus"
  />
</map>

<p id="output1"></p>

<script>
  const areaElement1 = document.getElementById("myArea1");
  const username1 = areaElement1.username;
  document.getElementById("output1").textContent =
    "Username: " + username1;
</script>

Output:

Username: username

In this example, we retrieve the username from the href attribute of the specified <area> element and display it in a paragraph element.

Example 2: Setting the username

In this example, we’ll set the username of an <area> element dynamically.

<img src="shapes.png" alt="Planets" usemap="#planetmap2" />

<map name="planetmap2">
  <area
    id="myArea2"
    shape="rect"
    coords="0,0,82,126"
    href="https://example.com/index.html"
    alt="Sun"
  />
  <area
    shape="circle"
    coords="90,58,3"
    href="circle.htm"
    alt="Mercury"
  />
  <area
    shape="circle"
    coords="124,58,8"
    href="venus.htm"
    alt="Venus"
  />
</map>

<p id="output2"></p>

<script>
  const areaElement2 = document.getElementById("myArea2");
  areaElement2.username = "newUsername";
  document.getElementById("output2").textContent =
    "Updated href: " + areaElement2.href;
</script>

Output:

Updated href: https://[email protected]/index.html

In this example, we dynamically set the username of the <area> element.

Example 3: Handling Authentication Scenarios

In a more complex scenario, you might use the username property to handle authentication within an image map.

<img src="shapes.png" alt="Planets" usemap="#planetmap3" />

<map name="planetmap3">
  <area
    id="myArea3"
    shape="rect"
    coords="0,0,82,126"
    href="https://example.com/protected.html"
    alt="Sun"
  />
</map>

<button id="authButton">Authenticate</button>
<p id="output3"></p>

<script>
  const areaElement3 = document.getElementById("myArea3");
  const authButton3 = document.getElementById("authButton");
  const output3 = document.getElementById("output3");

  authButton3.addEventListener("click", function () {
    const username3 = prompt("Enter your username:");
    if (username3) {
      areaElement3.username = username3;
      output3.textContent = "Updated href: " + areaElement3.href;
    } else {
      output3.textContent = "Authentication cancelled.";
    }
  });
</script>

In this example, clicking the “Authenticate” button prompts the user for a username. If a username is entered, it updates the username property of the <area> element, modifying the href attribute accordingly.

Example 4: Combining with Other URL Properties

The username property can be combined with other URL properties to construct or modify URLs dynamically.

<img src="shapes.png" alt="Planets" usemap="#planetmap4" />

<map name="planetmap4">
  <area
    id="myArea4"
    shape="rect"
    coords="0,0,82,126"
    href="https://example.com:8080/path/page.html?query=value#hash"
    alt="Sun"
  />
</map>

<p id="output4"></p>

<script>
  const areaElement4 = document.getElementById("myArea4");
  areaElement4.username = "newUsername";
  document.getElementById("output4").textContent =
    "Updated href: " + areaElement4.href;
</script>

Output:

Updated href: https://[email protected]:8080/path/page.html?query=value#hash

This example demonstrates how setting the username property affects the overall href attribute while preserving other parts of the URL.

Tips and Best Practices

• Security Considerations: When handling usernames and passwords in URLs, be aware of security implications. Avoid storing sensitive information directly in the URL, especially in client-side code.
• URL Encoding: Ensure that the username is properly URL-encoded to handle special characters.
• User Experience: Provide clear feedback to users when modifying URLs dynamically, especially in authentication scenarios.

Browser Support

The username property is supported by all major browsers.

Conclusion

The username property of the HTML <area> element provides a way to programmatically access and modify the username portion of the URL associated with an area in an image map. By understanding its syntax, usage, and practical applications, you can effectively manipulate URLs and handle authentication scenarios within your web applications.