대화 형 이미지 AngularJs

AngularJS과 HTML을 사용하여 웹 사이트를 만들었으므로 정적 이미지를로드하고이 이미지에 대화 형 스폿을 만들려고합니다.대화 형 이미지 AngularJs

이 지점에 마우스를 올려 놓으면 몇 가지 정보가 포함 된 팝업 알림이 표시됩니다.

어떤 라이브러리를 사용해야합니까? 나는 OpenLayers를 확인하지만 올바른 선택

나는이 같은 솔루션이 생각하는 내가 원하는위한 경우 나는 잘 모릅니다 :

2016-10-12 user3836982

왜 당신은 그냥 사용할 수 없습니다지도/지역 태그를 동적으로 이미지에 추가 여기에 예제가? –

당신은 HTML 이미지 맵을 사용할 수 있습니다.

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<p>Click on the sun or on one of the planets to watch it closer:</p> 

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 

<map name="planetmap"> 
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> 
    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> 
    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> 
</map> 

<script> 
$("area").hover(
    function() { 
    alert('This is ' + $(this).attr("alt")); 
    } 
); 
</script> 

</body> 
</html>

출처 : w3schools jQuery

출처

2016-10-12 10:20:12

감사합니다. 한 가지 질문 : 에 아이콘을 삽입 할 수 있습니까? – user3836982

질문에 편집 해주세요 감사합니다 – user3836982

아니, 그런 식으로 작동하지 않습니다. 아이콘은 이미 이미지의 일부 여야합니다. 아이콘을 애니메이션으로 만들려면 이미지 또는 gif 이미지에 CSS 애니메이션을 사용할 수 있습니다. –

대화 형 이미지 AngularJs

답변

관련 문제