스크롤 위치에 따라 위 또는 아래 핫 스폿을 표시하는 툴팁

Question

이미지 맵의 핫 스폿 위에 마우스를 가져 가면 일부 div를 표시하고 숨길 수있는 간단한 javascript를 수행했습니다.

<script> 
function showDiv(name) { 
document.getElementById(name).style.display = "block"; 
} 
function hideDiv(name) { 
document.getElementById(name).style.display = "none"; 
} 
</script> 

이 기능은 mouseover 및 mouseout 이벤트에서 적절하게 호출됩니다.

현재 포지셔닝이 CSS에 적용됩니다. 그러나 스크롤 위치에 따라 핫스팟 위 또는 아래에 툴팁을 표시하기 위해 이것을 확장하고 싶습니다. 내 말은 화면 하단에있는 핫스팟 위에 마우스를 올려 놓으면 표시되는 div가 보이지 않게되어 방문자가 화면을 아래로 스크롤해야 볼 수 있습니다. 나는 그런 경우에 핫스팟 위에 나타나기를 원합니다.

의견, 감사합니다.

Answer 1

Prototype (getDimensions()/viewport.getScrollOffsets()가 lifesavers입니다!)을 사용하여 한 번 붙여 넣었지만 더 이상 코드를 찾을 수 없습니다. 나는 어떤 위치 설정이 사용하기 쉬운지를 알아내는 것이 쉽지만 실제로 작동 할 때까지는 많은 시간이 걸린다는 것을 기억합니다.

기존 솔루션을 기반으로 구축하거나 (위치를 확인하는 방법을 살펴 보려고 할 수도 있습니다.) Nick Stakenburg의 Prototip (전적으로 무료는 아니지만 라이센스 페이지 확인)은 매우 훌륭하고 유연하지만 모든 프레임 워크에 대해 수십 개의 스크립트가 있습니다.

프레임 워크와 무관 한 솔루션의 경우 DynamicDrive을 확인하십시오. 코드가 때때로 발톱을 말리 게 만드는 경우에도 작동합니다.