如何使用imagemap书写区域的文本中心？

Question

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

现在，我想将每个区域的文本放置在由坐标确定的区域的中心。当页面加载时，我想在“无悬停”的区域中心看到文本，悬停后我想看到边框，颜色等。感谢您的帮助。这是我的代码。 1）Maphilight

 $(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是区域的右下角。
• 第二件事是，您需要将这些坐标解析为整数以计算文本的top / left属性。
• 现在，您可以使用此公式计算左属性。 parseInt(coorA[0])+((parseInt(coorA[2])-parseInt(coorA[0]))/2)。和顶部相同

[请注意，这里我计算的点是rect的精确中心，但是从精确中心开始，它在右侧显得有些倾斜。您可以应用更多数学以使其完全居中对齐。

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

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