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

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

Форум программистов > JavaScript: Общие вопросы > появляющаяся информация

Автор: Alix36 20.1.2007, 21:38

1.Нужно сделать, чтобы при наведении на текст. появлялось маленькое окошко
2.пытался сделать через onMouse***="", но дальше непонятно нужно юзать слои, но мне это оч. не хочется.
3.гдето с месяц-2 назад тут была темка, с подобной проблемой(только там отладка уже была). та при наведении на ссылку появлялось несколько строчное маленькое окошко.
Подскажите можно ли как-нибудь обойтись без слоев и если кто наткнется, или помнит ту тему, киньте на нее ссылку.

Автор: 12345c 21.1.2007, 01:51

http://js2.ru/example/JsPrimeryCode-46.htm - "Подсказка к объекту ..."
Оно по определению со слоями, в примере показано, как не связываться с абсолютными координатами, вычисляя их автоматически.

Код

<style>.tip{position:absolute;visibility:hidden;
    background:peachpuff;padding:1 4;border:1px solid brown;}</style>
<table border=1><tr><td>..............</td><td>
    --->> <select onmouseover=toolTip('s2',this) onmouseout=toolTipOut('s2')>
    <option>fdsfxxxxxx</option></select> <<--- 
</td></tr></table>
<div class=tip id=s2 style="width:120;">prompting 2<br>==<img src=snow.gif
    align=absmiddle>==<br>(пример рисунка в подсказке)</div>
<script>toolTip=function(tip,t){
    var s=document.getElementById(tip);
    var a=getPosition(t);
    s.style.left=a[0]+t.offsetWidth;
    s.style.top=a[1]+t.offsetHeight;
    s.style.visibility='visible';
}
toolTipOut=function(tip){document.getElementById(tip).style.visibility='hidden';}
function getPosition(o){var x=y=0;
    while(o){x+=o.offsetLeft;y+=o.offsetTop;o=o.offsetParent;}
return[x,y]};
</script>

Есть вариант управлять стилем display объекта, лежащего в потоке, но он не будет привязан к мыши или к другому объекту.

Вариант достаточно универсальной функции, работающей сразу с несколькими блоками:

Код


fShHid=function(t){al=arguments.length;
  for(var i=1;i<al;i++){
    c=arguments[i];cl=c.length;o=t;
    for(j=0;j<cl;j++){cj=c.charAt(j);
      if(cj=='-'){o=o.parentNode;continue;}
      if(/\d/.test(cj)){/*alert(o.tagName);*/o=o.childNodes[parseInt(cj)];continue;}
      if(cj=='b'){o=o.style./*visibility='visible'*/display='block';continue;}
      if(cj=='n'){o=o.style./*visibility='hidden'*/display='none';}
      if(cj=='i'){o=o.style.display='inline';}
      if(cj=='t'){o=o.style.display=d.all&&!self.opera?'block':'table-cell';}
    }
  }
}
//вызывать (пример): onclick="fShHid(this,'n','-1b','---1000011b','---1000010n','---1000001b'
//  ,'---1010011b','---1010010n','---1010001b','---1020011b','---1020010n','---1020001b')"

Реализация на http://js2.ru/files/js-man3.htm (кнопки "Содержание", "Свернуть", ...; выполняет довольно сложные группы операций не со слоями).

Подумал, что надо пояснить, что параметры делают. Функция основана на том, что ходит по дереву DOM относительно объекта из 1-го параметра и может включать или выключать видимость соседних нод. С каждым новым параметром она проходит по строке параметра и выполняет команды: "-" - подняться на уровень вверх, "цифра" - выбрать childNode c номером и спуститься на уровень вниз. Последний параметр - одна из букв, указывающая, что делать с выбранной нодой. "n" - display:none, "b" - display:block, и т.д. Сколько параметров, столько действий. Каждый начинает выбор снова с начальной ноды.
   Для совместимости с Opera/FF надо обязательно не делать пробелов или переносов строки между тегами в ветвях, участвующих в операциях (вплоть до используемой ноды, а далее не имеет значения), иначе ноды считаются неправильно.
   В примере вызова второй параметр указывает - выключить текущий слой (саму кнопку), третий параметр - включить соседнюю ноду под номером 1. Следующие - обращение куда-то в более глубокие уровни структуры.
   (Понятно, что далее 10-й ноды функция заглянуть не сможет.)
   Так как подсказки, аннотации и разворачивание текстов, написанных не в слоях, обычно происходит с участием соседних нод, этой функции в большинстве случаев достаточно.

Автор: Alix36 21.1.2007, 20:40

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

Код


while($d=mysql_fetch_row($q))
{
 if($d[1]==$id)
 {
if($d[7]==1 || $d[7]==2 )
{
 ?>
 <div class=tip id=s1 style="width:220;" align="LEFT">
  <font size="2" face="a_LCDNova">Название:<b> <? echo $d[5]?></b><br>
  Описание: <? echo $d[2]?> <br>
</font>
</div>
            <tr>
            <td width="25" height="25" align="left" valign="top"> <img src="/img/item/<?php echo $d[4]; ?>" width="25" height="25">
            </td>
            <td width="150" align="left" valign="top"><b><a onmouseover=toolTip('s1',this) onmouseout=toolTipOut('s1') ><? echo $d[5]; ?></a></b></td>
              <td align="left" valign="top">
                <input type="radio" name="select" value="<? echo $d[0];?>"></td>
            <td width="1"  height="1">
            <tr>
            <?
            }
...

Автор: Alix36 22.1.2007, 20:19

нельзя никак обновить див?

Автор: 12345c 22.1.2007, 21:58

id надо делать разными
>> <div class=tip id=s1 style="width:220;" align="LEFT">

Автор: Alix36 22.1.2007, 22:00

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

Автор: Alix36 23.1.2007, 19:32

сделал средствами php спасибо за помощь

Автор: Alix36 29.1.2007, 21:50

А можно чтобы появляющийся слой отображался в другом фрейме?