.visualtip
{
display: block;
padding: 10px;
background: #F2F4B2;
border: dashed 1px #ddd;
position: absolute;
letter-spacing: 1.4px;
font-family: Arial;
position: absolute;
width: 300px;
left: -290px;
top: 80px;
}
.v2
{
top: 290px;
}
.visualtip input
{
border: solid 1px #ccc;
font-size: 18px;
color: #444;
letter-spacing: 1.2px;
text-align: center;
}
function $(elementid)
{
return document.getElementById(elementid);
}
function bind(toObject, methodName){
return function(e){toObject[methodName](e)}
}
function listen(obj, evt, fn)
{
if (obj.addEventListener)
obj.addEventListener(evt,fn,false);
else if (obj.attachEvent)
obj.attachEvent('on' + evt,fn);
}
function AddSideWidget(fieldid)
{
this.field = $(fieldid);
this.field.setAttribute("maxleft", this.field.offsetLeft);
listen(this.field, "mouseover", bind(this, "h_mousemove"));
listen(this.field, "mouseout", bind(this, "h_mouseout"));
this.h_mousemove = function()
{
if (this.field.getAttribute("isvisible") == null || this.field.getAttribute("isvisible") == "false")
{
var interval = false;
var _field = this.field;
_field.style.left = parseInt(_field.offsetLeft) + "px";
var t_func = function()
{
if (parseInt(_field.style.left) <= 0)
{
_field.style.left = (parseInt(_field.style.left)+8) + "px";
}
else
{
clearInterval(interval);
_field.style.left = "0px";
_field.setAttribute("isvisible", "true");
}
}
interval = setInterval(t_func, 10);
}
}
this.h_mouseout = function(e)
{
var canout = true;
try
{
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') canout = false;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg= reltg.parentNode
if (reltg== tg) canout = false;
}
catch (excp)
{
}
if (canout && this.field.getAttribute("isvisible") == "true")
{
var interval = false;
var _field = this.field;
_field.style.left = parseInt(_field.offsetLeft) + "px";
var t_func = function()
{
if (parseInt(_field.style.left) >= parseInt(_field.getAttribute("maxleft")))
{
_field.style.left = (parseInt(_field.style.left)-8) + "px";
}
else
{
clearInterval(interval);
_field.style.left = parseInt(_field.getAttribute("maxleft")) + "px";
_field.setAttribute("isvisible", "false");
}
}
interval = setInterval(t_func, 10);
}
}
}
//Пример использования
new AddSideWidget("loginbox");
new AddSideWidget("drownbox");