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

Question

因此，此处的目标是使用HTML设置图像映射，该图像映射允许从图像的一个部分链接到同一图像中的另一部分。我在这里面对的是，所有信息都在同一信息图中，就像三页滚动以浏览。我可以在图像的顶部设置链接，然后跳到同一图像的另一部分吗？

我有一个与单个信息图有关的工作，分为几个图形，而不是为单个图像设置的其他地图，但丑陋。我有一个削减示例，说明我正在与下面的工作一起工作。是否有一种方法可以在同一图像内将链接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>

希望这对您有帮助