데이터베이스에서 가져온 팝업 텍스트로 롤오버에 이미지 맵 팝업

나는 약 20 개의 다각형 핫스팟이있는 미국의 맞춤형지도가 있습니다. 호버상의 각 핫스팟 옆에 상자가 나타나고 위치와 관련된 내 DB에서 가져온 텍스트와 링크가 나타납니다. 나는 이것이 일반적인 상황이라고 생각했을 것이다. 그러나 나는 그 해결책을 찾을 수 없다. asp : imagemap 및 ajax 팝업 익스텐더를 사용해 보았지만 핫스팟에 ID를 할당 할 수 없으며 마우스 오버 이벤트를 지원하지 않습니다. html 이미지 맵을 사용하여 CSS를 시도했지만 다각형 핫 스폿이있는 CSS 솔루션을 사용하는 방법을 알아낼 수 없으며 asp 대상이없는 데이터베이스에서 데이터를 가져 오는 방법을 알지 못합니다. jquery에 익숙하지 않은데, 그것은 작동 할 것이고, 나는 추측하고있다). 누구든지 간단한 해결책을 알고 있습니다.데이터베이스에서 가져온 팝업 텍스트로 롤오버에 이미지 맵 팝업

출처

2010-05-13 lbholland

내가 필요로하는 팝업 상자 기능 유형의 가장 좋은 예는 사용자가 자신의 링크로 이동할 수 있도록 열린 상태로 유지되는 팝업 상자가있는 Google지도입니다. 나는 마우스 오버 기능을 포기하고 딱딱한 클릭을 해결하고자합니다. 사실 나는 단순히 Google지도를 사용하고 싶었지만 디자이너는 맞춤지도 그래픽 사용을 고집하고 있습니다. – lbholland

자바 스크립트 솔루션이 필요합니다 (당연히 서버 측에서 제공된 데이터 포함). Using JQuery hover with HTML image map을 아직 보지 않으셨습니까?

실제로 제공된 답변은 http://plugins.jquery.com/project/maphilight에 대한 링크와 http://davidlynch.org/js/maphilight/docs/demo_usa.html에 대한 데모를 제공합니다. 그것은 당신이 찾고있는 것이 아니지만 가까운 것입니다.

서버 측 데이터를 클라이언트 측지도 강조 표시와 가장 잘 통합하는 방법을 알려 드리지만 더 많은 정보가 필요합니다.

출처

2010-05-13 00:33:27 Ted

안녕하세요, 네, 그 스레드와 Map Hilight 데모를 보았습니다.하지만 강조 표시를 원하지 않기 때문에 적용되지 않습니다. 그리고 팝업 상자는 그리는 여러 단락이 아닌 정적 데이터의 소량만을위한 것입니다. a db. 기본적으로 나는 imagemap 핫스팟 위로 마우스를 가져 가면 팝업 상자가 나타나기를 원하며 그 팝업 안에는 해당 특정 영역에 대한 주소 및 링크가 약 5 - 10 단락이됩니다. 나는 단순화를 위해 미국지도를 여러 주 (북동부 등) 지역으로 나누고있다. 이것은 모두 aspx 페이지에 있습니다. – lbholland

MapHilight의 주된 문제는 마우스를 올리면 팝업이 열리지 않기 때문에 링크를 사용할 수 없다는 것입니다. – lbholland

다른 컨텍스트에서 팝업을 만드는 것과 다른 이유는 알 수 없습니다. area 요소에 '데이터'를 첨부하는 방법에는 여러 가지가 있습니다. 가장 간단한 생각은 alt 속성을 사용하는 것입니다.

예를 들어 this demo을 확인하십시오. (아래 코드입니다.)

HTML

<body> 
<p>Hover on the sun or on one of the planets to get its info:</p> 
<div id="map"> 
    <div id="overlay"></div> 
    <img src="http://www.w3schools.com/TAGS/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> 
</div> 
<map name="planetmap"> 
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.w3schools.com/TAGS/sun.htm" /> 
    <area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.w3schools.com/TAGS/mercur.htm" /> 
    <area shape="circle" coords="124,58,8" alt="Venus" href="http://www.w3schools.com/TAGS/venus.htm" /> 
</map> 
</body>

$('area').each(function(){ 
    var area = $(this), 
     alt = area.attr('alt'); 
    area.mouseenter(function(){ 
     $('#overlay').html(alt); 
    }).mouseleave(function(){ 
     $('#overlay').html(''); 
    }); 
});

CSS는

#map { 
    position: relative; 
} 
#overlay { 
    position: absolute; 
    background: #000; 
    color: #fff; 
    top: 20px; 
    left: 20px; 
}

없음 AJAX 호출 없지만, 사람들은 수 각 area 요소의 mouseenter 및 mouseleave 이벤트에 쉽게 추가 될 수 있습니다.

출처

2010-05-13 00:43:19 Adam

안녕하세요,이 방법을 사용하면 각 핫스팟에 대해 div를 만들지 않고도 실제 핫스팟 옆에 마우스를 올려 놓는 대신 고정 된 지점 대신 팝업을 사용하도록 할 수 있습니다. 그들을 하드 코딩)? – lbholland

또한 사용자가 (Google지도처럼) http 링크를 클릭 할 수 있도록 핫스팟뿐만 아니라 마우스를 가져 가면 팝업 상자가 열려 있어야합니다.기본적으로 Google지도의 팝업 기능과 매우 유사합니다. – lbholland

데이터베이스에서 가져온 팝업 텍스트로 롤오버에 이미지 맵 팝업

답변

관련 문제