February 4, 2005

Simple non-bloated pop-up div info box for text links

Style Sheet Code:


<style>
.HoverNote
{
BORDER-RIGHT: black thin solid;
BORDER-TOP: black thin solid;
FONT-SIZE: 10px;
VISIBILITY: hidden;
BORDER-LEFT: black thin solid;
COLOR: #333333;
BORDER-BOTTOM: black thin solid;
POSITION: absolute;
BACKGROUND-COLOR: #fcfcfc
}
</style>


Javascript Functions:


<script>
function Show(notes)
{
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop + 15;
Popup.style.visibility="visible";
Popup.style.left = x;
Popup.style.top = y;
Popup.innerHTML = notes;
}
function Hide()
{
Popup.style.visibility="hidden";
}
</script>


Default Div:


<div id="Popup" class="HoverNote" style="padding: 6px; "></div>


Link Code To Display Text In Box:


<a href="#" onmouseover="Show(this.notes);" onmouseout="Hide();" notes="Text to display in box">Link Text </a>

1 comment:

Anonymous said...

This is too simple. But really great!

Ragards,
Han