在 HTML 地图的特定位置添加叠加层答案

【问题标题】：add overlay in specific position in HTML map在 HTML 地图的特定位置添加叠加层
【发布时间】：2020-08-27 13:30:06
【问题描述】：

我有一个使用 HTML 地图概念制作的交互式静态图像。

预期行为：

叠加层应在悬停时显示在其各自的框中。例如，当鼠标悬停在红色框上时，覆盖文本应该出现在红色框本身中，如果它悬停在绿色上则为绿色，依此类推。

当前行为：

覆盖文本位置不在其各自的框中。它显示在底部。为了实现这一点，我正在考虑在单击时将包含文本的 div 附加到相应的区域标记之后。

我的代码：

<body>
  <div class="interactive-map" >
  <img src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
  <div class="card" style="width:40%; height: 10%;">
    <div class="card-body">
      This is some text within a card body.
    </div>
  </div>
  <map name="image_map">
  <area id="one" title="Red" coords="25,33,68,65" shape="rect" data-placement="25,33,68,65">
  <area title="Green" coords="132,30,194,67" shape="rect">
  <area title="Blue" coords="22,147,74,192" shape="rect">
  <area title="Yellow" coords="131,144,197,188" shape="rect">
</map>

</div>

</body>

area{
    cursor: pointer;
    
}

$('area').hover(function(){
    ????
})

小提琴-https://jsfiddle.net/woke_mushroom/2u3kbnv9/14/

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

我认为在某个“区域”内显示内容的最简单方法是使其成为该区域的子元素。您可以使用任何块元素（例如<div></div>）作为区域。与使用图像地图一样，您将更加灵活。

使用:hover css 伪类也可以在没有任何 javascript 的情况下实现悬停时显示内容。

下面我用 css flex 定位了一些框，并用 css 隐藏/显示内容。您可能希望将它们放置在 css 网格或其他方式中（例如绝对定位在图像前面）。

.container {
    display: flex;
    flex-wrap: wrap;
    width: 30em;
}

.area {
    cursor: pointer;
    width: 15em;
    height: 15em;
    border: 2px solid black;
    box-sizing: border-box;
}

.area > span {
    opacity: 0;
}

.area:hover > span {
    opacity: 1;
}

#area-red {
  background-color: red;
}
#area-green {
  background-color: green;
}
#area-blue {
  background-color: blue;
}
#area-yellow {
  background-color: yellow;
}

<div class="container">
    <div id="area-red" class="area">
        <span>Red contents</span>
    </div>
    <div id="area-green" class="area">
        <span>Green contents</span>
    </div>
    <div id="area-blue" class="area">
        <span>Blue contents</span>
    </div>
    <div id="area-yellow" class="area">
        <span>Yellow contents</span>
    </div>
</div>

【讨论】：

嗨。感谢您提供此替代解决方案。因为，在实际场景中，我必须在很多地方显示覆盖文本，添加 css 和描述每个 div 将成为一项乏味的任务。如果它像另一位先生回答的那样沿着鼠标指针移动会更好。无论如何，感谢您提供此解决方案。它会在我的应用程序的另一部分派上用场。

【解决方案2】：

你需要把图片和图片映射关联起来，所以

<img usemap="#image_map" src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg" >

然后将你要移动的东西的位置设置为绝对：

<div class="card" style="width:40%; height: 10%; position:absolute;">

然后在事件处理程序中访问鼠标指针位置：

$('area').hover(function(e)
{
  const card = document.querySelector('.card');
  card.style.top = e.clientY+'px';
  card.style.left = e.clientX+'px';
});

$('area').mouseenter(function(e)
{
  const card = document.querySelector('.card');
  $(card).show();
  card.style.top = e.clientY+'px';
  card.style.left = e.clientX+'px';
});

$('area').mouseleave(function(e)
{
  const card = document.querySelector('.card');
  $(card).hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="interactive-map" >
  <img src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg" usemap="#image_map">
  <div class="card" style="width:40%; height: 10%; position:absolute;">
    <div class="card-body">
      This is some text within a card body.
    </div>
  </div>
  <map name="image_map">
  <area id="one" title="Red" coords="25,33,68,65" shape="rect" data-placement="25,33,68,65">
  <area title="Green" coords="132,30,194,67" shape="rect">
  <area title="Blue" coords="22,147,74,192" shape="rect">
  <area title="Yellow" coords="131,144,197,188" shape="rect">
</map>

</div>

【讨论】：

嗨。你能检查一下我的小提琴吗？我尝试了您的解决方案，但它仍然漂浮在图像的底部。 jsfiddle.net/woke_mushroom/2u3kbnv9/18我在这里错过了什么？请帮忙！
看起来 bootstrap 正在干扰其他样式...
我现在已经将position: absolute 放入样式属性中，所以它应该可以工作
我已将hover 更改为mouseenter 并添加了mouseleave 处理程序。它现在应该可以工作了，虽然看起来每个区域的定义与每种颜色的大小不同
这可能是因为clientX 和clientY 是相对于客户端，而不是屏幕。例如，如果图像在 iframe 中，则值将相对于 iframe 的内部。 developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX

【解决方案3】：

$(function() {
    $('area').mouseenter(function() {
        let coords = this.coords.split(',').map(a => a.trim())
        $('.card').css({display: 'block', top: coords[1] + 'px', left: coords[0] + 'px', width: coords[2] - coords[0], height: coords[3] - coords[1]})
    });
    $('area').mouseleave(function() {
        $('.card').css({display: 'none'})
    });
});

.interactive-map {
    position: relative;
}
.card {
    display: none;
    position: absolute;
    pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="interactive-map" >
<img usemap="#image_map" src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
  <div class="card">
    <div class="card-body">
      This is some text within a card body.
    </div>
  </div>
  <map name="image_map">
    <area title="Red" coords="0,0,150,150" shape="rect">
    <area title="Green" coords="150,0,300,150" shape="rect">
    <area title="Blue" coords="0,150,150,300" shape="rect">
    <area title="Yellow" coords="150,150,300,300" shape="rect">
  </map>
</div>

此代码将很好地将叠加层放置在一个位置，并通过在 css 中使用“pointer-events: none”来避免闪烁。它还根据区域标签自动计算覆盖的位置和大小。（注意：我已经根据您的要求更改了区域坐标，即每种颜色都被视为自己的盒子）

【讨论】：

嗨。感谢您的解决方案。你能解释一下 a.trim() 在做什么吗？为什么以及如何设置高度和宽度？完全没看懂。
@ItikaBandta 删除字符串开头和结尾的空格、制表符、不间断空格等。更多信息请点击此处：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…)。
@ItikaBandta 我使用了 trim 让它更健壮。如果有人用 coords="0 , 0 , 150 , 150" 之类的空格输入坐标，这是合法的，但如果我们不修剪，我们将得到一个间隙并最终得到“150 px”，这会破坏代码。我还设置了高度和宽度，因为您提到您可能希望将它用于几个不同的图像，这些图像可能具有不同大小的矩形，因此叠加层将再次根据区域坐标自动调整其宽度和高度。

【解决方案4】：

当您为您的区域指定 coords 属性时，您可以指定卡片 left 和 top 属性

let pos = e.target.coords.split(",");
            card.style.top = pos[1] + 'px';
            card.style.left = pos[0] + 'px';
            card.style.display = "block";

最初将其样式设置为不显示，然后在某些事件中计算其实际位置并设置其左侧和顶部。向左和上添加内边距，使文本完全居中显示。

$('area').on("click", function(e) {
            let pos = e.target.coords.split(",");
            const card = document.querySelector('.card');
            card.style.top = pos[1] + 'px';
            card.style.left = pos[0] + 'px';
            card.style.display = "block";

        });

.card {
            position: absolute;
        }
        
        area {
            cursor: pointer;
        }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="interactive-map">
        <img src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg" usemap="#image_map">
        <div class="card" style="width:40%; height: 10%; display: none;">
            <div class="card-body" style="width: 20%;">
                This is some text within a card body.
            </div>
        </div>
        <map name="image_map">
          <area id="one" title="Red" coords="25,33,68,65" shape="rect" data-placement="25,33,68,65">
          <area title="Green" coords="132,30,194,67" shape="rect">
          <area title="Blue" coords="22,147,74,192" shape="rect">
          <area title="Yellow" coords="131,144,197,188" shape="rect">
        </map>

    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

【讨论】：