Show the Tip box in html using Javascript 



<script type = "text/javascript">

var TipBoxID = "TipBox";
var tip_box_id;

function findPosX(obj)
{
var curleft = 0;
if(obj.offsetParent)
while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
}

function findPosY(obj)
{
var curtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
return curtop;
}

function DisplayTip(me,offX,offY,content) {
var tipO = me;
tip_box_id = document.getElementById(TipBoxID);
var x = findPosX(me);
var y = findPosY(me);
tip_box_id.style.left = String(parseInt(x + offX) + 'px');
tip_box_id.style.top = String(parseInt(y + offY) + 'px');
tip_box_id.innerHTML = content;
tip_box_id.style.display = "block";
tipO.onmouseout = HideTip;
} // function DisplayTip()

function HideTip() { tip_box_id.style.display = "none"; }
</script>

<div
id="TipBox"
style="
display:none;
position:absolute;
font-size:12px;
font-weight:bold;
font-family:verdana;
border:#72B0E6 solid 1px;
padding:15px;
color:#1A80DB;
background-color:#FFFFFF;">
</div>

<p style="margin-top:12;">

</p>

**********************

<form>
<div style="height:100px;"></div>
<span onmouseover="DisplayTip(this,25,-50,'Welcome to S2k Designs')"><a href="#">Tip Box</a></span>

</form>



[ add comment ] ( 2 views )   |  permalink  |   ( 2.9 / 34 )

<<First <Back | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next> Last>>