Map

1. The map element, in conjunction with any area element descendants, defines an image map
2. name
   1. The name attribute gives the map a name so that it can be referenced
   2. The attribute must be present and must have a non-empty value with no space characters
   3. The value of the name attribute must not be a match for the value of the name attribute of another map element in the same document
3. id
   If the id attribute is specified, it must have the same value as the named attribute

Area

1. The area element represents
   1. either a hyperlink with some text and a corresponding area on an image map
   2. a dead area on an image map
2. area is a href
href → anchor-area-base-link [mnemonics]
3. alt
   1. A text string alternative to display on browsers that do not display images
   2. This attribute is required only if the href attribute is used.
4. coords
   1. rect
      1. the value is x1, y1 ,x2, y2
      2. The value specifies the coordinates of the corners of the rectangle
         1. top-left
         2. bottom-right
      3. coords="0,0,253,27"
         The coordinates are {0,0} and {253,27}, indicating the top-left and bottom-right corners of the rectangle, respectively
      4. note rect not rectangle
   2. circle
      1. the value is {x,y} radius
      2. the value specifies the coordinates of the circle center and the radius
      3. Note circle not circ
   3. poly
      1. the value is x1,y1,x2,y2,..,xn,yn
      2. Value specifies the coordinates of the edges of the polygon
      3. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon
   4. The coords attribute must, if specified, contain a valid list of integers
5. shape
   1. The shape of the associated hot spot
   2. The specifications for HTML defines the values
      1. rect which defines a rectangular region
      2. circle which defines a circular region
      3. poly which defines a polygon
      4. default which indicates the entire region beyond any defined shapes
6. href
   1. The hyperlink target for the area
   2. Its value is a valid URL
   3. This attribute may be omitted; if so, the area element does not represent a hyperlink
7. target
   1. A keyword or author-defined name of the browsing context to display the linked resource
   2. See target
8. rel
   1. For anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object
   2. The value is a space-separated list of link types
   3. The values and their semantics will be registered by some authority that might have meaning to the document author
   4. The default relationship, if no other is given, is void
   5. Use this attribute only if the href attribute is present

usemap

1. A string providing the page-local URL
2. That is, a URL that begins with the hash or pound symbol ("#") of the img element which defines the image map to apply to the image
3. #mymap

HTML

    <img src="../images/myFourSquares2.png" alt="" usemap="#mymap">

    <map name="mymap" id="mymap">
        <area shape="rect" 
            coords="0,0,100,100" 
            href="./GreenSquare.html" 
            id="greenSquare"
            alt="green square region">

        <area shape="rect" 
            coords="100,100,200,200" 
            href="./orangeSquare.html" 
            id="orangeSquare"
            alt="orange square region">

        <area shape="rect" 
            coords="0,100,100,200" 
            href="./redSquare.html" 
            id="redSquare"
            alt=" red square region">

        <area shape="rect" 
            coords="100,0,200,100" 
            href="./blueSquare.html" 
            id="blueSquare"
            alt="blue square region">
    </map>

    <div id="output"></div>

Browser

JavaScript

    var output = document.getElementById('output');

    document.getElementById('greenSquare').addEventListener('click',
        function () {
            localStorage.setItem("clicked", "You last clicked on Green");
        }
    )

    output.innerHTML = localStorage.getItem("clicked"); 

HTML

    <figure>
        <img src="../images/myFourCircles.png" 
        alt="" 
        usemap="#mymap2">
    </figure>

    <map name="mymap2" id="mymap2">
        <area shape="circle" 
            coords="27,27,20" 
            href="./red_color_specification.html"
            target="myIframe" alt="Red color specs">
                                
        <area shape="circle" 
            coords="110,27,20" 
            href="./green_color_specification.html"
            target="myIframe" 
            alt="green color specs">
                                
        <area shape="circle" 
            coords="191,27,20" 
            href="./blue_color_specification.html"
            target="myIframe" alt="blue color specs">

        <area shape="circle" 
            coords="272,27,20" 
            href="./black_color_specification.html"
            target="myIframe" 
            alt="black color specs">
    </map>

    <iframe width="425" height="250" 
            name="myIframe"
            srcdoc="<div style='color:green; 
                font-size:2em; 
                margin-left:auto; 
                margin-right:auto; 
                max-width:fit-content'>
                Click a Circle</div>"
            sandbox>
    </iframe>

Browser