На главную Написать письмо

Всплывающие подсказки на JavaScript

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

Именно такой скрипт я сейчас продемонстрирую, поехали (пример тут).

Для меня основной проблемый было - куда засунуть эти подсказки, чтобы их небыло видно, но в нужный момент до них было легко добраться, и еще хочется, чтобы документ получался валидный, и работало чтобы во всех популярных браузерах. В итоге я их засунул в невидимый span внутри элемента, при наведении на который нужно показать подсказку. Чтобы span был невидимым, я сделал для него CSS класс prompt:

<style type="text/css">
span.prompt{
display:none;
}
</style>

Теперь разместим этот span внутри какого-нибудь элемента, например гиперссылки:

<a href="#">текст ссылки<span class="prompt">текст подсказки</span></a>

выглядеть это будет так: текст ссылкитекст подсказки

Дальше сложного ничего нет. OnMouseOver позиционируем подсказку, задаем задержку перед показом, получаем текст или HTML код подсказки, засовываем через innerHTML в предварительно созданный DIV (который будет служить контейнером для подсказок) и показываем ее.

OnMouseOut задаем задержку и прячем подсказку. Это весь механизм работы скрипта.

Есть несколько настроек о которых немешало бы знать:

  1. Внешний вид подсказок задается стилeм для DIV с id="prompt", в примере он выглядят так:
    <style type="text/css">
    div#prompt{
    padding:2px;
    background:#FFFFCC;
    border:1px solid #999999;
    font-size:11px;
    color:#555555;
    }
    </style>
  2. В файле со скриптом находятся следующие настройки:
    myprompt.show_delay=500; //задержка перед появлением подсказки в милисекундах
    myprompt.hide_delay=200; //задержка перед исчезанием подсказки в милисекундах
    myprompt.cursor_shiftX=20; //сдвиг относительно курсора по Х
    myprompt.cursor_shiftY=0; //сдвиг относительно курсора по Y
    myprompt.prompt_elements=new Array('a','h1'); //массив элементов для которых устанавливаются подсказки

Архив со скриптом

Тестировал скрипт в IE7, IE6, Mozilla SeaMonkey 1.0.1, Opera 9.02

 

 

Оставить комментарий
 

наверх