IE flicker with onmouseover?

Sorry if this is a dumb question

[FourDegreez]

I've tried to apply a different class to change the background color of an <li> tag using onmouseover. Looks good in Firefox, but in IE as the mouse moves across the <li> block, the thing flickers like crazy. Am I doing something wrong?

When the page loads, here's what I do:

var gallery = document.getElementById('gallery');
var li = gallery.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
  li[i].onmouseover = function() {
    this.className = 'mouseover';
  };
  li[i].onmouseout = function() {
    this.className = '';
  };
}

[scriptmasterdel]

No, the problem you are experiancing is a common problem with internet explorer.

I am not sure why it actually happens, but when you apply a background image to a hover state it's asif it has to load the image each time and you have a dial up connection!

I Think this problem was adjusted in 7, what version are you using?

Del

p.s. That kinda looks like the suckerfish menu javascript - am i right?

[rocknbil]

The same is true, in some conditions, if you try to execute something on a mouseover/mouseout of an image. Each time you move the mouse it's like IE says "the mouse moved, set it to out - no wait, it's still over, turn it back on!"

li[i].onmouseover = function() {

I think this is because inherently, static objects like item lists, backgrounds, table cells, etc etc. aren't meant to be dynamic objects, they are meant to be, well, static. Any coding you do that does something on mouseover or onclick will give you much better results if you trigger the event on the mouseover of a link. You do this by changing the display property of the link to block:

<a class="some-link-selector" href="#"> some link </a>

.some-link-selector { display: block; }

Then when you mouseover the LI or TD or any other static container, the link within that container now fills it up so in reality you're mousing over a link . . .

My opening example, images,

<img src="some.gif" onMouseOver="some_function();">

Works in more browsers if you do this instead:

<a href="#" onMouseOver="some_function();"><img src="some.gif"></a>

[FourDegreez]

I'm using IE 6. scriptmasterdel, you guessed it, although I'm trying to do something much simpler than suckerfish, just using it for inspiration.

I solved the flicker by putting everything in a <a> block, thanks guys.