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

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

Форум программистов > JavaScript: Общие вопросы > Как задать стили "подсказке"?

Автор: Mr_Bulkin 15.3.2005, 07:11

у меня есть alt="123" или (title) и я хочу украсить её сделать в красивой рамке как ме это сделать?

Автор: Aliance 15.3.2005, 16:21

Можно так, но это уже не alt будет:

Код


document.getElementById("block").style.display = 'none';

function show(text, evt) {
evt = (evt) ? evt : event;
    if (evt) {

var elem = document.getElementById("block");
  elem.innerHTML = text;
  elem.style.display = 'block';
  elem.style.position = 'absolute';

  var coords = getEventCoords(evt);
  elem.style.left = coords.left;
  elem.style.top = coords.top;

    }
}

function getEventCoords(evt) {
    var coords = {left:0, top:0};
    if (evt.pageX) {
        coords.left = evt.pageX;
        coords.top = evt.pageY;
    } else if (evt.clientX) {
        coords.left = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
        coords.top = evt.clientY + document.body.scrollTop - document.body.clientTop;
        if (document.body.parentElement && document.body.parentElement.clientLeft) {
            var bodParent = document.body.parentElement;
            coords.left += bodParent.scrollLeft - bodParent.clientLeft;
            coords.top += bodParent.scrollTop - bodParent.clientTop;
        }
    }
    return coords;

}
function hide() {
 var elem = document.getElementById("block").style;
 elem.display = 'none';
}

Код


<div id="block" style="display: none; border: 1px black solid; margin: 12px; padding: 2px; background-color: lightyellow"></div>

<span onmousemove="show('Тут твой текст с любыми тегами...', event);" onmouseout="hide();">ПОДВЕДИТЕ МЫШЬ</span>

Добавлено @ 16:23
2 Mr_Bulkin:
И еще, желательно не писать посты крупным размеров, от этого ничего не изменится smile

А так же, советую Вам зарегистрироваться, это даст Вам множество возможностей :-)

Автор: Sardar 16.3.2005, 01:11

Когда то писал универсальный код: http://forum.vingrad.ru/index.php?showtopic=32471

М	Mr_Bulkin, меньше эмоций, больше смысла в ваши вопросы;-)

Автор: raver 19.3.2005, 18:47

Когда-то я скачал довольно интересный скрипт, думаю тебе может пригодиться

Код



if (!document.layers&&!document.all)

event="test"

function showtip2(current,e,text){



if (document.all&&document.readyState=="complete"){

document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'

document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10

document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10

document.all.tooltip2.style.visibility="visible"

}



else if (document.layers){

document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')

document.tooltip2.document.nstip.document.close()

document.tooltip2.document.nstip.left=0

currentscroll=setInterval("scrolltip()",100)

document.tooltip2.left=e.pageX+10

document.tooltip2.top=e.pageY+10

document.tooltip2.visibility="show"

}

}

function hidetip2(){

if (document.all)

document.all.tooltip2.style.visibility="hidden"

else if (document.layers){

clearInterval(currentscroll)

document.tooltip2.visibility="hidden"

}

}



function scrolltip(){

if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)

document.tooltip2.document.nstip.left-=5

else

document.tooltip2.document.nstip.left=150

}

А это в бодях

Код

<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:lightyellow">
<layer name="nstip" width=1000px bgColor="lightyellow"></layer>
</div>

И это там где ссылки(или рисунки)

Код

<A HREF="../../..//_default.htm" onMouseover="showtip2(this,event,'Твой комментарий')" onMouseout="hidetip2()">Подведи курсор</A>

Юзай!..

Автор: Aliance 19.3.2005, 19:29

raver
Сколько лет этому скрипту?! smile

Древние, уже не использующиеся document.all и document.layers...
Кроме того, там ошибка...

Автор: raver 20.3.2005, 12:46

Aliance

Цитата(Aliance @ 19.3.2005, 19:29)

Сколько лет этому скрипту?!
Древние, уже не использующиеся document.all и document.layers...
Кроме того, там ошибка...

У меня все пашет ...

Автор: Ni@m 21.3.2005, 12:33

Пожалуйста =)

Код


var toolTipSTYLE="";

function initToolTips()
{
    var body = document.getElementsByTagName('body');
    toolTipSTYLE = document.createElement("div");
    toolTipSTYLE.setAttribute("id", "niamas-tooltip");
    toolTipSTYLE.appendChild(document.createTextNode('tooltip'));
    body[0].appendChild(toolTipSTYLE);
       
    toolTipSTYLE.style.display = "none";
    toolTipSTYLE.style.position = "absolute";
    document.onmousemove = moveToMouseLoc;
}

function createEl(elems,msgV)
{
    var el;
    ///creating element
    el = document.createElement(elems[0]);
    
    if (elems[1] && (typeof(elems[1][0]) == 'object'))///if more then one element //Array(Array('span','hello'),Array('div','world'))
    {
        var retIE;
        for (var j=0;j<elems[1].length;j++)
        {
            retIE = createEl(elems[1][j],msgV);
            el.appendChild(retIE);
        }    
    }
    else///if one element // Array('div','hello world')
    {
        if (typeof(elems[1]) == 'object')
        {
            retIE = createEl(elems[1],msgV);
            el.appendChild(retIE);    
            
        }
        else
        {            
            if (msgV)
            {
                var k = elems[1].match(/%\d%/g).length+1;
                for (var i=1;i<k;i++)
                {
                    re = new RegExp('%' + i + '%','g');
                    if (msgV[i-1] == undefined)
                        elems[1] = elems[1].replace(re,'');
                    else
                        elems[1]= elems[1].replace(re,msgV[i-1]);
                    delete re;
                }
            }
            el.appendChild(document.createTextNode(elems[1]));            
        }
    }
    if (elems[2])
    {
        if (typeof(elems[2]) == 'object')
        {
            if (typeof(elems[2][0]) == 'object')
            {
                for (var i=0;i<elems[2].length;i++)
                    el.setAttribute(elems[2][i][0],elems[2][i][1]);
            }
            else
                el.setAttribute(elems[2][0],elems[2][1])
        }
        else 
        {
            if (elems[2].length > 0)
                el.setAttributeNode(elems[2]);
        }
    }
    return el;
}

function toolTip(msgN,msgV)
{
  if(toolTip.arguments.length < 1) // hide
    toolTipSTYLE.style.display = "none";
  else // show
  {
    toolTipSTYLE.replaceChild(createEl(msgN,msgV),toolTipSTYLE.firstChild);    
   toolTipSTYLE.style.display='block';
  }
}
function moveToMouseLoc(e)
{
    if (document.all)
    {    
       toolTipSTYLE.style.left =  document.documentElement.scrollLeft + event.x + 15 + 'px';
       toolTipSTYLE.style.top =  document.documentElement.scrollTop + event.y + 15 + 'px';
    }
    else
    {
         toolTipSTYLE.style.left = e.pageX + 15 + 'px';
        toolTipSTYLE.style.top = e.pageY + 15 + 'px';
    }
  return true;
}

использование :
к примеру таблица :

Код


<body onload=" initToolTips()">
 <div onmouseover="toolTip(Array("table",Array(Array("tr",Array("td","текст",Array("id","table"))),Array("tr",Array("td","текст1",Array("class","table")))),Array("position","absolute")))">
</div>
</body>

Добавлено @ 12:36
Элементы создаются на ходу.
Все согласно ДОМу!

Автор: Aliance 21.3.2005, 12:37

Цитата(Ni @ 21.3.2005, 12:33)

Зачем такое? ИЕ 4 уже устарел, пишем в стандарте DOM, о событиях можно прочесть тут:
http://forum.vingrad.ru/index.php?showtopic=32350

Автор: Ni@m 21.3.2005, 14:11

Aliance
А ты проверь. По иному не пашет! Тестил на ие 6!

ИЕ кушает многое, но не многое певеривает!

Автор: Sardar 21.3.2005, 19:22

Ni@m убийственное насаждение левых массивов в аргументах функции не нужно, сделай красивее/естественее smile

Цитата(Aliance @ 21.3.2005, 11:37)

Зачем такое? ИЕ 4 уже устарел, пишем в стандарте DOM, о событиях можно прочесть тут:

Идея была в другом, ИЕ не имеет аттрибутов page(X|Y) дающие координаты мыши относительно страницы(body). Эти координаты надо вычислять:

Код

if (document.all) { //если это ИЕ или Опера
   x =  document.body.scrollLeft + event.clientX;
   y =  document.body.scrollTop + event.clientY;
}  else {
   x = e.pageX; //событие переданно параметром функции
   y = e.pageY;
}

Ni@m выражение document.documentElement.scrollLeft по идее будет всегда давать 0, ибо корневой элемент не может быть прокручен.

Автор: Aliance 21.3.2005, 19:31

Понятно, просто я (не имея ввиду что это неправельно, скорее говоря как я привык) сделал бы переменные, в них забыл эти значения (аля var qwe = (event.clientX) ? event.clientX : ((e.pageX) ? e.pageX : null) и работал с ней, не делая проверку браузера впоследствии :-)