
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
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.
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.
- Related Articles
- How to get the hash part of the href attribute of an area in JavaScript?
- How to search the querystring part of the href attribute of an area in JavaScript?
- How to search and display the pathname part of the href attribute of an area with JavaScript?
- How to search the value of the href attribute of a link in JavaScript?
- How to get the number of the internet host port for the current page in JavaScript?
- How to get an attribute value from a href link in selenium?
- How to find the href attribute of a link in a document in JavaScript?
- How to get the port number of the processes using PowerShell?
- How to get the value of the usemap attribute of an image with JavaScript?
- How to get the value of the usemap attribute in JavaScript?
- How to get the value of the hreflang attribute of a link in JavaScript?
- How to get the value of the rel attribute of a link in JavaScript?
- How to get the value of the target attribute of a link in JavaScript?
- How to get the value of the type attribute of a link in JavaScript?
- How to change the value of an attribute in javascript?
