onMouseOver event canceling out previous onMouseOut Event? 1

[j0em0mma]

I am using a file called pngbehavior.htc to get png files (images with alpha level transparency) with rollovers utilizing src switching to work in IE. The problem was every third or fourth mouse over IE would crash with some mysterious error. I decided that instead of switching the source on Mouse Out and Over, I would over lay the images in spans, and use onMouseOut and Over to switch the css display of the overlaying spans to block and none, respectively, to preform the rollover effect. This solved my problem, but now it is really easy to move the mouse too fast and have the previous onMouseEvent event not fire when the mouse leaves the parent div. I am fairly javascript literate, but I am still a bit mystified by the cross-browser complications of event propagation. This problem happens in both IE and Firefox, so it don't think it's that. Is the next onMouseOver event canceling out the other onMouseOut Event? Is there a way to fix this using the current setup (Some of the third party code I am using specifically takes control of events, releasing and firing them manually). Is there a like workable solution for this (these will based on dynamically generated code, either in hidden form variables or javascript functions) or will I have to try and find another solution?

Here is the code:

function swapDisplay(obj1,obj2){

    if (obj1.style.display == 'block' || obj2.style.display == ''){
        obj1.style.display = 'none';
        obj2.style.display = 'block';
    }else{
        obj2.style.display = 'none';
        obj1.style.display = 'block';
    }

}

<div class="button_DIV" onClick="dostuff();">
    <span id="button_off" class="button_SPAN_off" onMouseOver="swapDisplay(this,document.getElementById('button_on'));">
        <img class="button_IMG" border="0" src="/images/button_off.png">
    </span>
    <span id="button_on" class="button_SPAN_on" onMouseOut="swapDisplay(this,document.getElementById('button_off'));">
        <img class="button_IMG" border="0" src="/images/button_on.png" alt="Button">
    </span>
</div>

Thanks!

 

[trollacious]

This should speed things up a bit:

var buttonOn, buttonOff;

window.onload = 'setIdVariables()';

function setIdVariables()
{
buttonOn = document.getElementById('button_on');
buttonOff = document.getElementById('button_off');
}

function swapDisplay(obj1,obj2)
{
var style1 = obj1.style;
var style2 = obj2.style;

if (style1.display == 'block' || style2.display == '')
  {
  style1.display = 'none';
  style2.display = 'block';
  }
else
  {
  style2.display = 'none';
  style1.display = 'block';
  }
}

<span id="button_off" class="button_SPAN_off" onMouseOver="swapDisplay(this, buttonOn);">

span id="button_on" class="button_SPAN_on" onMouseOut="swapDisplay(this, buttonOff);">

document.getElementById is expensive time-wise, and setting the elements to a global variable initially will avoid having to find them each time the mouseover and mouseout events take place.

As well, the fewer objects your code has to reference, the faster it will run, too. Assigning objects to variables like the example in the swapDisplay function above means fewer objects the script engine has to trace down through to find the specific one referred to.

Lee

 

[BillyRayPreachersSon]

While I could be wrong on this, I didn't think you could assign a string containing a function name to an event handler, and have it run the function... so I would say that this:

window.onload = 'setIdVariables()';

should probably be:

window.onload = setIdVariables;

or, if you prefer:

window.onload = function() { setIdVariables(); };

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[trollacious]

You're right that the quotes shouldn't be there. I originally was going to use a setTimeout, but changed it to window.onload and forgot to remove the quotes from the function name.

Lee

 

[j0em0mma]

Thanks guys!

Ok, I see the logic of setting up the span objects before they're needed. However, there could be 'n' number of buttons, each with two spans apiece. Since I won't know until the app runs (currently all client side, though I see the solution using server-side) how many spans are required, I'm not sure this is going to do it.

Thx again for your help folks!

 

[trollacious]

Then create the JS variables dynamically, just as you do the spans. If you write the functions at the bottom of the page, you won't even need the onload, since all the id will be created before the JS code is processed.

<span id="button_off1" class="button_SPAN_off" onMouseOver="swapDisplay(this, buttonOn1);">

span id="button_on1" class="button_SPAN_on" onMouseOut="swapDisplay(this, buttonOff1);">
.....

<script language="javascript" type="text/javascript">

<%
For x = 1 To NumberOfSets
  Response.Write "var buttonOn" & x 
  Response.Write " = document.getElementById('spanID" & x
  Response.Write "on');" & vbCrLf
  Response.Write "var buttonOff" & x 
  Response.Write " = document.getElementById('spanID" & x
  Response.Write "off');" & vbCrLf & vbCrLf
Next
%>

function swapDisplay(obj1,obj2)
{
var style1 = obj1.style;
var style2 = obj2.style;

if (style1.display == 'block' || style2.display == '')
  {
  style1.display = 'none';
  style2.display = 'block';
  }
else
  {
  style2.display = 'none';
  style1.display = 'block';
  }
}
</script>

Lee

 

[j0em0mma]

d'oh! of Course! Thank you Lee, Dan. Much appreciated!