{"id":16817,"date":"2022-10-22T06:29:28","date_gmt":"2022-10-22T00:59:28","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-make-circle-on-same-image-closed\/"},"modified":"2022-10-22T06:29:28","modified_gmt":"2022-10-22T00:59:28","slug":"solved-make-circle-on-same-image-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-make-circle-on-same-image-closed\/","title":{"rendered":"[Solved] Make circle on same image [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

Html image maps<\/a> may be the fitting tool.<\/p>\n

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.<\/p>\n

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 ). <\/p>\n

The following demo should get you started:<\/p>\n<\/p>\n

\n
\n
    $(document).ready(function () {\r\n        var x_tl = 230\r\n          , y_tl = 180\r\n          , w_horizontal    = 150\r\n          , w_slanted       = 60\r\n          , h_slanted       = 120\r\n          , dx, dy\r\n          , x,y\r\n          , s_coords\r\n          \r\n          , dict = [\r\n                [\"a01\", \"www.google.com\"            , \"Google\"]\r\n              , [\"a02\", \"www.bing.com\"              , \"Bing\"]\r\n              , [\"a03\", \"www.nytimes.com\"           , \"New York Times\"]\r\n              , [\"a04\", \"www.usatoday.com\"          , \"USA Today\"]\r\n              , [\"a05\", \"www.guardian.co.uk\"        , \"Guardian\"]\r\n              , [\"a06\", \"www.spiegel.de\"            , \"Spiegel\"]\r\n              , [\"a07\", \"www.times.co.uk\"           , \"The Times\"]\r\n              , [\"a08\", \"www.altavista.com\"         , \"Altavista\"]\r\n              , [\"a09\", \"www.elpais.es\"             , \"El Pais\"]\r\n              , [\"a10\", \"www.altavista.com\"         , \"Altavista again\"]\r\n              , [\"a11\", \"www.washingtonpost.com\"    , \"WP\"]\r\n              , [\"a12\", \"www.cnn.com\"               , \"CNN\"]\r\n              , [\"a13\", \"www.msnbc.com\"             , \"NBC\"]\r\n              , [\"a14\", \"www.abcnews.com\"           , \"ABC\"]\r\n              , [\"a15\", \"www.foxnews.com\"           , \"Fox\"]\r\n              , [\"a16\", \"www.ard.de\"                , \"ARD\"]\r\n              , [\"a17\", \"www.zdf.de\"                , \"ZDF\"]\r\n              , [\"a18\", \"www.rtl.de\"                , \"RTL\"]\r\n          ]\r\n          , count = 0\r\n          ;\r\n          \r\n        for (let ix=0; ix <= 5; ix++) {\r\n            for (let iy=0; iy <= 2; iy++) {\r\n                dx = ix*(w_horizontal + w_slanted);\r\n                dy = 2* iy * h_slanted - (ix % 2) * h_slanted\r\n                \r\n                x = (x_tl + dx);\r\n                y = (y_tl + dy);\r\n                \r\n                s_coords =\r\n                            (x+\",\"+y)\r\n                     +\" ,\"+ ((x+w_horizontal)+\",\"+y)\r\n                     +\" ,\"+ ((x+w_horizontal+w_slanted)+\",\"+(y+h_slanted))\r\n                     +\" ,\"+ ((x+w_horizontal)+\",\"+(y+2*h_slanted))\r\n                     +\" ,\"+ (x+\",\"+(y+2*h_slanted))\r\n                     +\" ,\"+ ((x-w_slanted)+\",\"+(y+h_slanted))\r\n                ;\r\n                \r\n                let e_a =\r\n                    $('<area shape=\"polygon\"\/>')\r\n                        .attr( {\r\n                            id:     dict[count][0]\r\n                          , href:   \"https:\/\/\" + dict[count][1]\r\n                          , alt:    dict[count][2]\r\n                          , coords: s_coords\r\n                        })\r\n                    ;\r\n                $(\"#imap\").append(e_a);\r\n    \r\n                count++;\r\n            }\r\n        }\r\n    });          <\/code><\/pre>\n
<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js\"><\/script>\r\n<html>\r\n        <head>\r\n            <title>Clickable hex map<\/title>\r\n        <\/head>\r\n        <body>\r\n            <img\r\n                id=\"screenshot-image\"\r\n                width=\"1469\"\r\n                height=\"938\"\r\n                src=\"https:\/\/image.prntscr.com\/image\/3eyLjrzURtuKhn51TD4bDg.png\" alt=\"\"\r\n                image-id=\"ibrmdf\"\r\n                usemap=\"#imap\"\r\n            >\r\n            <map name=\"imap\" id=\"imap\">\r\n    <!--\r\n                <area shape=\"polygon\" id=\"area_google\" alt=\"Demo: Go for Google\" href=\"http:\/\/www.google.com\"\r\n                    coords=\"230,180 ,380,180 ,440,300 ,380,420 ,230,420 ,170,300\" \r\n                >\r\n    -->\r\n            <\/map>\r\n        <\/body>\r\n    <\/html><\/code><\/pre>\n<\/div>\n<\/div>\n
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).<\/p>\n
In principle, the same idea can be applied to svg content.<\/p>\n
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).<\/p>\n
Disclosure: I’m not affiliated with any of the linked sites<\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Make circle on same image [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] 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 … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[1728,464,333,1729],"class_list":["post-16817","post","type-post","status-publish","format-standard","hentry","category-solved","tag-canvas","tag-css","tag-javascript","tag-svg"],"yoast_head":"\n[Solved] Make circle on same image [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-make-circle-on-same-image-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Make circle on same image [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] 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 ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-make-circle-on-same-image-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-22T00:59:28+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-make-circle-on-same-image-closed\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-make-circle-on-same-image-closed\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Make circle on same image [closed]\",\"datePublished\":\"2022-10-22T00:59:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-make-circle-on-same-image-closed\\\/\"},\"wordCount\":205,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"canvas\",\"css\",\"javascript\",\"svg\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-make-circle-on-same-image-closed\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-make-circle-on-same-image-closed\\\/\",\"name\":\"[Solved] Make circle on same image [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-10-22T00:59:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-make-circle-on-same-image-closed\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-make-circle-on-same-image-closed\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-make-circle-on-same-image-closed\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Make circle on same image [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Make circle on same image [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-make-circle-on-same-image-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Make circle on same image [closed] - JassWeb","og_description":"[ad_1] 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 ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-make-circle-on-same-image-closed\/","og_site_name":"JassWeb","article_published_time":"2022-10-22T00:59:28+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-make-circle-on-same-image-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-make-circle-on-same-image-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Make circle on same image [closed]","datePublished":"2022-10-22T00:59:28+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-make-circle-on-same-image-closed\/"},"wordCount":205,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["canvas","css","javascript","svg"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-make-circle-on-same-image-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-make-circle-on-same-image-closed\/","name":"[Solved] Make circle on same image [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-22T00:59:28+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-make-circle-on-same-image-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-make-circle-on-same-image-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-make-circle-on-same-image-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Make circle on same image [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/16817","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=16817"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/16817\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=16817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=16817"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=16817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}