In-Place Help : Style « HTML « JavaScript DHTML






  1. JavaScript DHTML
  2. HTML
  3. Style

In-Place Help

 


<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>








Related examples in the same category

1.Style cssText
2.Style type Example
3.Show and hide the div tags