Как написать текстовый центр области, используя imagemap? - PullRequest
Новая
       20

Как написать текстовый центр области, используя imagemap?

0 голосов
/ 09 января 2020

Я использовал карту и область attr, а для их оформления я использовал maphighlight. js, то есть jquery. При наведении курсора отображаются границы и цветовые заливки и т. Д. c.

Теперь я хочу поместить текстовый центр каждой области, которая определяется с помощью координат. Когда страница загружается, я хочу видеть тексты в центре областей "без наведения", а после наведения хочу видеть границы, цвет и т. Д. c. Спасибо за вашу помощь. Вот мой код 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;    
}

1 Ответ

0 голосов
/ 09 января 2020

Во-первых, я использовал свое собственное изображение.

Как работает 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>
...