Javascript onmouseover doesn't trigger in IE

Question

I've created a javascript function to display buttons for a menu. The buttons are made up of a div container with either a transparent background when up or an image background when down. The only thing about them that I can't get working in IE is the rollover. I've tried the css pseudo class hover as well as changing the style with onmouseover and onmouseout. I've also tried changing to onmouseenter and onmouseleave. Everything I've tried works fine in FF and Chrome, but will not work in IE. My code is below:

function createOSDbutton(btn_N, btn_I, btn_L, btn_D) // (Div Name, Tab Index, Button Text, Page To Load)
{
var btnN = top.frames['buttonbar'].document.getElementById(btn_N);

btnN.style.cssText = "display:block; cursor:pointer; padding-left:16px; padding-top:5px;";
btnN.setAttribute("onClick", btn_D);
btnN.setAttribute("onMouseOver", "this.style.color='black'");
btnN.setAttribute("onMouseOut", "this.style.color='white'");
btnN.setAttribute("tabindex", btn_I);
btnN.innerHTML = btn_L;
}

The buttons are rendered with an onload in the body. The line for each button looks like this:

createOSDbutton("button01", 1, "Customer Login", "parent.frames['content'].location.href='./custlogin/custlogin.asp';");

The HTML looks like this:

<div id="button01" class="osdmenu b1 myriad"></div>

CSS looks like this:

div.osdmenu {background-color:transparent; font-size:9pt; width:201px; height:30px; vertical-align:middle; padding-left:16px; padding-top:5px;}
.myriad {font-family: "myriad", arial, helvetica, sans-serif;}
div.b1  {position:absolute;top:120px; }

Pointy · Accepted Answer · 2012-05-24 15:03:47Z

1

Don't use .setAttribute() to set properties of DOM elements. As you've discovered, IE gets confused.

btnN.onclick = btn_D;

Also your handlers have to be functions, not simply snippets of code:

btnN.onmouseover = function() { this.style.color='black'; };

answered May 24, 2012 at 15:03

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jbabey · Accepted Answer · 2012-05-24 15:13:35Z

1

You are setting properties with setAttribute, which will not work in IE.

btnN.onclick = btn_D;
btnN.onmouseover = function () { this.style.color='black'; };
btnN.onmouseout = function () { this.style.color='white'; };
btnN.tabindex = btn_I;

Also, make sure you are passing a function for btn_D, as event handlers must be functions.

edited May 24, 2012 at 15:13

answered May 24, 2012 at 15:06

jbabey

46.8k12 gold badges73 silver badges94 bronze badges

Collectives™ on Stack Overflow

Javascript onmouseover doesn't trigger in IE

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related