DHTML mouseOver Event ????

L

liunx

Guest
I'm trying to do a DHTML mouseOver event so that a submenu opens to the right side of the main vertical menu....similar to the won used here users.tm.net/gburghardt/home/ .......but I'm pretty sure that I have the script code all wrong could someone please tell me what I'm doing wrong?<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" lang="en"/><br />
<meta http-equiv="refresh" content="#1" /><br />
<title>NoneOfYourBizness.Com</title><br />
<script language="JavaScript" type="text/javascript"><br />
<!--<br />
function incoming(event){<br />
evt = (evt) ? evt:((window.event) ? event:null);<br />
if (evt) {<br />
var from = (evt.relatedTarget) ? evt.relatedTarget :<br />
((evt.toElement) ? evt.fromElement : null);<br />
if (from) { <br />
// work with adjacent "from"element<br />
}<br />
}<br />
}<br />
function hidemenu(xboxsubmenu) {<br />
evt = (evt) ? evt:((window.event) ? event:null);<br />
if (evt) {<br />
var from = (evt.relatedTarget) ? evt.relatedTarget :<br />
((evt.toElement) ? evt.toElement : null);<br />
if (to) { <br />
// work with adjacent "to"element<br />
}<br />
}<br />
}<br />
//--><br />
</script><br />
<br />
<br />
</head><br />
<br />
<body bgcolor="#c0c0c0" link="#ffffff" alink="#ffffff" vlink="#ffffff"><br />
<br />
<div style="color: #c0c0c0; background-color: #000080;"><br />
<center><h1><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://noneofyourbizness.com/index.html"><br />
<address title="Company Logo"> NoneOfYourBizness.Com </address></a></h1></center><br />
<br />
<center><strong><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://noneofyourbizness.com/index.html"> Home</a> |<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://noneofyourbizness.com/abtus.html"> About Us</a> |<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://noneofyourbizness.com/Ship.html"> Shipping Information</a> |<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://noneofyourbizness.com/cart.html"> Shopping Cart</a> |<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]"> Contact Us</a><br />
</strong></center></div><br />
<p><br><br><br><br />
<br />
<div class="menulevel1" id="xbox"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="mainmenu" id="xboxlink" <br />
onmouseover="showmenu('xboxsubmenu')" onmouseout="hidemenu('xboxsubmenu')"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"C:\NoneOfYourBizness.Com\Graphics\xboxpic.gif" border="0" alt=""></a></div><br />
<div class="level2box" id="xboxsubmenu" onmouseover="keepmenu()" <br />
onmouseout="hidemenu('xboxsubmenu')"></div><br />
<div class="menu2box"><a class="menu2" id="xboxsubmenu01" title="http://noneofyourbizness.com/xboxg.html" <br />
href=http://www.webdeveloper.com/forum/archive/index.php/"http://noneofyourbizness.com/xboxg.html">Graphics</a></div><br />
<div class="menu2box"><a class="menu2" id="xboxsubmenu02" title="http://noneofyourbizness.com/xboxnewrelease.html"<br />
href=http://www.webdeveloper.com/forum/archive/index.php/"http://noneofyourbizness.com/xboxnewrelease.html">New Releases</a></div><br />
<div class="menu2box"><a class="menu2" id="xboxsubmenu03" title="http://noneofyourbizness.com/xboxspecials.html"<br />
href=http://www.webdeveloper.com/forum/archive/index.php/"http://noneofyourbizness.com/xboxspecials.html">Specials</a></div><br />
<br />
<div class="menulevel1" id="ps2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="mainmenu" id="ps2link" <br />
onmouseover="showmenu('ps2submenu')" onmouseout="hidemenu('ps2submenu')"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"C:\NoneOfYourBizness.Com\Graphics\ps2pic.gif" border="0" alt=""></a></div><br />
<div class="level2box" id="ps2submenu" onmouseover="keepmenu()" <br />
onmouseout="hidemenu('ps2submenu')"></div><br />
<div class="menu2box"><a class="menu2" id="ps2submenu01" title="http://noneofyourbizness.com/ps2g.html" <br />
href=http://www.webdeveloper.com/forum/archive/index.php/"http://noneofyourbizness.com/ps2g.html">Graphics</a></div><br />
<div class="menu2box"><a class="menu2" id="ps2submenu02" title="http://noneofyourbizness.com/ps2newrelease.html"<br />
href=http://www.webdeveloper.com/forum/archive/index.php/"http://noneofyourbizness.com/ps2newrelease.html">New Releases</a></div><br />
<div class="menu2box"><a class="menu2" id="ps2submenu03" title="http://noneofyourbizness.com/ps2specials.html"<br />
href=http://www.webdeveloper.com/forum/archive/index.php/"http://noneofyourbizness.com/ps2specials.html">Specials</a></div><br />
<br />
<div class="menulevel1" id="gcube"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="mainMenu" id="gcubeLink" <br />
onmouseover="showMenu('gcubeSubMenu')" onmouseout="hidemenu('gcubeSubMenu')"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"C:\NoneOfYourBizness.Com\Graphics\gcpic1.gif" height="90" width="110" border="0" alt=""><br />
</a><div class="level2Box" id="gcubeSubMenu" onmouseover="keepmenu()" <br />
onmouseout="hideMenu('gcubeSubMenu')"><br />
<div class="menu2Box"><a class="menu2" id="gcubeSubMenu01" title="http://noneofyourbizness.com/gcubeg.html" <br />
href=http://www.webdeveloper.com/forum/archive/index.php/"http://noneofyourbizness.com/gcubeg.html">Graphics</a></div><br />
<div class="menu2Box"><a class="menu2" id="gcubeSubMenu02" title="http://noneofyourbizness.com/gcubenewrelease.html"<br />
href=http://www.webdeveloper.com/forum/archive/index.php/"http://noneofyourbizness.com/gcubenewrelease.html">New Releases</a></div><br />
<div class="menu2Box"><a class="menu2" id="gcubeSubMenu03" title="http://noneofyourbizness.com/gcubespecials.html"<br />
href=http://www.webdeveloper.com/forum/archive/index.php/"http://noneofyourbizness.com/gcubespecials.html">Specials</a></div><br />
<br />
<br />
</body><br />
</html><!--content-->use something more like this maybe<br />
<script type="text/javascript"><br />
function showmenu(elmnt)<br />
{<br />
document.getElementById(elmnt).style.visibility = "visible";<br />
}<br />
function hidemenu(elmnt)<br />
{<br />
document.getElementById(elmnt).style.visibility = "hidden";<br />
}<br />
</script><!--content-->Or even better, do it with pure CSS!! DHTML needs JavaScript and 13% of all browsers cannot read JS or have it blocked.<br />
<br />
Check out how to do it on <!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/edge/popups/demo.html">http://www.meyerweb.com/eric/css/edge/popups/demo.html</a><!-- m -->. />
<br />
Cheers, Jochem :cool:<!--content-->the problem is a much larger % of the internet will not support the pure css because more of the internet is on internet explorer :rolleyes: . It does not like to support hover unless its a link.<!--content-->I tried this script<br />
<br />
<script type="text/javascript"> <br />
function showmenu(elmnt) <br />
{ <br />
document.getElementById(elmnt).style.visibility = "visible"; <br />
} <br />
function hidemenu(elmnt) <br />
{ <br />
document.getElementById(elmnt).style.visibility = "hidden"; <br />
} <br />
</script><br />
<br />
but didn't help........anymore suggestions anyone PLEASE!!<!--content-->you have to modify the html too to fit that script, you cannot just copy and paste. When I said make it look like that i meant the visibility stuff, the<br />
document.getElementById(elmnt).style.visibility = "visible"; <br />
type of stuff, apply it to what you have now.<!--content-->
 
You must log in or register to reply here.
Back
Top