Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to get the hash part of the href attribute of an area in JavaScript?
In this tutorial, we will learn how to get the hash part of the href attribute of an area in JavaScript.
The HTML element <area> establishes an area within an image map with predetermined clickable zones. An image map allows you to correlate geometric regions of a picture with hypertext links. This element can only be used within the < map> element.
The href property gives the area's hyperlink target. The <area> element is not a hyperlink if the href attribute is not present.
Following is a method used to get the href attribute’s hash part of an area in JavaScript−
Using HTML DOM Area hash Property
In HTML DOM, the DOM Area get hash Property is used to return the href attribute’ value’s anchor portion. The anchor portion is the URL component that comes after the hash sign (#).
It has a single-value anchor name, specifying the URL's anchor portion. It produces a string value that reflects the anchor portion of the URL, including the hash symbol (#).
Syntax
area_object.hash;
The area_object is called using the hash property and returns the URL's anchor part containing a hash(#).
Example 1
In this example, we have used the hash property to fetch the href attribute’s hash part. The area with id "area_javascript" has a href attribute, and its text after the hash is returned (including hash) when the hash property is used
<html> <body> <h3>Get the hash part of the href attribute of an area using the <i>hash</i> property</h3> <img src="/javascript/images/javascript-mini-logo.jpg" alt="javascript_logo" usemap="#javascript" width="200" eight="200"> <map name = "javascript"> <area id="area_javascript" shape = "rectangle" coords = "154,150,59, 0" href = "/javascript/index.htm#overview" alt = "Team" target = "_self" > </map> <p id = "outputDiv"> </p> <script> let output = document.getElementById("outputDiv"); var area1 = document.getElementById("area_javascript").hash; output.innerHTML = "Hash : "+area1 +"<br>"; </script> </body> </html>
By Setting HTML DOM hash Property
By using this hash property, the anchor component of the href attribute value can be set. Following the hash sign (#) is the URL anchor. To set the anchor, remove the hash symbol (#).
Syntax
area_object.hash = anchor_name;
The area_object has been called, and the hash value of the anchor part is set to a different value, as seen in the anchor_name.
Example 2
In this example, we have used the hash property to change the anchor part of the URL. The hash value is found using the hash property, and then the text is changed accordingly.
<html> <body> <h3>Get the hash part of the href attribute of an area after setting to new has value</h3> <img src="/javascript/images/javascript-mini-logo.jpg" alt="javascript_logo" usemap="#javascript" width="200" height="200"> <map name = "javascript"> <area id="area_javascript" shape = "rectangle" coords = "154,150,59, 0" href = "/javascript/index.htm#home" alt = "Team" target = "_self" > </map> <p id = "outputDiv"> </p> <script> let output = document.getElementById("outputDiv"); // set hash property document.getElementById("area_javascript").hash = "quick_guide" output.innerHTML += "Set Hash : quick_guide"+"<br>"; var area1 = document.getElementById("area_javascript").hash; output.innerHTML += "Hash : "+area1 +"<br>"; </script> </body> </html>
In this tutorial, what we have learned is the two ways to get the href attribute’s hash part of an area in JavaScript. The first way is to use the hash property. In the second approach we set the hash property with different value and then access the updated hash value.
515 Views
