Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to get the port number part of the href attribute of an area in JavaScript?
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.
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: Getting the Port Number
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" coords="100,50,25" href="https://tutorialspoint.com:8080">
</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>
Port: 8080
Example 2: Setting the Port Number
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="imagemap">
<area id="idarea" shape="circle" coords="200,100,50" href="https://tutorialspoint.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>
Port Set: 1234
Key Points
- The
portproperty returns a string representing the port number. - If no port is specified in the URL, it may return an empty string or the default port.
- Default ports are 80 for HTTP and 443 for HTTPS.
- You can both get and set the port value dynamically using JavaScript.
Conclusion
The port property provides an easy way to access and modify the port number of an area element's href attribute. This is useful for dynamic URL manipulation in image maps.
555 Views
