filter:alpha & -moz-opacity

[Xander6669]

I found a fade in/fade out script on Google which goes like this:

function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.5
else if (which2.filters)
which2.filters.alpha.opacity=50
}

function highlightit(cur2){
if (cur2.style.MozOpacity<1)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
else if (cur2.filters&&cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
And here is how the img tag must look:

<img src="images/button.gif" border="0" height="31" width="88"
style="filter:alpha(opacity=50);-moz-opacity:0.5" onMouseover="high(this)"
onMouseout="low(this)">
This script makes it so when you have your mouse over the image, there is a graduate fade in. However, when you take your mouse out, it fades out instantly.

Would there be a way to make the fade out graduate?
Thanks a lot.
(I hope I posted this in the good section)

[sad69]

You basically make the low() function be the opposite of high(). I had to modify it slightly to eliminate a flickering effect. Replace your current functions with the following:

<script>
var timeoutID = -1;
function high(which2) {
if(timeoutID != -1)
clearTimeout(timeoutID);

theobject=which2;
highlightit(theobject);
}

function low(which2) {
if(timeoutID != -1)
clearTimeout(timeoutID);

theobject=which2;
lowlightit(theobject);
}

function lowlightit(cur2){
timeoutID=setTimeout("lowlightit(theobject)",50);
if (cur2.style.MozOpacity>0)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)-0.1;
else if (cur2.filters&&cur2.filters.alpha.opacity>0)
cur2.filters.alpha.opacity-=10;
else if (window.highlighting)
clearInterval(lowlighting);
}

function highlightit(cur2){
timeoutID=setTimeout("highlightit(theobject)",50);
if (cur2.style.MozOpacity<1)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1;
else if (cur2.filters&&cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10;
else if (window.highlighting)
clearInterval(highlighting);
}
</script>


And your img should stay the same:

<img src="http://192.168.1.50/pics/signed.gif" border="0" height="31" width="88"
style="filter:alpha(opacity=0);-moz-opacity:0" onMouseover="high(this)"
onMouseout="low(this)">


Let me know how it works out.
Sadiq.

[ArcticFox]

Ooooo...

I’ve been looking for a cross-browser (IE/NS) one of these. :D

Thank you!

[trustle]

Is there any way to do the same thing with Opera?
(Opera compatible code for filter:alpha or -moz-opacity)

[liorean]

Is there any way to do the same thing with Opera?No, not yet. Safari 1.2 and recent Mozilla versions use the CSS3 opacity property, so that's the one you should use for future compatibility.

[veganCoder]

sorry to bring up an old post, but,

how can you make it so if the browser doesnt support this, it just shows the image?

[brothercake]

I thought Safari used "-khtml-opacity" ?

Either way, there are four opacity models at the moment - IE's filter, -moz-opacity in older moz builds, -khtml-opacity in some KHTML browsers (safari and konqueror), and the standard opacity property.

I have a script which caters for all four -- http://www.brothercake.com/site/resources/scripts/transitions/ -- the first one (swap-fade) has the fade-in / fade-out controls you wanted.

[ArcticFox]

sorry to bring up an old post, but,

how can you make it so if the browser doesnt support this, it just shows the image?

That's what the browser will do. When using the CSS, the browsers pull the transparency down from full; if the browser doesn't like/use the CSS, then the image will be displayed as usual.