How to get the port number part of the href attribute of an area in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will discover how to get the port number of the href attribute of an area in JavaScript.

An area is a tag in JavaScript. This tag is written as <area>. This tag denotes an area inside an image map. This tag has no closing tag. So in HTML, this is an empty tag. In XHTML, this tag must be closed correctly.

An image map is also another tag. This tag is written as <map> </map>. An image map contains an image with clickable or active areas.

The area tag comes inside the map tag. This tag will have a link set in the href attribute. When a user clicks on the area, the user is navigated to that URL. This can be opening an image, opening a website, etc.

The <img> tag and the <map> tag are linked using its attributes. The <img> tag having usemap attribute is connected with the name attribute in the <map> tag. The value of both attributes will be the same. A single image map can have multiple area tags within it.

The browsers that support area tags are Google Chrome, Edge 12 and above, Internet Explorer, Mozilla Firefox 1 and above, Opera, and Safari.

Syntax

<area shape="" coords="" href="">

This is the syntax of the area tag with some attributes

Attributes

coords − It denotes the coordinates of an area.

Its value is the coordinates

Example − rect(left, top, right, bottom)

− circ(center1, center2, radius)

− poly(x1, y1, x2, y2,…xn, yn)

These values are the CSS pixels.
href − This attribute denotes the href link of an area.

Its value is a URl.
shape − This attribute specifies the shape of the area.

Its values are default, rect, circ, and poly.

Examples − rectangle, circle, square, and polygon.

Apart from these parameters, the area tag also supports the global attributes in HTML. For example, class and title. Event attributes are also supported. For example, onclick and onkeypress. The majority of the browsers hide the area tag using the CSS as follows.

area { display: none;}

The deprecated attributes are nohref, name, tabindex, and type.

Next, we will see how to get the port value of the href attribute in an area tag. Using the port Property

Using the port Property

Here we will study the working of the port property. An href attribute's port part is set by the port property. If it is not set in the URL, some browsers will display 0 or nothing. The default port is set in this case. 80 or 443 is the default port.

Syntax

areaObj.port;//get
areaObj.port = port;//set

Here, the first syntax is used to get the port, and the second syntax is used to set the port. The return value is a string.

Parameters

port − port is the URL's port number

Example 1

Here, we have an image map. We use the method getPort to get the port value of the href attribute using the port property, and the output is displayed.


<html>
<body>
   <h4>Get the port number of href attribute in an area using <i> port </i> property </h4>
   <img src="" width="" height="" usemap="#imagemap">
   <map name="imagemap">
      <area id = "areaid" shape = "circle" cords = "100,50,25" href = "https://tutorialpoints.com">
   </map>
   <p id="displayid"> </p>
   <script>
      function getPort() {
         var portVal = document.getElementById("areaid").port || undefined;
         document.getElementById("displayid").innerHTML = "Port " + portVal;
      }
      getPort();
   </script>
</body>
</html>

Example 2

Here, we have an image map. We use the method setPort to set the port value of the href attribute using the port property and the output is displayed.


<html>
<body>
   <h4> Set the port number of href attribute in an area using <i> port </i> property</h4>
   <img src="" width="" height="" usemap="#imagemap">
   <map name="mapimage">
      <area id="idarea" shape="circle" coords="200,100,50" href="https://tutorialpoints.com">
   </map>
   <p id="iddisplay"></p>
   <script>
      function setPort() {
         var areaEl = document.getElementById("idarea");
         areaEl.port = "1234";
         var portVal = areaEl.port;
         document.getElementById("iddisplay").innerHTML = "Port Set " + portVal;
      }
      setPort();
   </script>
</body>
</html>

This article helped us to understand the port property of an area tag. We have learned to get the port of href in an area using its port property. We have also learned to alter the port value of href using the same port property.