Всплывающая подсказка (альтернатива title)
<script>
function getBrowserWidth()
{
var x = 0;
if (self.innerHeight)
{
x = self.innerWidth;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
x = document.documentElement.clientWidth;
}
else if (document.body)
{
x = document.body.clientWidth;
}
return x;
}
//Наведем на объект
function disShow(what)
{
//Позиция появляющегося элемента
posX = $(what).offsetLeft;
posY = $(what).offsetTop;
bWidth = getBrowserWidth();
//Если уходит за край экрана - уменьшаем
if(posX + 200 >= bWidth + 20)
posX = $(what).offsetLeft-140;
//Стилизуем всплывающий элемент
$(help).style.left = posX + 20 + 'px';
$(help).style.top = posY + 40 + 'px';
$(help).style.display = 'block';
//Наполняем содержанием подсказку
$(help).innerHTML = $(what).getAttribute("dis");
$(help).setAttribute("what",what.id);
//Выделяем первоначальный объект на котором лежит подсказка
$(what).innerHTML = $(what).getAttribute("dis");
}
//потеря побъектом курсора
function disHide(what)
{
//Прячим подсказку
$(help).style.display = 'none';
//оставляем подсказке ид объекта на случай, если мы наведем мышкой на подсказу
$(help).setAttribute('what',what.id);
//Снимаем выделение первоначального объекта с подсказкой
$(what).innerHTML = '';
}
//Наведем на подсказку
function disOn()
{
//Получаем имя прежнего объекта
what = $(help).getAttribute("what");
//Так как мы не убрали курсор с обекта, а перевели его на подсказку то возобновляем выделение объекта
$(what).innerHTML = $(help).innerHTML;
//Показываем подсказку
$(help).style.display = 'block';
}
//Потеря подсказкой курсора
function disOff()
{
//Получаем имя прежнего объекта
what = $(help).getAttribute("what");
//Прячим подсказку
$(help).style.display = 'none';
//Снимаем выделение первоначального объекта с подсказкой
$(what).innerHTML = '';
}
function $( el )
{
return typeof el == 'string' ? document.getElementById(el) : el;
}
</script>
<style>
body {padding:0px;margin:0px;}
.item {width:100px;height:50px;background:green;border:2px solid black;}
#help {display:none;background:grey;border:2px solid black;width:200px;position:absolute;}
</style>
<body>
<div class="item" dis="body" id="div1" onMouseOver="disShow(this);" onMouseOut="disHide(this);"></div>
<div style="position:absolute;right:0px;" class="item" dis="skirt" id="div2" onMouseOver="disShow(this);" onMouseOut="disHide(this);"></div>
<div id="help" onMouseOver="disOn();" onMouseOut="disOff();"></div>
</body>
можно ли и нужно ли оптимизировать? думаю, что нужно.. Спасибо за понимание. пс. нет ли у кого нить рабочего example этого скрипта (http://www.noinimod.ru/52/) |
Нужно сделать так, чтобы при перемещении мышки над объектом подсказка тоже двигалась за курсором.
+ я бы сделал сохранение текущего титла не в атрибут, а в переменную-буфер. |
по поводу переменной буфер. это просто var прописать, тогда она будет и вне функции, как я понял.
а с перемещением я думаю будут траблы, тк она скакать будет когда на саму подсказку наводишь \ сводишь с нее мышку.. |
С перемещением никаких трабл не возникает, просто меняйте left/top у элемента при mousemove элемента, на которого наведена мышь. У меня например это реализовано так:
this.onmousemove = function (ev) {
ev = ev || window.event;
_hint = document.getElementById('hint');
_hint.style.top = ev.pageY + 10;
_hint.style.left = ev.pageX + 10;
}
|
<script>
var theWidth, theHeight;
// Window dimensions:
if (window.innerWidth)
{
theWidth=window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
theWidth=document.documentElement.clientWidth;
}
else if (document.body)
{
theWidth=document.body.clientWidth;
}
if (window.innerHeight)
{
theHeight=window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
theHeight=document.documentElement.clientHeight;
}
else if (document.body)
{
theHeight=document.body.clientHeight;
}
//Наведем на объект
function disShow(what,ev)
{
ev = ev || window.event;
//Наполняем содержанием подсказку
$(help).innerHTML = $(what).getAttribute("dis");
//Позиция появляющегося элемента
posX = ev.clientX;
posY = ev.clientY;
//украшаем размеры окна ШИРИНА
if(posX + 200 > theWidth)
$(help).style.right = 10 + 'px';
else
$(help).style.left = posX - 20 + 'px';
if(posX - 20 < 10)
$(help).style.left = 10 + 'px';
//Стилизуем всплывающий элемент
$(help).style.display = 'block';
$(help).style.top = posY +20 + 'px';
//Наполняем содержанием подсказку
$(help).innerHTML = $(what).getAttribute("dis");
//Выделяем первоначальный объект на котором лежит подсказка
$(what).style.border = '2px solid red';
}
//потеря побъектом курсора
function disHide(what)
{
//Прячим подсказку
$(help).style.display = 'none';
//Снимаем выделение первоначального объекта с подсказкой
$(what).style.border = '2px solid black';
$(help).style.removeProperty('left');
$(help).style.removeProperty('right');
$(help).style.removeProperty('top');
$(help).style.removeProperty('bottom');
}
function $( el )
{
return typeof el == 'string' ? document.getElementById(el) : el;
}
</script>
<style>
body {padding:0px;margin:0px;}
.item {width:100px;height:50px;background:green;border:2px solid black;padding:5px;}
#help {display:none;background:grey;border:2px solid black;width:200px;position:absolute;padding:2px;}
</style>
<body>
<div class="item" dis="FullPlate Armor" id="div1" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item1</div>
<div style="position:absolute;right:0px;" class="item" dis="Fallen Sword" id="div2" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item2</div>
<div class="item" dis="FullPlate Armor" id="div1" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item1</div>
<div style="position:absolute;right:0px;" class="item" dis="Fallen Sword" id="div2" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item2</div>
<div class="item" dis="FullPlate Armor" id="div1" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item1</div>
<div style="position:absolute;right:0px;" class="item" dis="Fallen Sword" id="div2" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item2</div>
<div id="help" ></div>
</body>
доработан. актуальный вопрос про исходники , образцы (http://www.noinimod.ru/52/) - я так и не смог заставить работать =\ |
чтото здесь туго с style.top если подсказка создает вертикальный скролл.
я убрал странный сложный if про высоту и все вроде как то заработало. но меня смущает то, что после resize окна, у меня в скрипте переменные theWidth и theHeight не меняюцца. |
ап
|
| Часовой пояс GMT +3, время: 17:12. |