Question

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

Answer 1

Html image maps可能是适合的工具。

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

在给定的情况下，形状将是六边形网格的单元格。有一些工具可以帮助您处理繁琐的形状定义（通常是封闭的折线，尽管有圆形和反射的简写语法）。

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

＆＃13;

    $(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++;
            }
        }
    });

＆＃13;

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

＆＃13;

要在生产中使用，代码当然需要一些刷新（确定网格的精确尺寸，半网格单元的正确截止，以及提供链接和替代文本的更通用的方法）。

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

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

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

在同一图像上制作圆圈

1 个答案: