Окно в окне на JavaScript. Часть IV

Как и в предыдущей статье про всплывающие окна в данной я не буду описывать код полностью, а сделаю акцент лишь на некоторые изменения, а они, надо сказать, совсем незначительны.

И так, перед нами стоит задача при наведении на некоторые объекты отображать всплывающие подсказки. Можно конечно обойтись тегами alt и title, но, во-первых, их не возможно форматировать, а во-вторых, в них нельзя отображать ничего, кроме текста.

Код скрипта:

<style>
.bar {
position: absolute;
border: 1px solid #FFDE73;
padding: 5 10 5 5;
left: 0px;
width: 300px;
height: 80px;
visibility: hidden;
background-color: #FFFFCC}

.linkspan { color: #ff0000; cursor: pointer }

</style>

<script>

function show_bar(ev, id) {

MouseX = ev.clientX + document.body.scrollLeft;
MouseY = ev.clientY + document.body.scrollTop;

obj = document.getElementById("win[" + id + "]");

obj.style.top = MouseY + 10 + "px";
obj.style.left = MouseX + "px";
obj.style.visibility = "visible";
}

function hide_bar(id) {

document.getElementById("win[" + id + "]").style.visibility="hidden";

}

</script>

При нажатии на <span class='linkspan' onmousemove='show_bar(event, 1)' onmouseout='hide_bar(1)'>первую ссылку</span> вы увидите первое всплывающее окно, при нажатии на <span class='linkspan' onmousemove='show_bar(event, 2)' onmouseout='hide_bar(2)'>вторую</span> - второе всплывающее окно. При нажатии на <span class='linkspan' onmousemove='show_bar(event, 3)' onmouseout='hide_bar(3)'>третью ссылку</span> вы увидите третье всплывающее окно.

<div id="win[1]" class="bar">

<br>
Первое всплывающее окно...

</div>

<div id="win[2]" class="bar">

<br> Второе всплывающее окно...

</div>

<div id="win[3]" class="bar">

<br>
Третье всплывающее окно...

</div>
</div>

Отличительной чертой от предыдущих версий скрипта стало использование событий onmousemove (движение указателя по объекту) и onmouseout вместо onclick.

В некоторых случаях в всплывающей подсказке необходимо отображать только текст. В этих случаях для каждой подсказки можно не создавать отдельный div, а занести весь текст в виде массива и передавать одному div содержимое из массива (innerHTML).

Если вам необходимо, что бы подсказка не плавала вслед за курсором, а появлялась в определенном месте экрана, отредактируйте стиль bar (top и left) и закомментируйте строки:

obj.style.top = MouseY + 10;
obj.style.left = MouseX;

Пример работы скрипта: Окно — проем, специально создаваемый в стене дома в процессе строительства. Через окна в комнаты поступает свет. Также они могут служить для вентиляции помещений.

webobzor.net

Anterot    24.12.2007  18:29 Куто кокрас то чтонужно )) Распект тебе Лёха!

xe  06.03.2008  18:54 Подскажи, пожалуйста, как вставить в єто окно картинку

xe  06.03.2008  19:01 Всё, я чёта притормозил. С картинкой гараздо лучше!

jug  20.05.2008  14:04 Если вставить или другой, то пример не работает. В чем может быть проблема?

jug  20.05.2008  14:06 doctype проглотился: HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

jug  20.05.2008  14:07 doctype проглотился: HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" Не работает в мозиле.

lexa  20.05.2008  15:20 кинь код на форум, посмотрим

jug  20.05.2008  15:39 Создал тему http://www.webobzor.net/forum/index.php?topic=82.0

lexa  20.05.2008  16:04 поправил статью...

* Ник:
E-mail:
Сайт:
* Комментарий:
* Введите число:	94