Подсказка для отображения над или под активной областью в зависимости от положения прокрутки

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

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

Функции должным образом вызываются для событий mouseover и mouseout.

На данный момент позиционирование применяется в css. Однако я хотел бы расширить это, чтобы показать всплывающую подсказку выше или ниже точки доступа в зависимости от положения прокрутки. Я имею в виду, что в данный момент, если вы наведете курсор мыши на точку доступа, которая находится в нижней части экрана, появившийся элемент div окажется вне поля зрения, и посетителю придется прокрутить вниз, чтобы увидеть его. Я бы хотел, чтобы в таких случаях он появлялся над точкой доступа.

Любые предложения, спасибо.


javascript dhtml
person timewarpagain    schedule 12.11.2009    source источник
comment
Я знаю, что переменные document.documentElement.clientHeight и window.pageYOffset будут важны   -  person timewarpagain    schedule 12.11.2009
comment
Обратитесь по этой ссылке. Это удовлетворяет вашим требованиям. walterzorn.com/tooltip/tooltip_e.htm dyn-web.com/code/tooltips   -  person sathish    schedule 12.11.2009

Ответы (1)


arrow_upward
0
arrow_downward

Однажды я собрал что-то вместе с помощью Prototype (getDimensions() / viewport.getScrollOffsets() спасают жизни!), но больше не могу найти код. Я просто помню, что выяснить, какое смещение использовать с каким позиционированием, кажется простым, но занимает много времени, прежде чем это действительно сработает.

Вы можете использовать существующее решение (или заглянуть в одно из них, чтобы увидеть, как они позиционируют себя). Prototip Ника Стакенбурга (предупреждение, что это не совсем бесплатно, проверьте страницу лицензии) очень хорош и гибок. , но существуют десятки скриптов для всех фреймворков.

Для решений, не зависящих от фреймворка, проверьте DynamicDrive, они работают, даже несмотря на то, что код иногда заставляет ваши ногти скручиваться.

person Pekka    schedule 12.11.2009