niche Posted July 6, 2010 Share Posted July 6, 2010 I don't understand this part of the javascript found at:http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu10Please insert a few comments that might help me understand how this part of the script works(ie I don't see how this part of the script triggers so much) : <script type="text/javascript">function showmenu(elmnt){document.getElementById(elmnt).style.visibility="visible";}function hidemenu(elmnt){document.getElementById(elmnt).style.visibility="hidden";}</script> Here's the complete script: <html><head><style>body{font-family:arial;}table{font-size:80%;background:black}a{color:black;text-decoration:none;font:bold}a:hover{color:#606060}td.menu{background:lightblue}table.menu{font-size:100%;position:absolute;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><h3>Drop down menu</h3><table width="100%"> <tr bgcolor="#FF8080"> <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')"> <a href="/default.asp">Tutorials</a><br /> <table class="menu" id="tutorials" width="120"> <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr> <tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr> </table> </td> <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')"> <a href="/default.asp">Scripting</a><br /> <table class="menu" id="scripting" width="120"> <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr> <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr> <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr> <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr> <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr> </table> </td> <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')"> <a href="/site/site_validate.asp">Validation</a><br /> <table class="menu" id="validation" width="120"> <tr><td class="menu"><a href="/site/site_validate.asp">Validate HTML</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">Validate XHTML</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">Validate CSS</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">Validate XML</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">Validate WML</a></td></tr> </table> </td> </tr></table><p>Mouse over these options to see the drop down menus</p></body></html> Link to comment Share on other sites More sharing options...
niche Posted July 6, 2010 Author Share Posted July 6, 2010 I've been looking at this some more and I don't understand how (elmnt) was determined and how .style.visibility="visible"; and .style.visibility="hidden"; was determined. Link to comment Share on other sites More sharing options...
niche Posted July 6, 2010 Author Share Posted July 6, 2010 I think I got on the path finally. I think I'm finding the answer in the DHTML section not the javascript. Please let me know if I'm wrong. Otherwise, I'll be studying DHTML. Link to comment Share on other sites More sharing options...
niche Posted July 6, 2010 Author Share Posted July 6, 2010 I think I got on the path finally. I think I'm finding the answer in the DHTML section not the javascript. Please let me know if I'm wrong. Otherwise, I'll be studying DHTML. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 6, 2010 Share Posted July 6, 2010 elmnt is the id ref sent to the function, on mouseover and mouseout<script type="text/javascript">function showmenu(elmnt){document.getElementById(elmnt).style.visibility="visible";}function hidemenu(elmnt){document.getElementById(elmnt).style.visibility="hidden";}</script>example <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')"> will target element with id ref id="tutorials"it is doing exactly as if it was written as document.getElementById("tutorials").style.visibility="visible";document.getElementById("tutorials").style.visibility="hidden";so on hover over (onmouseover) it show the table element below and its contents within that table, on onmouseout the table is now hidden.<table class="menu" id="tutorials" width="120"> .......</table> Link to comment Share on other sites More sharing options...
Synook Posted July 6, 2010 Share Posted July 6, 2010 Note that "DHTML" is simply the use of JavaScript to modify the appearance of a web page. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.