Thursday, 25 September 2014

on mousehover div appear using javascript

******************************** js ******************************
<script>
 function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");

// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + 18;
hp.style.left = hoveritem.offsetLeft +70000;
hp.style.right = hoveritem.offsetRight +70;
hp.style.bottom = hoveritem.offsetBottom +70;

// Set popup to visible
hp.style.visibility = "Visible";
}

function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
  </script>

*****************************   html  *****************************
<a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">Hover over me!</a>


<div id="hoverpopup" style="visibility:hidden; position:absolute; top:50px; left:300px; ">
<table bgcolor="#0000FF" style="width:500px; height:500px; margin-left:100px;">
<tr><td><font color="#FFFFFF">This is my popup</font></td></tr>
<tr><td bgcolor="#8888FF" >Hello I am a popup table</td></tr></table></div>

1 comment: