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; }

Answer 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'; };