<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/)