ImageMapster 용 PHP 생성 툴팁을 만드는 방법은 무엇입니까?

Question

저는 각 직원이 책상이있는 곳을보기 위해 회사의 바닥지도에서 작업 중이므로 다른 사람을 방문하고 싶으면 쉽게 찾을 수 있습니다.

내가 <area>의 많은으로 <map>을 만들었으며 지금은 테이블을 highligth을하고있는 직원 (사진, 이름, 위치 등 (소형 명함))에 대한 몇 가지 정보를 표시 할 수 ImageMapster을 사용하고 있습니다 툴팁.

맵스터 초기화시 areas을 수동으로 변경하는 것이 실제로 바람직하지 않기 때문에 PHP로 툴팁 캡션을로드하려고합니다. 지금까지이 작업을했습니다

이

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

그러나 툴팁이 표시되지 않으며, 콘솔은 오류가없는 것처럼

<div class="mapster-map"> 
    <img src="images/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> 

는 그래서 outup <area>은의 보인다. 불을 지르고에서 <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"}]] 
}); 

나는 희망이 붙어있어이 사람이 어떻게이 일을하는 아이디어가있다 바랍니다.

Answer 1

JavaScript에서 areas은 중첩 된 두 개 이외의 다른 대괄호 areas:[...] 만 포함해야합니다. areas:[[...]]. 문서 here에 따르면. 그래서 우리는 단지 그 여분의 브라켓을 제거해야합니다

이

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

우리는이 작업을 수행 할 수 있습니다 여기에 자바 스크립트에서 그들을 제거 :

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

areas: <?php echo $found ?> 

에 $found가를하기 때문에 배열에는 대괄호가 필요합니다.