有谁知道是否可以设置 HTML 图像地图，并在地图的一部分中设置链接，将您跳转到同一地图其他部分的链接？

Question

所以这里的目标是使用 HTML 设置图像映射，允许 link 从图像的一部分到同一图像内的另一部分。我在这里面对的是所有信息都在同一个信息图表中，就像滚动浏览三页一样。我可以在图片的顶部设置一个 link 并让它跳到同一图片的另一部分吗？

我有一个解决方法，将单个信息图分成几个堆叠的图形，而不是为单个图像设置额外的地图，但它很丑。我在下面有一个我正在使用的简化示例。有没有办法让下面显示的 links image2 或 image3 定位在同一图像内，而不必像当前显示的那样定位单个图像？

<div><img src="https://tfstest.service-now.com/sys_attachment.do?sys_id=4beacd3bdb489304c84b782bbf96197f" alt="" usemap="#Map" /> <map id="Map" name="Map"> 
<area title="" alt="" coords="28,133,525,155" shape="rect" href="#image2" />
<area title="" alt="" coords="29,160,237,178" shape="rect" href="#image3" />
<area title="" alt="" coords="28,180,330,201" shape="rect" href="#image4" />
</map></div>
 <div><a id="image2"></a><img style="align: baseline;" src="attachment.do?sys_id=c7" /></div>
    <div><a id="image3"></a><img style="align: baseline;" src="attachment.do?sys_id=93" /></div>
    <div><a id="image4"></a> <img style="align: baseline;" src="attachment.do?sys_id=97" /></div>

Answer 1

.myclass {
        position: absolute;
        width: 6%;
        height: 9.5%;
        z-index: 1;
        background-color: red;
        border-radius: 15px;
        color: white;
        font-weight: bold;
    }

<img src="https://images.pexels.com/photos/730803/pexels-photo-730803.jpeg?auto=compress&cs=tinysrgb" style="width: 100%;height: 100%"/>
 
 <p class="highlight"></p>
 <a href="#2" title="Point 1 Pointer is here" style="left: 5vw;top: 23.6%;" class="myclass" id="1"></a>
 
 <a href="#1" title="Point 2 Pointer is here" style="left: 73vw;top: 70%;" class="myclass" id="2"></a>

希望对您有所帮助

有谁知道是否可以设置 HTML 图像地图，并在地图的一部分中设置链接，将您跳转到同一地图其他部分的链接？

Does anyone know if it is possible to set an HTML image map and have links in one part of the map jump you to links on other parts of the same map?

html

css

imagemap