在同一张图片上画圈[关闭]答案

【问题标题】：Make circle on same image [closed]在同一张图片上画圈[关闭]
【发布时间】：2018-07-18 18:53:42
【问题描述】：

我正在使用下图。现在我想点击所有圈子。这是一个简单的图像。每个圈子都会重定向到不同的链接。这可能吗然后请帮助我。

【问题讨论】：

尝试寻找clip-path（css属性）例如codepen.io/imohkay/pen/ZGbmoQ
@fcalderan 是的先生，我试过了，但这里有很多六边形，页面也会响应。
也分享您尝试过的代码
@Bhuwan 抱歉，我删除了我的文件。 :(
您能否详细说明您的代码“不起作用”的原因？你期待什么，实际发生了什么？如果您遇到异常/错误，请发布它发生的行和异常/错误详细信息。请edit这些详细信息，否则我们可能无法提供帮助。

标签： javascript css canvas svg

【解决方案1】：

HTMLimage maps可能是拟合工具。

从概念上讲，图像叠加了一组适当定义的形状。这些形状中的每一个（假设是位图图像，可能是任意性质的）都可以与链接和替代文本相关联。

在给定的情况下，形状将是六边形网格的单元格。有一些工具可以帮助您对形状进行繁琐的定义（通常是封闭的折线，尽管有圆和矩形的速记语法）。

以下演示应该可以帮助您入门：

    $(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>

要在生产环境中使用代码，当然需要进行一些修改（确定网格的精确尺寸、半网格单元格的适当截断，以及提供链接和替代文本的更通用方式）。

原则上，同样的想法可以应用于 svg 内容。

请注意，为了方便起见，刚刚包含 jquery，没有任何依赖项不能被 vanilla DOM API 调用轻松替换（DOM 操作仅限于元素创建、设置属性、附加元素）。

披露：我不隶属于任何链接网站

【讨论】：