Run Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Example of an image map with clickable areas</title> </head> <body> <h1>Image map with clickable areas</h1> <p>Click on a shape to show every image as single picture and see how it work:</p> <img data-src="https://www.albashmoparmeg.com/images/shpe_images.jpg" alt="Desktop for coding" usemap="#image_map" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload"> <map name="image_map"> <area href="https://www.albashmoparmeg.com/images/circle.html" coords="101,108,95" shape="circle" alt="Circle"> <area href="https://www.albashmoparmeg.com/images/Rectangle.html" coords="202,15,383,199" shape="rect" alt="Rectangle"> <area href="https://www.albashmoparmeg.com/images/Triangle.html" coords="483,17,395,196,573,196" shape="poly" alt="Triangle"> </map> </body> </html>