PDA

Click to See Complete Forum and Search --> : f@#$#@ onmouseover

Kristien
12-08-2003, 11:16 PM
I have the frame for my site all nice and designed, with a horizontal menu on top. For example:

<a href="pictureindex.htm" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Pictures</a>

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

<div id="subglobal2" class="subglobalNav">

(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)
http://www.macromedia.com/

It is driving me nuts... :mad:
Thanks 4 helping me out!
Gollum
12-09-2003, 03:37 AM
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)
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...

<html>
<head>

<script type="text/javascript">
function menu(oTD, n)
{
// shade Main menu
var oTR = oTD.parentNode;
for ( i = 0; i < oTR.childNodes.length; i++ )
oTR.childNodes[i].style.backgroundColor = "white";
oTD.style.backgroundColor = "#e0ffe0";

// show sub menu
for ( i = 1; i <= 3; i++ )
{
var oDiv = document.getElementById("subMenu" + i);
oDiv.style.visibility = (i == n) ? "visible" : "hidden";
}

}

</script>
</head>
<body>
<table>
<tr>
<td onmouseover="menu(this, 1);" style="cursor: default">Menu 1</td>
<td onmouseover="menu(this, 2);" style="cursor: default">Menu 2</td>
<td onmouseover="menu(this, 3);" style="cursor: default">Menu 3</td>
</tr>
</table>
<div>
<div>&nbsp;</div><!-- filler -->

<!-- Menu 1 -->
<div id=subMenu1 style="position:absolute;visibility:hidden;">
<table>
<tr>
<td onclick="alert('A');" style="cursor: pointer"> ===> A <=== </td>
<td onclick="alert('B');" style="cursor: pointer"> ===> B <=== </td>
<td onclick="alert('C');" style="cursor: pointer"> ===> C <=== </td>
</tr>
</table>
</div>

<!-- Menu 2 -->
<div id=subMenu2 style="position:absolute;visibility:hidden;">
<table>
<tr>
<td onclick="alert('I');" style="cursor: pointer"> ===> I <=== </td>
<td onclick="alert('II');" style="cursor: pointer"> ===> II <=== </td>
<td onclick="alert('III');" style="cursor: pointer"> ===> III <=== </td>
</tr>
</table>
</div>

<!-- Menu 2 -->
<div id=subMenu3 style="position:absolute;visibility:hidden;">
<table>
<tr>
<td onclick="alert('1');" style="cursor: pointer"> ===> 1 <=== </td>
<td onclick="alert('2');" style="cursor: pointer"> ===> 2 <=== </td>
<td onclick="alert('3');" style="cursor: pointer"> ===> 3 <=== </td>
</tr>
</table>
</div>
</div>
</body>
</html>
Kristien
12-09-2003, 10:17 AM
I will check it out asap. Thank you very much! :)
Kristien
12-09-2003, 03:17 PM
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!
Kristien
12-09-2003, 08:24 PM
This is the javascript code that I can find in my css form... Please can someone help...


<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>
</head>
Paul Jr
12-09-2003, 09:39 PM
Originally posted by Kristien

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)
http://www.macromedia.com/

That's because the menu at www.macromedia.com is a Flash Menu, not DHTML.
Kristien
12-09-2003, 09:41 PM
I see... but is there no html code (onmouseover I suppose...) I can do something alike with?
thanks!
Paul Jr
12-09-2003, 10:01 PM
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.