Using MooTools For Opacity

Written by David Walsh on Thursday, March 27, 2008

This article may feature code that is no longer best practice in MooTools.
Click here to learn what has changed to make your code framework-compatible.

Although it’s possible to achieve opacity using CSS, the hacks involved aren’t pretty. If you’re using the MooTools javascript library, opacity is as easy as using an element’s “set” method. The following MooTools snippet takes every image with the “opacity” class and sets the element’s opacity based upon the number in the image’s rel tag. MooTools 1.2 is required.

View Demo

The MooTools Javascript

/* on dom ready ... */
window.addEvent('domready', function() {
	/* for each image that requires opacity */
	$$('.opacity').each(function(el) {
		/* set the opacity based on the alt value */
		el.set('opacity','.' + el.get('rel'));
	});
});

The XHTML

<img src="rod.jpg" rel="80" class="opacity" />
<img src="rod.jpg" rel="60" class="opacity" />
<img src="rod.jpg" rel="40" class="opacity" />
<img src="rod.jpg" rel="20" class="opacity" /><br />

The Result

View Demo

Download PDF

Follow via RSS Epic Discussion

March 27 / #

keif says:

Wait – mootools dropped the setOpacity(x); in 1.2? I’m disappointed now :(

March 27 / #

david says:

@keif: I’m pretty sure setOpacity works as well.

March 27 / #

Eric Wendelin says:

I think you should be able to get any attribute you want (even a custom one, such as opacity) using el.getAttribute(“mycustomattribute”). I think that would work in this case and you wouldn’t have to worry about semantics. :)

March 27 / #

david says:

@Eric: That may be true, but I need to offend the semantics preachers, don’t I? :)

March 27 / #

Jay says:

I’m kind of down on mootools, I have jumped ship for jquery. I just think it’s a more solid framework.

March 27 / #

Jay says:

Ya you don’t want to use the alt tag, bc screen readers are going to read “80″ as the image name. That tool would be better off using some other property, maybe “opacity80″ or something. As devices/browsers/etc rely more on semantics to show html in various ways you really shouldn’t mis-appropriate attributes like that. For example if you have images turned off it would should “80″ –you wouldn’t do that in your browser but maybe that makes sense in a pda screen sometimes. I don’t know, I just think semantics should be followed.

March 27 / #

david says:

I surrender!! The article now uses the title attribute.

March 27 / #

keif says:

I totally read this the wrong way. setOpacity can still be achieved, but the way you’re using it is to set different opacities on multiple elements.

So, with that in mind, why not use the rel tag? :) Of course, you could also create a custom DTD so you’d validate. Or even incorporate the opacity into the class name, and use the same JS method to split the name and get your opacity level.

My bad for being an idiot and not realizing the set_whatever has been replaced by a more simple set(_whatever_, ##)

April 02 / #

david says:

I surrender even more. I’m now using the “rel” attribute.

July 01 / #

Si says:

What is the correct way to implement an “onmouseover” opacity change to 100%?

August 08 / #

Look trough mirror says:

Hi, I don´t know if this really work, can you explain me why are you using the attribute

‘ style=”opacity: 0.2;”
style=”opacity: 0.4;”
style=”opacity: 0.6;”
‘

in the image tag insted of really using the class and rel because I clean the code and find that this part is the only code that needs to set the opacity

November 11 / #

Léonie says:

‘ style=”opacity: 0.2;” is not compatible to IE.
for mootools 1.2 you should either do this:
$(’someID’).setStyle(‘opacity’, 0.2);
or:
$(’someID’).set({opacity: 0.2});

December 27 / #

kazal says:

‘ style=”opacity: 0.2;”
style=”opacity: 0.4;”
style=”opacity: 0.6;”
‘
this coad is not compatible for IE.This not only problem but also in drop down menu it works fine in
div > ul >”li”

but it does not work at
div > “ul” background image in css.Have any solution?