Categories:
Partners

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

We use CSS to define the initial degree of opacity in Firefox:

<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:


Original Image


Image with opacity set to 0.5

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:

object.style.MozOpacity=interger (0 to 1)

How about a quick opacity change onMouseover?

<IMG style="-moz-opacity:0.6" src="alta.gif" onMouseover="this.style.MozOpacity=1" onMouseout="this.style.MozOpacity=0.6">

-Example: Fading pumpkin

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>

Spookay!

Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.