HTML-Tutorial/13,2_HTML_Map.html at main · prof-abdelrahman/HTML-Tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en-US">
    <body>
        <h2>Image Maps</h2>
        <p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
        <img src="/images/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">#
        <map name="workmap">
            <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://www.w3schools.com/html/computer.htm">
            <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://www.w3schools.com/html/phone.htm">
            <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://www.w3schools.com/html/coffee.htm">
        </map><br>
        <img src="/images/frenchfood.jpg" alt="French Food" usemap="#foodmap" width="450" height="675">
        <map name="foodmap">
            <area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="https://www.w3schools.com/html/croissant.htm" alt="croissant">
        </map>
    </body>
</html>