Manipulating image opacity in Firefox

Borrowing a page from IE's book, Firefox/ NS6+ allows you to use coding to manipulate the opacity of an image. And to borrow from the vocabulary of a surfer dude, it's totally rad!

FYI, "opacity" refers to transparency; the lesser the opacity of an image, the more transparent it is.

Using CSS to define opacity

<IMG style="-moz-opacity:0.5" src="test.gif">

Valid range of values for -moz.opacity is from 0 to 1, where lesser equates to more transparency. See for yourself the difference:

Changing opacity on the fly

Interesting effects arise when we have dynamic access to the opacity property, which luckily is the case here. The syntax is:

To round off our tutorial, the below image continuously fades incrementally between 0.3 (30%) and 0.6 (60%) opacity:

<img id="test" src="pump.gif" width=116 height=123 style="-moz-opacity:0.3" />

<script type="text/javascript">

opacity=0 //opacity of image
var increase=1 //increase opacity indicator
var decrease=0 //decrease opacity indicator

function fade(){
if (opacity<0.6&&increase)
opacity+=0.05
else{
increase=0
decrease=1
}

if (opacity>0.3&&decrease)
opacity-=0.05
else{
increase=1
decrease=0
}

document.getElementById("test").style.MozOpacity=opacity
}

if (document.getElementById("test") && document.getElementById("test").style.MozOpacity) //if Firefox/ NS6+
setInterval("fade()",100)
</script>

Manipulating image opacity in Firefox

Using CSS to define opacity

Changing opacity on the fly