Как добавить пин-код в определенную область, созданную с помощью карты изображений - PullRequest
Новая
       28

Как добавить пин-код в определенную область, созданную с помощью карты изображений

0 голосов
/ 28 мая 2019

У меня есть угловое приложение, в котором я создал карту изображений с использованием HTML usemap

код: 

    <img src="../../assets/floor2.jpg" usemap="#floor2Map">    
        <map name="floor2Map">
            <area shape="poly" coords="210,340,216,234,312,236,323,323,317,346" matTooltip="Info about the Device" >
            <div id='pin-1' class="box" >
            <div class="pin-text">
                <h4>My Device</h3>
             </div>
        </div>
        </map>


In CSS file

.box:hover > .pin-text {
    display: block;
  }

  .box {
    width:8%;
    height:8%;
    background-image:   url('http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg');
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute; 
  }

  .pin-text {
    position: absolute;
    top:50%;
    transform:translateY(-50%);
    left:75%;
    white-space:nowrap;
    display: none;
  }

Я хочу добавить значок на эту конкретную область изображения икогда я наведу на него курсор, должна появиться подсказка.Как это сделать?В настоящее время моя иконка svg находится под изображением.
svg для справки - http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg

1 Ответ

0 голосов
/ 28 мая 2019 
.box {
    top : 260px ;
    left : 210px;
    width:8%;
    height:8%;
    background-image:   url('http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg');
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute; 
  }

Добавление верхнего и левого позиционирования решило проблему

...