Всплывающие окна.

atf · November 10, 2007

Народ помогите сделать при наведение мышкки или при нажатии мыши на раздел вылетали окна. К примеру из такой таблички или если есть у кого, что-нибудь на подобии готовое скиньте пожалауста. Заранее огромное спасибо!

<script>
var from = 5;
var to = 15;
var delay = 60;
var glowColor = "gold";
var i = to;//osw
var j = 0;
olwtext();
function utexw()
{
if (!document.all)
return
if (i < to)
{
olwte.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
i++;
theTimeout = setTimeout('utexw()',delay);
return 0;
}
if (i = to)
{
theTimeout = setTimeout('olwtext()',delay);
return 0;
}
}
function olwtext()
{
if (!document.all)
return
if (i > from)
{
olwte.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
i--;
theTimeout = setTimeout('olwtext()',delay);
return 0;
}
if (i = from)
{
theTimeout = setTimeout('utexw()',delay);
return 0;
}
}
Главная
Алканы
Алкены
Алкадиены
Алкины
ароматический углеводород
Об Авторе
Консультанты
FONT: 11px verdana
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; LIST-STYLE-TYPE: none
}
UL LI {
POSITION: relative
}
LI UL {
DISPLAY: none; LEFT: 149px; POSITION: absolute; TOP: 0px
}
UL LI A {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #fff; PADDING-BOTTOM: 5px; BORDER-LEFT: #ccc 1px solid; COLOR: #777; PADDING-TOP: 5px; BORDER-BOTTOM: #ccc 0px solid; TEXT-DECORATION: none
}
HTML UL LI {
FLOAT: left; HEIGHT: 1%
}
HTML UL LI A {
HEIGHT: 1%
}
UL LI A:hover {
BACKGROUND: #f9f9f9; COLOR: red
}
LI UL LI A {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
LI:hover UL {
DISPLAY: block
}
LI.over UL {
DISPLAY: block
}
startList = function() {//fantasyflash.ru
if (document.all&&document.getElementById) {
menusRoot = document.getElementById("menus");
for (i=0; i
node = menusRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";//osw
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

Dimitry Wolotko · November 10, 2007

в JS

Vlad · November 12, 2007

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>reset</title>
<style type="text/css">
#floatTip {
position: absolute;
width: 250px;
display: none;
border: 1px solid #000;
padding: 4px;
font-size: 90%;
background: #ffe
}
</style>
<script type="text/javascript">
document.onmousemove = moveTip

function moveTip(e) {

floatTipStyle = document.getElementById("floatTip").style

if (document.all) {
 x = event.x + document.body.scrollLeft
 y = event.y + document.body.scrollTop
}

else {
 x = e.pageX
 y = e.pageY
}

 floatTipStyle.left = x
 floatTipStyle.top = y + 20
}

function toolTip(msg) {

floatTipStyle = document.getElementById("floatTip").style

if (msg) {

 document.getElementById("floatTip").innerHTML = msg
 floatTipStyle.display = "block"
}

else { 
 floatTipStyle.display = "none"
} 

}
</script>
</head>
<body>
<p><a href="#" onMouseOver="toolTip('Пример всплывающей подсказки')" onMouseOut="toolTip()">Ссылка</a></p>
<div id="floatTip"></div>
</body>
</html>

Vlad · January 24, 2008

добавь, вот и будет две строки.

ХОЛОДный · January 24, 2008

А как вы увидели сообщение? Я же его стер, потому что оно очень глупое было :cool:

Rilo · February 12, 2008

Vlad

1. что делает этот параметр в отдельности от других? нужен ли он?

<div id="floatTip"></div>

2. к тому же, после этой записи просиходит обрыв абзаца, а мне надо, чтобы текст продолжался одним абзацем. как это сделать?

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

4. ещ? возникла БОЛЬТШАЯ проблема, что появляющееся окошко выходит за рамки окна, и его не видно. а если попытаться прокрутить прокрутку, то мышка выходит из ракурса. и окошко всплывает вс? время в разном месте, то сильно выше, то ниже. это также затрудняет обзор содержимого. как можно сделать его плавание относительным в близости от источника?

Vlad · February 13, 2008

1. Да, жизненно необходим. Собственно, это и есть всплывающая подсказка. Поскольку исходное положение этого слоя не имеет значения, можешь задать ему абсолютное позиционирование и выводить за пределами страницы или спрятать через display: none.

2. Смотри стили для #floatTip, их и настраивай.

По поводу 4-го пункта почитай здесь обсуждение

http://forum.htmlbook.ru/index.php?showtopic=7488

Rilo · March 13, 2008

По поводу 4-го пункта почитай здесь обсуждение
http://forum.htmlbook.ru/index.php?showtopic=7488

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

и если это не туда надо добавлять, то, Влад, помогите готовым рецептом.

Rilo · May 9, 2008

господа, ещ? раз обращаюсь за помощью, как можно объединить пример выше и

if ((ev.clientX + 178) > document.body.clientWidth) {
tip.style.left=ev.clientX + document.body.scrollLeft + tiptop.offsetX - 178;
} else {
tip.style.left=ev.clientX + document.body.scrollLeft + tiptop.offsetX;
}
tip.style.top=ev.clientY + document.body.scrollTop + tiptop.offsetY;

в данном примере меня не устраивает, что окошко нечитабельно, во втором примере http://forum.htmlbook.ru/index.php?showtopic=7488 слишкое большое количество лишних стилей. в примере по ссылке я заменил место

if(window.event) ev=window.event;
tip.style.left=ev.clientX + document.body.scrollLeft + tiptop.offsetX;
tip.style.top=ev.clientY + document.body.scrollTop + tiptop.offsetY;

На предложенное владом.

но хотелось бы получить более чистый код, чтобы вставить его в страницу.

LokiDi L0ck · May 9, 2008

а мне надо

помогите готовым рецептом

меня не устраивает

хотелось бы получить

может разумнее перенести тему в "Вакансии и разовые заказы"?

Sign In

Всплывающие окна.

Question

atf

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Dimitry Wolotko

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

ХОЛОДный

Link to comment

Share on other sites

Rilo

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Rilo

Link to comment

Share on other sites

Rilo

Link to comment

Share on other sites

LokiDi L0ck

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information