f@#$#@ onmouseover

@KristienDec 09.2003

I have the frame for my site all nice and designed, with a horizontal menu on top. For example:

[code=php]<a href=”pictureindex.htm” id=”gl2″ class=”glink” onmouseover=”ehandler(event,menuitem2);”>Pictures</a>[/code]

Now I have sublinks, that I want to appear when there is a mouseover event. They look like this:

[code=php]<div id=”subglobal2″ class=”subglobalNav”> [/code]

(just an example…)

They are also horizontal and they should appear just underneath the first menu.

Okay, I found an example of how I would like it (i tried looking at the ‘source’, but I still can’t figure it out)
~~[URL=http://www.macromedia.com/]~~http://www.macromedia.com/[/URL]

It is driving me nuts… 😡
Thanks 4 helping me out!

to post a comment

JavaScript

7 Comments(s) _↴

@GollumDec 09.2003 — #Okay, I found an example of how I would like it (i tried looking at the 'source', but I still can't figure it out)[/QUOTE]
Not surprised, I don't think it was designed for easy following :p

Have a look at this example - it shows the basics of what you want without all the debris...

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 
 &lt;script type="text/javascript"&gt;
 function menu(oTD, n)
 {
 // shade Main menu
 var oTR = oTD.parentNode;
 for ( i = 0; i &lt; oTR.childNodes.length; i++ )
 oTR.childNodes[i].style.backgroundColor = "white";
 oTD.style.backgroundColor = "#e0ffe0";
 
 // show sub menu
 for ( i = 1; i &lt;= 3; i++ )
 {
 var oDiv = document.getElementById("subMenu" + i);
 oDiv.style.visibility = (i == n) ? "visible" : "hidden";
 }
 
 }
 
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;table&gt;
 &lt;tr&gt;
 &lt;td onmouseover="menu(this, 1);" style="cursor: default"&gt;Menu 1&lt;/td&gt;
 &lt;td onmouseover="menu(this, 2);" style="cursor: default"&gt;Menu 2&lt;/td&gt;
 &lt;td onmouseover="menu(this, 3);" style="cursor: default"&gt;Menu 3&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;div&gt;
 &lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;!-- filler --&gt;
 
 <i>    </i>  &lt;!-- Menu 1 --&gt;
 <i>    </i>  &lt;div id=subMenu1 style="position:absolute;visibility:hidden;"&gt;
 <i>    </i>     &lt;table&gt;
 <i>    </i>        &lt;tr&gt;
 <i>    </i>           &lt;td onclick="alert('A');" style="cursor: pointer"&gt; ===&gt; A &lt;=== &lt;/td&gt;
 <i>    </i>           &lt;td onclick="alert('B');" style="cursor: pointer"&gt; ===&gt; B &lt;=== &lt;/td&gt;
 <i>    </i>           &lt;td onclick="alert('C');" style="cursor: pointer"&gt; ===&gt; C &lt;=== &lt;/td&gt;
 <i>    </i>        &lt;/tr&gt;
 <i>    </i>     &lt;/table&gt;
 <i>    </i>  &lt;/div&gt;
 
 <i>    </i>  &lt;!-- Menu 2 --&gt;
 <i>    </i>  &lt;div id=subMenu2 style="position:absolute;visibility:hidden;"&gt;
 <i>    </i>     &lt;table&gt;
 <i>    </i>        &lt;tr&gt;
 <i>    </i>           &lt;td onclick="alert('I');" style="cursor: pointer"&gt; ===&gt; I &lt;=== &lt;/td&gt;
 <i>    </i>           &lt;td onclick="alert('II');" style="cursor: pointer"&gt; ===&gt; II &lt;=== &lt;/td&gt;
 <i>    </i>           &lt;td onclick="alert('III');" style="cursor: pointer"&gt; ===&gt; III &lt;=== &lt;/td&gt;
 <i>    </i>        &lt;/tr&gt;
 <i>    </i>     &lt;/table&gt;
 <i>    </i>  &lt;/div&gt;
 
 <i>    </i>  &lt;!-- Menu 2 --&gt;
 <i>    </i>  &lt;div id=subMenu3 style="position:absolute;visibility:hidden;"&gt;
 <i>    </i>     &lt;table&gt;
 <i>    </i>        &lt;tr&gt;
 <i>    </i>           &lt;td onclick="alert('1');" style="cursor: pointer"&gt; ===&gt; 1 &lt;=== &lt;/td&gt;
 <i>    </i>           &lt;td onclick="alert('2');" style="cursor: pointer"&gt; ===&gt; 2 &lt;=== &lt;/td&gt;
 <i>    </i>           &lt;td onclick="alert('3');" style="cursor: pointer"&gt; ===&gt; 3 &lt;=== &lt;/td&gt;
 <i>    </i>        &lt;/tr&gt;
 <i>    </i>     &lt;/table&gt;
 <i>    </i>  &lt;/div&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@KristienauthorDec 09.2003 — #I will check it out asap. Thank you very much! ?

@KristienauthorDec 09.2003 — #Damn, it still doesn't work...

I use dreamweaver mx 2004, and there is something programmed on the CSS style sheet about the visibility of the submenu and everything. I can fill in this submenu but I can't get it to be visible with 'onmouseover'. Maybe you can tell me what to pay attention to within dreamweaver (because I don't seem to get the html code right after all...)

Thnxxx!

@KristienauthorDec 10.2003 — #This is the javascript code that I can find in my css form... Please can someone help...

[code=php]
 <head>
 <script type="text/javascript"> 
 <!-- 
 var time = 3000;
 var numofitems = 7;
 //menu constructor 
 function menu(allitems,thisitem,startstate){   callname= "gl"+thisitem; 

 divname="subglobal"+thisitem; 

 this.numberofmenuitems = 7; 

 this.caller = document.getElementById(callname); 

 this.thediv = document.getElementById(divname);  this.thediv.style.visibility = startstate;}
 //menu methods
 function ehandler(event,theobj){ 

 for (var i=1; i<= theobj.numberofmenuitems; i++){ 

 var shutdiv =eval( "menuitem"+i+".thediv");    shutdiv.style.visibility="hidden";  }  theobj.thediv.style.visibility="visible";} 
 function closesubnav(event){ 

 if ((event.clientY <48)||(event.clientY > 107)){ 

 for (var i=1; i<= numofitems; i++){ 

 var shutdiv =eval('menuitem'+i+'.thediv');      shutdiv.style.visibility='hidden'; 

 } 

 }
 }
 // -->
 </script>[/code]

</head>

@Paul_JrDec 10.2003 — #[i]Originally posted by Kristien [/i]

Okay, I found an example of how I would like it (i tried looking at the 'source', but I still can't figure it out)

[URL=http://www.macromedia.com/]http://www.macromedia.com/[/URL] [/QUOTE]

That's because the menu at www.macromedia.com is a Flash Menu, not DHTML.

@KristienauthorDec 10.2003 — #I see... but is there no html code (onmouseover I suppose...) I can do something alike with?

thanks!

@Paul_JrDec 10.2003 — #Yes, there is, but I can't think of anything off-hand.

Try searching Google for DHTML Menus, or JavaScript Menus. See what turns up.

Also in #JavaScript _↴

New Regex problem continue javascript object seperate files Help with validation script

Success!

Help @Kristien spread the word by sharing this article on Twitter...

Tweet This

f@#$#@ onmouseover

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

f@#$#@ onmouseover

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴