The area is defined by using map tag. There is also a paragraph above the image. When the user click on the image area, the color of the paragraph will change. Any idea how to do this with javascript?
For example, this is the html
<html> <body> <h1>The map and area elements</h1> <p>Click on the area of the image, there will be several areas. When click, the color will change depending on the area that was clicked.</p> <img src="theimage.jpg" alt="image" usemap="#theimage" width="400" height="379"> <map name="theimage"> <area shape="rect" coords="34,44,270,350" alt="thearea" href=""> </map> </body> </html>
Advertisement
Answer
To change the style of the <p> tag when you click on the area with the coordinates of the <area> tag, use the usual addEventListener event listener for the click event.
Also, you need to make a delegation to prevent the default behavior when clicking on tag <area> using event.preventDefault().
let paragraph = document.querySelector("p");
let area = document.querySelector("area");
area.addEventListener("click", function (event) {
event.preventDefault();
paragraph.style.color = "green";
});<h1>The map and area elements</h1>
<p>Click on the area of the image, there will be several areas. When click, the color will change depending on the area that was clicked.</p>
<img src="https://st.depositphotos.com/1428083/2946/i/600/depositphotos_29460297-stock-photo-bird-cage.jpg" alt="image" usemap="#theimage" width="400" height="379" />
<map name="theimage">
<area shape="rect" coords="34,44,270,350" alt="thearea" href="" />
</map>