Internet Explorer having issues with onMouseOver

mrtanooki

09-10-2004, 05:25 PM

I'm brand new at javascript programming and i'm making a script for a company website that displays a menu.

What i want to happen is when a user puts the mouse curser over menu item a submenu drops down, and when the mouse moves to a different menu item the previous submenu retracts and the other submenu drops down.

The way i'm doing it right now works perfectly in Mozilla FireFox, but does not work at all in Internet Explorer 6:

linkelement = document.createElement("a");
linkelement.setAttribute("onMouseOver","expand()");

Is there an (easy) alternative way that i can apply an onMouseOver action that works for IE as well as Mozilla?

Here is the full (temporary) code:

<script type="text/javascript">

var idgroups = new Array();
var menulist = document.createElement("ul");
var submenulist;
var menulist;
var menuitem;
var linkelement;
var sublinkelement;
var menuelement = document.getElementById("menu");
var menuitemname;
var submenuitemname;
var menuitemvalue;

var menu = new Array();
var menuvars = new Array();
var submenu = new Array();
var subvars;

var menu = ["One","Two","Three"];
var menuvars = ["assassinate","your","parents"];
var submenu = [new Array("HEH","heh","hEh"),new Array("Rofl","Lmao","LoL"),new Array("I","like","poop")];
var subvars = [new Array("...","...","..."),new Array("...","...","..."),new Array("...","...","...")];

function buildmenu() {
menuelement = document.getElementById("menu");

for (menulen=0; menulen!=menu.length; menulen++) {
// here we create teh menu items
menuitem = document.createElement("li");
linkelement = document.createElement("a");
linkelement.setAttribute("href",menuvars[menulen]+"/index.phtml");
linkelement.setAttribute("onMouseOver","expand()");
menuitemname = document.createTextNode(menu[menulen]);
linkelement.appendChild(menuitemname);
menuitem.appendChild(linkelement);

// this is whurr we make teh submenu items
submenulist = document.createElement("ul");
for (submenulen=0; submenulen!=submenu[menulen].length; submenulen++) {
submenuitem = document.createElement("li");
sublinkelement = document.createElement("a");
sublinkelement.setAttribute("href",menuvars[menulen]+"/"+subvars[menulen][submenulen]+".phtml");
submenuitemname = document.createTextNode(submenu[menulen][submenulen]);
sublinkelement.appendChild(submenuitemname);
submenuitem.appendChild(sublinkelement);
submenulist.appendChild(submenuitem);
menuitem.appendChild(submenulist);
}
menulist.appendChild(menuitem);
}
menuelement.appendChild(menulist);
}

function expand() {
document.write("I hate you.");
}
</script>

<body onload="buildmenu()">
<div id="menu">

</div>
</body>

Please just focus at the question on hand, i realize my code isn't very well done. Remember I just started programming javascript recently.

sad69

09-10-2004, 08:25 PM

I think you need to do something like this:

linkelement.setAttribute("onMouseOver","function() { expand(); };");

onMouseOver requires a pointer to a function, not a function call. onMouseOver is an event-handler, so it makes a call to the function it's pointing at.

Hope that helps,
Sadiq.

mrtanooki

09-11-2004, 07:26 PM

No that doesn't work either.

fci

09-12-2004, 01:44 AM

try this:

linkelement.onmouseover = function() { expand(); }

setAttribute doesn't work in IE

liorean

09-12-2004, 01:54 AM

element.setAttribute does work in iew, or at least, it does mostly work. However, event handlers are not part of the HTML, really. Event handlers belong in the scripting system. They are parsed together with everything else when the document is parsed, and the corresponding script structures are created. However, when setting an attribute using element.setAttribute you don't reparse it and create the scripting structure, the only thing you do is create an HTML attribute.

If you programmatically want to add events, use the element.onevent syntax. If you don't worry about iew at all, use the DOM2Event mechanisms. Don't use the iew proprietary element.attachEvent mechanism unless there is no other way.

Willy Duitt

09-12-2004, 01:57 AM

try this:

linkelement.onmouseover = function() { expand(); }

setAttribute doesn't work in IE

setAttribute does work with IE but you need to use the correct syntax....
Which is: onmouseover NOT: onMouseOver

.....Willy

fci

09-12-2004, 02:50 AM

oh

damn

mrtanooki

09-12-2004, 08:27 PM

try this:

linkelement.onmouseover = function() { expand(); }

setAttribute doesn't work in IE

this was the winner. thanks everyone who helped