TIPS OF WEB: грузим без динамы, динамим, чтобы не грузить!

Sevranty

Спецвыпуск Xakep, номер #028, стр. 028-114-3

<script>

<!--

dom = (document.getElementById) ? true : false;

nn4 = (document.layers) ? true : false;

ie = (document.all) ? true : false;

ie4 = ie && !dom;

function empty(){}

if(nn4) document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = stdMouseMove;

var stdMouseX = -1, stdMouseY = -1;

var MouseMoved = 0;

var hint="";

var MouseMove = empty;

var Init = empty;

function stdMouseMove(e)

{

stdMouseX = (nn4) ? (e.pageX):(event.x + document.body.scrollLeft);

stdMouseY = (nn4) ? (e.pageY):(event.y + document.body.scrollTop);

MouseMoved++;

MouseMove(e);

HintMouseMove();

}

function HintMouseMove()

{

if(hint)moveElem(hint, stdMouseX+10, stdMouseY+10);

}

function showElem(elemId) {

if (dom) document.getElementById(elemId).style.visibility = "visible";

else if (ie4) document.all[elemId].style.visibility = "visible";

else if (nn4) document.layers[elemId].visibility = "show";

}

function hideElem(elemId) {

if (dom) document.getElementById(elemId).style.visibility = "hidden";

else if (ie4) document.all[elemId].style.visibility = "hidden";

else if (nn4) document.layers[elemId].visibility = "hide";

}

function moveElem(idname,x,y)

{

if (dom)

with(eval(idname)){

style.left = x;

style.top = y;

}

else if(nn4){

document.layers[idname].left=x;

document.layers[idname].top=y;

}

}

function OverIm(id)

{

if(hint)hideElem(hint);

hint=id;

moveElem(hint, stdMouseX+10, stdMouseY+10);

showElem(hint);

}

function OutIm()

{

hideElem(hint);

hint="";

}

//-->

</script>

Коротко опишу то, что накатано выше. Вначале детектим браузер и описывает вариейбалсы (хе-хе! переменные :)). Потом набиваем несколько функций: отлов мышки, расчет местоположения подсказки, вывод элементов, отключение элементов, перемещение элементов, запуск необходимых функций при наведении и выключение при уходе мышки. При наличии аналитического ума и фантазии последние 2 функции можно расширить еще большим количеством элементов.

Теперь на картинку или ссылку (можно и на другое место привесить) вешаем вызов наших функций. На onmouseover запуск с id нашего div'а в параметре и onmouseout выключение показа, соответственно:

<a href="#" onmouseover="OverIm('hint1');" onmouseout="OutIm()"><img src="/xakep/a-002/img1_small.gif" width="60" height="60" border="0" alt=""></a>

После того как мы привесили всю эту фигню, осталось написать див с соответствующим контентом. Я от перегрева сварганил такое непотребство:

<div id="hint1" style="position: absolute; visibility: hidden; width: 160px; top: 0px; left: 0%;">

<table cellpadding="1" cellspacing="0" border="0" width="100%" bgcolor="#999999"><tr><td width="100%">

<table cellpadding="3" cellspacing="0" border="0" width="100%" bgcolor="#ffffff"><tr bgcolor="#ffffff">

<td><img src="/xakep/a-002/help.gif" width="30" height="30" alt="" border="0"></td>

<td> </td>

<td width="100%">

<b>Аналог всплывающей подсказки</b>