onmouseout event occuring when it shouldn't - code "flickers"

[V for Vincent]

Hey, someone asked me to make a small website that looks like an old tv-set where you can switch pages by using the tv's buttons. Okay, I figured I'd tackle this using javascript for the buttons and dhtml to change the contents of the "screen". Now, I felt that just the buttons didn't really provide a clear interface, so I figured would use dhtml so that, when you hover over one of the buttons, an image appears that says what that button is for. Strange thing is, I simply cannot get the image to remain static as long as I want it to disappear when the user stops hovering over the button. Onmouseover and onmouseout events simply follow eachother as fast as they can, both in IE and in FF. Here's the relevant code:HTML:<div id="button1" onmouseover="textbubble1('325px', '479px','textbubble','button1.gif')" onmouseout="antitextbubble()"></div>JS:function textbubble1(margelinks, margetop, layer, imageUrl){document.getElementById('textbubble').style.display="block";document.getElementById('textbubble').style.left=margelinks;document.getElementById('textbubble').style.top=margetop;setBackgroundImage(layer,imageUrl);}function antitextbubble(){document.getElementById('textbubble').style.display="none";}function setBackgroundImage( layer, imageUrl ) { if( document.getElementById ) { return document.getElementById( layer ).style.backgroundImage = "url("+imageUrl+")"; } else if( document.all ) { return document.all[layer].style.backgroundImage = "url("+imageUrl+")"; } else { return document[layer].background.src = imageUrl; }}CSS:#textbubble {position: absolute;min-width: 420px;width: 420px;min-height: 300px;height: 300px;Z-index: 2;left: 325px;top: 481px;display: none;}#button1 {position: absolute;min-width: 30px;top: 535px;min-height: 30px;width: 30px;height: 30px;left: 260px;Z-index: 1;}I'm aware there may be some redundancy, as I'm still new to this whole business, but I don't think that's causing the issue. ######, I recently made another website with similar mouseover background changes and those work fine. I really can't pinpoint the difference, so I would be very much obliged if someone else could.

[jesh]

Strange thing is, I simply cannot get the image to remain static as long as I want it to disappear when the user stops hovering over the button. Onmouseover and onmouseout events simply follow eachother as fast as they can, both in IE and in FF.

I'm not totally certain what you are trying to accomplish, but if you want to introduce a delay before your "textbubble" disappears, you can use setTimeout:

function antitextbubble(){	// Setting the display to none will happen 5000 milliseconds 	// (5 seconds) after this code executes.	setTimeout("document.getElementById('textbubble').style.display='none';", 5000);}

If that's not the answer you're looking for, maybe you could present us with all the code - I didn't see the "textbubble" element in your post.

[V for Vincent]

The text bubble's a separate div. I'd like to change that div's background on the onmouseover event I mentioned, but it changes back (onmouseout effect) when you move your mouse without leaving the div. I've uploaded all the files to this address. Div names and such are in Dutch, but they should all be fairly transparent.

[jesh]

Using the Web Developer extension for Firefox, I was able to outline all block level elements on the page to see that the problem appears to be that your tekstballon element is too big. When you mouse over the div, the tekstballon becomes visible underneath the mouse cursor so the mouseout event on the div fires which makes the tekstballon disappear which causes the mouseover event on the div to fire. This is repeating ad nauseum and is the cause of your flickering.Try throwing a border on the tekstballon element to see what I'm talking about. I think the solution will be to make that element only as big as it needs to be to display the bubble.

[V for Vincent]

You, sir, are a hero. It makes perfect sense now that I think about it. Damn my sloth for settling for oversized transparent gifs!