Как создать всплывающие подсказки PHP для ImageMapster?

Я работаю над картой пола для своей компании, чтобы увидеть, где у каждого сотрудника есть свой рабочий стол, поэтому, если вы хотите навестить кого-то, вы можете легко найти его заранее.

Я создал <map> с большим количеством <area>ы и теперь я использую ImageMapster выделить таблицу и отобразить некоторую информацию о сотруднике (фото, имя, должность и т. д. (небольшая визитная карточка)) во всплывающей подсказке.

И потому что это действительно не оптимально, чтобы вручную изменить areas в инициализации mapster я хочу загрузить заголовки всплывающих подсказок PHP.

Я сделал это до сих пор:

<div class="mapster-map">
<img src="https://web-answers.ru/wp-content/uploads/2019/03/floor_2.png" border="0" width="1300" height="1300" usemap="map_floor_2" alt="" />
<map name="map_floor_2" id="ImageMap-map_floor_2">
<?php
$found = array();
foreach ($tables as $t) {
$user = $map->getSeatedEmployee($t['id']);
if (!empty($user)) {
$found[] = array('key'=>$t['id'], 'toolTip'=>$user['jmeno'] . ' ' . $user['prijmeni']);
}
echo '<area id="' . $t['id'] . '" coords="' . $t['coords'] . '" shape="' . $t['shape'] . '" alt=""title="' . (!empty($user) ? $user['name'] . ' ' . $user['surname'] : '') . '" href="' . (!empty($user) ? 'user_detail.php?id=' . $user['id'] : '#') . '" />';
}
$found = json_encode($found);
?>
</map>
</div>
<script>
$('img[usemap]').mapster({
mapKey: 'id',
fillColor: 'EE1C23',
fillOpacity: 0.65,
showToolTip: true,
areas:[<?php echo $found ?>]
});
</script>

Так что <area>выглядит так

<area id="2-13-2" href="user_detail.php?id=1" title="Adam Jones" alt="" shape="rect" coords="274,269,356,337">
<area id="2-13-4" href="user_detail.php?id=2" title="Bon Jovi" alt="" shape="rect" coords="189,269,271,337">
<area id="2-13-6" href="user_detail.php?id=3" title="Charles Copperfield" alt="" shape="rect" coords="104,269,186,337">
<area id="2-13-8" href="#" title="" alt="" shape="rect" coords="013,269,081,353">
<area id="2-13-1" href="user_detail.php?id=4" title="Christina Davis" alt="" shape="rect" coords="274,390,356,458">

Но всплывающие подсказки не отображаются, и в консоли нет ошибок. В клопе <script> выглядит так:

$('img[usemap]').mapster({
mapKey: 'id',
fillColor: 'EE1C23',
fillOpacity: 0.65,
showToolTip: true,
areas:[[{"key":"2-13-2","toolTip":"Adam Jones"},{"key":"2-13-1","toolTip":"Bon Jovi"},{"key":"2-13-1","toolTip":"Charles Copperfield"},{"key":"2-13-1","toolTip":"Christina Davis"}]]
});

Я безнадежно застрял на этом, надеюсь, у кого-то есть идея, как заставить это работать.

1

Решение

В вашем JavaScript areas должны иметь только одинарные скобки areas:[...] кроме двух вложенных areas:[[...]], Согласно документации Вот. Нам просто нужно избавиться от лишних скобок:

$('img[usemap]').mapster({
... ,
areas:[{"key":"2-13-2","toolTip":"Adam Jones"},{"key":"2-13-1","toolTip":"Bon Jovi"},{"key":"2-13-1","toolTip":"Charles Copperfield"},{"key":"2-13-1","toolTip":"Christina Davis"}]
});

Мы можем сделать это, удалив их в JavaScript здесь:

areas:[<?php echo $found ?>]

к

areas: <?php echo $found ?>

поскольку $found это массив, в нем есть необходимые скобки.

2

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]