imageMap laptop mouse
            <img src ="../picture/imageMap.jpg" alt ="imageMap" usemap ="#testmap">

            <map name ="testmap">
                <area shape ="rect" coords ="250, 264, 630, 607" href ="./laptop.html" alt ="laptop">
                <area shape ="circle" coords ="740, 566, 38" href ="./mouse.html" alt ="mouse">
                <area shape ="" coords ="" href ="" alt ="">
            </map>
        

The only difference from other images is that you must add a usemap attribute. The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map. You must also define some coordinates to be able to place the clickable area onto the image. The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis. So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:

Shap

rect
- defines a rectangular region
circle
- defines a circular region
poly
- defines a polygonal region
default
- defines the entire region


Back to