user experience design and consulting
404.520.0003
info@clickstart.net

Opening mouseover help

This demo displays content in a hidden DIV when the user moves the mouse over a link.

The content that appears could contain anything, including formatted text, images, and links. The mouse over area does not have to be formatted as a link--it could be "normal text" or an image.

How to see the demo

Move your mouse here

Code

<script>
function showHelp(helpid) {
document.getElementById(helpid).style.visibility = "visible";
}


function hideHelp(helpid) {
document.getElementById(helpid).style.visibility = "hidden";
}
</script>

<a href="#" onMouseOver="showHelp('fieldhelp')" onMouseOut="hideHelp('fieldhelp')">Move your mouse here</a>

How it works

This script uses the onMouseOver and onMouseOut events to show and hide a hidden DIV (the help content). Multiple links can use the same scripts because the ID of the hidden DIV (in this example, "fieldhelp") is sent to the scripts as a variable.

Browser compatibility

This script should work in any browser.

Questions?

Just send us an email.