Javascript Not Working In FF

Hey guys I have the following JS file:


function fade_In(path, id)
{
var target = document.getElementById(id);
if (target.filters){
target.style.filter="blendTrans(duration=0.25)";
target.filters.blendTrans(duration=0.25).Apply();
target.filters.blendTrans.Play();
target.style.backgroundImage = "url("+path+")";}
}

function fade_Out(path, id)
{
var target = document.getElementById(id);
if (target.filters){
target.style.filter="blendTrans(duration=0.25)";
target.filters.blendTrans(duration=0.25).Apply();
target.filters.blendTrans.Play();
target.style.backgroundImage = "url("+path+")";}
}


Which is drawn in to an HTML document via the link in the head. The actualy javascript creates an awesome rollover effect when applied to links. The code for a certain link would look like:


<a id="freelisting" onMouseOver="fade_In('resources/images/free_listing_button_over.jpg', this.id)"
onMouseOut="fade_Out('resources/images/free_listing_button.jpg', this.id)" href="sign_up.php"></a>


Now this works really well in IE, but for some reason Firefox simply displays it as a normal rollover. Am I missing something or is there some way I can get it to work in FF as well. Maybe a different method for creating fading rollovers? Bear in mind that I'm not great at JS!

One more question... is there a way I can make it so that when you roll off the button it doesn't skip to the end of the 'onLoad' before fading back out again?

Any help would be greatly appreciated!

for an example head to http://pdt.ufindus.com/privateairmanagement and test in both browsers!

When doing fade ins/outs you have to use two different methods for the several browsers. Basically, blendTrans only works for IE, and FF recognizes the CSS3 opacity property. All you would need to do is simply add one line of code wherever you use blendTrans. This page has everything you need to know about this.

http://www.brainerror.net/scripts_js_blendtrans.php

Ah cool, thank you very much. I'll give it a go and see what I can come up with! Seems like a simple enough solution, although will need a bit of tweaking in the old code

Right, I implemented some additions to the code in an attempt to allow firefox to view the rollovers. However, I'm having difficulty because the code on the site you directed me to allows for great opacity effects, but is not very compatible with image swaps, which is what I really need it to do. Plus if you look at the site you gave me, his version of the image swap did not look right in Firefox either because the image flashes before it fades in... any fixes for this would be greatly appreciated!