<html>
<head>
<title>In-Place Help</title>
<style type="text/css">
.help { position: absolute;
left: 300px;
top: 20px;
visibility: hidden;
width: 100px;
padding: 10px;
border: 1px solid #f00;
}
form a:hover {cursor : help
</style>
<script type="text/javascript">
var item = null;
function showHelp(newItem) {
if (item) {
item.style.visibility='hidden';
}
item = document.getElementById(newItem);
item.style.visibility='visible';
}
</script>
</head>
<body>
<form>
<a href="javascript:showHelp('item1')" alt="get help">click me to read help</a><BR>
<a href="javascript:showHelp('item2')" alt="get help">click me to read help</a>
</form>
<div id="item1" class="help">help for the first item.</div>
<div id="item2" class="help">help for the second item.</div>
</body>
</html>
|