Javascript:: HTML Hover Popup

<script type="text/javascript">
function ShowPopup(hoveritem, idObject)
{
hp = document.getElementById(idObject);

// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + 250;
hp.style.left = hoveritem.offsetLeft + 350;

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

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

<div id="idTest" style="visibility:hidden; position:absolute; top:0; left:0;"><table bgcolor="silver">
<tr><td><font color="black"><b>Title</b></font></td></tr>
<tr><td bgcolor="#FFFFCC">* Item 1</td></tr>
<tr><td bgcolor="#FFFFCC">* Item 2</td></tr>
<tr><td bgcolor="#FFFFCC">* Item 3</td></tr>
</table>
</div>

<div id=”hover” onmouseover="ShowPopup(this,’idTest’)" onmouseout="HidePopup(‘idTest’)">Hover Here!</div>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s