Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > DIV всплывающий, как подсказка

Автор: Анфиса 1.12.2009, 10:36

Может кто-нибудь подкинет ссылку, как сделать DIV, всплывающий как подсказка?

Автор: skyboy 1.12.2009, 11:14

речь о появлении при наведении и исчезании при уводе курсора в сторону? смотри в сторону javascript, обработка событий mouseover и mouseout.
или речь о верстке этого "плавающего слоя"? тогда смотри в сторону CSS, позиционирования со значением absolute

Автор: KonstRuctor 1.12.2009, 14:19

Видимо, речь идет о тултип (tooltip).
Есть готовые решения, рекомендую для начала попробовать свои силы в подключении готовых.
Лично мне очень нравится такое решение:
где-то внизу документа создаются дивы, в которых содержится текст подсказок.
Сколько нужно подсказок, столько дивов.
Разумеется, эти дивы спрятаны.
При наведении мышки на требуемый объект рядом показывается слой с искомым текстом.
Очень удобно управлять подсказками:
1) Нет единого файла с подсказками, как в некоторых других скриптах
2) Все подсказки для каждого конкретного документа содержаться в нем самом.
* * *
В сложных случаях удобным может оказаться подгрузка html-подсказок с помощью ajax

Автор: Sinneren 9.12.2009, 17:57

Код


<body>
    <script language="javascript">
    function show(id)
    {
    document.getElementById('666').style.visibility='visible';
    }
    function hide(id)
    {
        document.getElementById('666').style.visibility='hidden';
    }
    </script>
<form>
<input type="button" value="Button" onmousemove="show(id)" onmouseout="hide(id)"/>
</form>
<div style="visibility: hidden" id="666">
<table style="margin:3px; background-color:#993";>
<tr>
<td>
Hello,World!
</td>
</tr>
</table>
</div>
</body>

вот такой вариант...

Автор: Sinneren 10.12.2009, 16:53

а вот как сделать для нескольких чтоб постоянно не копипастить я не знаю, мож кто подскажет? smile

Автор: comcon1 12.12.2009, 01:48

смотри код выше и делай дивов сколько хочешь. НО! ошибки детектед. Вот правильная:

Код


<body>
    <script language="javascript">
    function show(id)
    {
    document.getElementById(id).style.visibility='visible';
    }
    function hide(id)
    {
        document.getElementById(id).style.visibility='hidden';
    }
    </script>
<form>
<input type="button" value="Button" onmousemove="show('666')" onmouseout="hide('666')"/>
</form>
<div style="visibility: hidden" id="666">
<table style="margin:3px; background-color:#993";>
<tr>
<td>
Hello,World!
</td>
</tr>
</table>
</div>
</body>