Div content displayed with Javascript
I use this script for easy menus:
the script has the following functions with vaiables:
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
later I have
onClick="showmenu('help')" onMouseOut="hidemenu('help')
the 'help' appears and disappears. ---cool.
What I want to change should be simple but I don't know how to get the syntax
like onClick="showmenu('help'),hidemenu('about)" but it does not work.
I want more than one event with "onclick" because I have multiple <divs> with content positioned on the page and I want one <div> to stay visible and
remain visible until the others are clicked.
Can I do it?
Instead of a navbar with menus It should in theory place content and it works
as it is:
<html>
<head>
<style>
body{font-family:arial;}
p{color:black;text-decoration:underline;font:bold}
p:hover{color:#606060}
#about1{
font-size:100%;
position:absolute;
left:200px;
top: 20px;
color:black;
background:#7ac7f3;
z-index:10;
visibility: hidden;
}
#contact2{
font-size:100%;
position:absolute;
left:200px;
top: 300px;
color:black;
background:#7ac7f3;
z-index:12;
visibility: hidden;
}
#account3{
font-size:100%;
position:absolute;
left:200px;
top: 400px;
color:black;
background:#7ac7f3;
z-index:14;
visibility: hidden;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>
</head>
<body>
<div id="about1">this will contain information about the company</div>
<div id="contact2">this will contain support information and contact information</div>
<div id="account3">this is an intro to how account management works</div>
<table width="298" border="0
">
<tr>
<td width="60"><p onClick="showmenu('about1')" OnMouseout="hidemenu('about1')"> About</p></td>
<td width="110"><p onClick="showmenu('contact2')" OnMouseout="hidemenu('contact2')"> Contact Us</p></td>
<td width="106"><p onClick="showmenu('account3')" OnMouseout="hidemenu('account3')" > My Account</p></td>
</tr>
</table>
</body>
</html>
CSS Codes
Reply With Quote
Thanks for the easy fix
Bookmarks