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
Selected Reading
How to search the alternate text of an image-map area in JavaScript?
To search the alternate (alt) text of an image-map area in JavaScript, use the alt property. This property allows you to access or modify the alternative text that describes the image map area for accessibility purposes.
Syntax
// Get alt text let altText = areaElement.alt; // Set alt text areaElement.alt = "new alt text";
Example: Accessing Alt Text of Image Map Area
<!DOCTYPE html>
<html>
<body>
<img src="/images/html.gif" alt="HTML Map" border="0" usemap="#html"/>
<map name="html">
<area id="myarea" shape="circle" coords="154,150,59" href="about.htm?id=company" alt="Team" target="_self">
</map>
<p id="result"></p>
<script>
var x = document.getElementById("myarea").alt;
document.getElementById("result").innerHTML = "Alternate Text: " + x;
</script>
</body>
</html>
Alternate Text: Team
Searching All Areas in an Image Map
<!DOCTYPE html>
<html>
<body>
<img src="/images/sample.gif" alt="Sample Map" usemap="#samplemap"/>
<map name="samplemap">
<area shape="rect" coords="0,0,100,50" alt="Home" href="home.html">
<area shape="rect" coords="100,0,200,50" alt="About" href="about.html">
<area shape="rect" coords="200,0,300,50" alt="Contact" href="contact.html">
</map>
<div id="output"></div>
<script>
// Get all area elements
var areas = document.querySelectorAll('area');
var output = document.getElementById('output');
output.innerHTML = "<h3>All Alt Texts:</h3>";
for (var i = 0; i < areas.length; i++) {
output.innerHTML += "<p>Area " + (i + 1) + ": " + areas[i].alt + "</p>";
}
</script>
</body>
</html>
All Alt Texts: Area 1: Home Area 2: About Area 3: Contact
Key Points
- The
altproperty is both readable and writable - Alt text is crucial for accessibility and screen readers
- Use
getElementById()for specific areas orquerySelectorAll()for multiple areas - Always provide meaningful alt text for image map areas
Conclusion
The alt property provides easy access to image map area descriptions. Use it to retrieve or modify alternative text for better accessibility and user experience.
Updated on: 2026-03-15T23:18:59+05:30
204 Views
Advertisements