HTML Area pathname Property: Area Pathname

Table of Contents

HTML Area `pathname` Property: Understanding the Path Segment of a URL

The pathname property of the HTML <a> (area) element is a crucial component for web developers, providing access to the path segment of the URL associated with an area within an image map. This property allows you to dynamically retrieve or modify the path part of a URL, enabling advanced control and manipulation of links in your web applications. In this comprehensive guide, we’ll explore the syntax, usage, and practical examples of the pathname property, ensuring you can effectively integrate it into your projects.

What is the `pathname` Property?

The pathname property returns a string representing the path portion of the URL associated with an <area> element. The path includes everything after the domain name and before the query string (if any).

Purpose of the `pathname` Property

The primary purpose of the pathname property is to:

Extract the Path: Retrieve the path segment of a URL.
Dynamic URL Manipulation: Modify or use the path for dynamic link generation or redirection.
Route Management: Implement client-side routing in single-page applications (SPAs).

Syntax

The syntax for accessing the pathname property is straightforward:

let path = areaObject.pathname;

Here, areaObject is a reference to an HTML <area> element obtained using JavaScript. The path variable will then hold the string value of the URL’s path.

Key Properties of the `pathname` Value

Understanding the characteristics of the pathname value is essential for effective use:

Characteristic	Description
String Value	The `pathname` property always returns a string.
Path Segment	Represents the portion of the URL following the domain name and preceding any query parameters or hash fragments.
Leading Slash	Generally starts with a forward slash (`/`).
URL Encoding	The returned `pathname` is URL-encoded.

Examples

Let’s explore some practical examples to illustrate how to use the pathname property effectively.

Basic Example: Retrieving the Pathname

This example demonstrates how to retrieve the pathname from an <area> element’s URL.

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

<map name="shapesMap">
  <area
    id="areaPathname"
    shape="rect"
    coords="0,0,80,100"
    href="https://www.example.com/products/details?id=123"
    alt="Rectangle"
  />
</map>

<p id="pathnameResult"></p>

<script>
  const area_pathname = document.getElementById("areaPathname");
  const pathname_result = document.getElementById("pathnameResult");
  const path = area_pathname.pathname;
  pathname_result.textContent = "Pathname: " + path;
</script>

Output

Pathname: /products/details

In this example, the JavaScript code retrieves the pathname from the <area> element and displays it on the page.

Using the Pathname in a Function

This example shows how to use the pathname property within a JavaScript function to dynamically process the path.

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

<map name="shapesMap2">
  <area
    id="areaPathname2"
    shape="circle"
    coords="120,75,50"
    href="https://www.example.com/blog/articles/latest"
    alt="Circle"
  />
</map>

<p id="pathnameResult2"></p>

<script>
  const area_pathname2 = document.getElementById("areaPathname2");
  const pathname_result2 = document.getElementById("pathnameResult2");

  function getPathname(areaElement) {
    return areaElement.pathname;
  }

  const path2 = getPathname(area_pathname2);
  pathname_result2.textContent = "Pathname: " + path2;
</script>

Output

Pathname: /blog/articles/latest

Here, the getPathname function takes an <area> element as an argument and returns its pathname.

Modifying the Pathname (Not Directly Possible)

It’s important to note that while you can retrieve the pathname, you cannot directly modify it via the pathname property. The pathname property is read-only. If you need to change the URL, you should modify the href property instead.

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

<map name="shapesMap3">
  <area
    id="areaPathname3"
    shape="poly"
    coords="20,20,50,50,80,20"
    href="https://www.example.com/about"
    alt="Triangle"
  />
</map>

<button id="changePathButton">Change Path</button>

<script>
  const area_pathname3 = document.getElementById("areaPathname3");
  const change_path_button = document.getElementById("changePathButton");

  change_path_button.addEventListener("click", function () {
    const newHref = "https://www.example.com/contact";
    area_pathname3.href = newHref;
    console.log("New URL:", area_pathname3.href);
  });
</script>

In this example, clicking the “Change Path” button modifies the href attribute of the <area> element, effectively changing the entire URL.

Note: The pathname property itself is read-only; you can only modify the URL by changing the href attribute. ⚠️

Real-World Applications of the `pathname` Property

The pathname property is invaluable in scenarios such as:

Single-Page Applications (SPAs): Extracting the path to determine which component to render.
Dynamic Content Loading: Loading different content sections based on the URL path.
Analytics Tracking: Tracking user navigation patterns by analyzing the pathname.

Use Case Example: Dynamic Content Loading Based on Pathname

Consider a scenario where you want to load different content sections based on the URL’s path.

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

<map name="shapesMap4">
  <area
    id="areaPathname4"
    shape="rect"
    coords="0,0,80,100"
    href="https://www.example.com/products"
    alt="Rectangle"
  />
  <area
    id="areaPathname5"
    shape="circle"
    coords="120,75,50"
    href="https://www.example.com/services"
    alt="Circle"
  />
</map>

<div id="contentArea"></div>

<script>
  const area_pathname4 = document.getElementById("areaPathname4");
  const area_pathname5 = document.getElementById("areaPathname5");
  const content_area = document.getElementById("contentArea");

  function loadContent(areaElement) {
    const path4 = areaElement.pathname;
    let content = "";

    switch (path4) {
      case "/products":
        content = "<h2>Products Section</h2><p>Welcome to the products page.</p>";
        break;
      case "/services":
        content = "<h2>Services Section</h2><p>Explore our services.</p>";
        break;
      default:
        content = "<h2>Homepage</h2><p>Welcome to our website.</p>";
    }

    content_area.innerHTML = content;
  }

  area_pathname4.addEventListener("click", function (event) {
    event.preventDefault();
    loadContent(this);
  });

  area_pathname5.addEventListener("click", function (event) {
    event.preventDefault();
    loadContent(this);
  });
</script>

In this example, clicking on the <area> elements loads different content into the contentArea div based on the pathname of the clicked area.

Note: Using event.preventDefault() prevents the default link behavior, allowing you to handle the click event with JavaScript. 🖱️

Browser Support

The pathname property is supported by all major browsers, ensuring consistent behavior across different platforms.

Conclusion

The pathname property of the HTML <area> element is a valuable tool for extracting and working with the path portion of a URL. While the pathname property itself is read-only, understanding how to access and use it is essential for dynamic content loading, single-page applications, and advanced link manipulation. By mastering the pathname property, you can enhance your ability to create more interactive and dynamic web applications.