[Solved] Make circle on same image [closed]

Question

Html image maps may be the fitting tool.

Conceptually the image is superimposed with a set of suitably defined shapes. Each of these shapes (which – assuming a bitmapped image – may be of arbitrary nature) can be associated with a link and an alt text.

In the given case, the shapes would be the cells of a hexagonal grid. There are tools to assist you in the cumbersome definition of the shapes ( in general a closed polyline, though there are shorthand syntaxes for circles and rects ).

The following demo should get you started:

    $(document).ready(function () {
        var x_tl = 230
          , y_tl = 180
          , w_horizontal    = 150
          , w_slanted       = 60
          , h_slanted       = 120
          , dx, dy
          , x,y
          , s_coords
          
          , dict = [
                ["a01", "www.google.com"            , "Google"]
              , ["a02", "www.bing.com"              , "Bing"]
              , ["a03", "www.nytimes.com"           , "New York Times"]
              , ["a04", "www.usatoday.com"          , "USA Today"]
              , ["a05", "www.guardian.co.uk"        , "Guardian"]
              , ["a06", "www.spiegel.de"            , "Spiegel"]
              , ["a07", "www.times.co.uk"           , "The Times"]
              , ["a08", "www.altavista.com"         , "Altavista"]
              , ["a09", "www.elpais.es"             , "El Pais"]
              , ["a10", "www.altavista.com"         , "Altavista again"]
              , ["a11", "www.washingtonpost.com"    , "WP"]
              , ["a12", "www.cnn.com"               , "CNN"]
              , ["a13", "www.msnbc.com"             , "NBC"]
              , ["a14", "www.abcnews.com"           , "ABC"]
              , ["a15", "www.foxnews.com"           , "Fox"]
              , ["a16", "www.ard.de"                , "ARD"]
              , ["a17", "www.zdf.de"                , "ZDF"]
              , ["a18", "www.rtl.de"                , "RTL"]
          ]
          , count = 0
          ;
          
        for (let ix=0; ix <= 5; ix++) {
            for (let iy=0; iy <= 2; iy++) {
                dx = ix*(w_horizontal + w_slanted);
                dy = 2* iy * h_slanted - (ix % 2) * h_slanted
                
                x = (x_tl + dx);
                y = (y_tl + dy);
                
                s_coords =
                            (x+","+y)
                     +" ,"+ ((x+w_horizontal)+","+y)
                     +" ,"+ ((x+w_horizontal+w_slanted)+","+(y+h_slanted))
                     +" ,"+ ((x+w_horizontal)+","+(y+2*h_slanted))
                     +" ,"+ (x+","+(y+2*h_slanted))
                     +" ,"+ ((x-w_slanted)+","+(y+h_slanted))
                ;
                
                let e_a =
                    $('<area shape="polygon"/>')
                        .attr( {
                            id:     dict[count][0]
                          , href:   "https://" + dict[count][1]
                          , alt:    dict[count][2]
                          , coords: s_coords
                        })
                    ;
                $("#imap").append(e_a);
    
                count++;
            }
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
        <head>
            <title>Clickable hex map</title>
        </head>
        <body>
            <img
                id="screenshot-image"
                width="1469"
                height="938"
                src="https://image.prntscr.com/image/3eyLjrzURtuKhn51TD4bDg.png" alt=""
                image-id="ibrmdf"
                usemap="#imap"
            >
            <map name="imap" id="imap">
    <!--
                <area shape="polygon" id="area_google" alt="Demo: Go for Google" href="http://www.google.com"
                    coords="230,180 ,380,180 ,440,300 ,380,420 ,230,420 ,170,300" 
                >
    -->
            </map>
        </body>
    </html>

To use in production the code will need some brush-up of course ( determining the precise dimensions of the grid, proper cutoffs for half grid cells, and a more generic way to provide for links and alt texts).

In principle, the same idea can be applied to svg content.

Note that jquery has just been included for convenience, there is no dependency that couldn’t be trivially replaced by vanilla DOM API calls (the DOM operations are limited to element creation, setting attributes, appending elements).

Disclosure: I’m not affiliated with any of the linked sites

Accepted Answer