javascript - 如何使用图像映射写入区域的文本中心？

Question

我使用了 map 和 area attr，为了给它们设置样式，我使用了 maphighlight.js，它是 jquery。当我悬停时，它会显示边框和颜色填充等。

现在我想把用坐标确定的每个区域的文本中心。当页面加载时，我想看到区域中心的文本“没有悬停”，悬停后我想看到边框，颜色等。感谢您的帮助。这是我的代码。 1) map

 $(document).ready(function(){
    $('.map').maphilight();
});

2)我尝试写文本但不能正常工作

    $(function() {

    $('area').each(function(){
        var txt=$(this).data('name');
        var coor=$(this).attr('coords');
        var coorA=coor.split(',');
        var left=coorA[0];
        var top=coorA[1];

        var $span=$('<span class="map_title">'+txt+'</span>');        
        $span.css({top: top+'px', left: left+'px', position:'absolute'});
        $span.appendTo('.content');
    }) 
})

这是映射

<div class="content">

<img src="ozak.jpg" alt="" class="map" width="2000" height="2000" border="0" usemap="#demo">
</div>
<map name="demo">
     <area  id="51" alt="D1" class ="tooltip" title="3+1 150 m² Deniz Manzaralı " href="javascript: alert('Daire 5127 Satılmıştır!')" coords="588,271,816,369" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"F72E06","fillOpacity":0.7}' data-name="Daire1">
    <area  alt="" title="" href="javascript: alert('Daire 5287 Satılıktır!')" coords="1251,278,1374,367" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"00BD06","fillOpacity":0.7}' data-name="Daire2">
  <area alt="" title="" href="javascript: alert('Daire 8692 Satılmıştır!')" coords="600,469,807,554" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"F72E06","fillOpacity":0.7}' data-name="Daire3">


</map>

CSS

#map {
    position:relative
}
.map_title {
    position:absolute;    
}

Answer 1

首先是我使用了自己的图像。

coords="588,271,816,369" 的工作原理:

• 这里是 x1,y1,x2,y2，其中 x1,y1 代表区域的左上角，x2,y2 代表区域的右下角。
• 第二件事是您需要将这些坐标解析为整数以计算文本的顶部/左侧属性。
• 现在，您可以使用此公式计算左属性。 parseInt(coorA[0])+((parseInt(coorA[2])-parseInt(coorA[0]))/2)。和顶部一样

请注意，我在这里计算的点是您的 rect 的确切中心，但它出现在右侧，因为它是从确切的中心点开始的。您可以应用更多数学知识来使其完全居中对齐。

编辑

您可以计算跨度的宽度并获取其宽度。之后，除以 2 将为您提供需要减去的像素，以使您的标签准确地位于中心。在这里，我假设在边框中使用了一些像素，所以我有 9 个像素作为调整。如果您觉得它工作正常，可以将其删除。

$(function() {
    $('.map').maphilight();
    $('area').each(function(){
        var txt=$(this).data('name');
        var coor=$(this).attr('coords');
        var coorA=coor.split(',');
        
        var left=parseInt(coorA[0])+((parseInt(coorA[2])-parseInt(coorA[0]))/2);
        var top=parseInt(coorA[1])+((parseInt(coorA[3])-parseInt(coorA[1]))/2)
        
        var $span=$('<span class="map_title">'+txt+'</span>');        
        $span.css({top: top+'px', left: left+'px', position:'absolute'});        
        $span.appendTo('.content');
        $span.css({left:(left-Math.ceil($span.width()/2)+9)+'px'})
        
    }) 
});

#map {
    position:relative
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js" integrity="sha256-nUK4JHJVwdj7H1SYkkMcuE2unpjH5vYOe3mGEVu/69Q=" crossorigin="anonymous"></script>
<div class="content">

<img src="https://i.picsum.photos/id/372/200/300.jpg" alt="" class="map" width="2000" height="2000" border="0" usemap="#demo">
</div>
<map name="demo">
     <area  id="51" alt="D1" class ="tooltip" title="3+1 150 m² Deniz Manzaralı " href="javascript: alert('Daire 5127 Satılmıştır!')" coords="588,271,816,369" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"F72E06","fillOpacity":0.7}' data-name="Daire1">
    <area  alt="" title="" href="javascript: alert('Daire 5287 Satılıktır!')" coords="1251,278,1374,367" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"00BD06","fillOpacity":0.7}' data-name="Daire2">
  <area alt="" title="" href="javascript: alert('Daire 8692 Satılmıştır!')" coords="600,469,807,554" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"F72E06","fillOpacity":0.7}' data-name="Daire3">


</map>