Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Using MooTools For Opacity

By  on  

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
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    dwImageProtector Plugin for jQuery

    I've always been curious about the jQuery JavaScript library. jQuery has captured the hearts of web designers and developers everywhere and I've always wondered why. I've been told it's easy, which is probably why designers were so quick to adopt it NOT that designers...

  • By
    CSS Vertical Center with Flexbox

    I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily...

Discussion

  1. keif

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

  2. david

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

  3. Eric Wendelin

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

  4. david

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

  5. Jay

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

  6. Jay

    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.

  7. david

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

  8. keif

    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_, ##)

  9. david

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

  10. Si

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

  11. Look trough mirror

    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

  12. kazal

    ‘ 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?

  13. Argama

    Is their a way to get the div set to opacity but not the content, only the background?

    background-color
    ?
    Thanks.

    (and thanks for this post)

  14. David Walsh

    Argama: RGBA is how that will be accomplished and will be in MooTools 2.

  15. Argama

    Ok, thanks for fast reply. :)

  16. mircea

    @Jay: For me it`s the other way around :) . Jquery is just full of unnecessary code. At least let the developer do SOME things… so he can do it as it best fits his needs… if you want performance go with mootools

    A good framework gives you what you need to get the job done. It`s not supposed to do it for you (That`s just being lazy) because it cant possibly guess what you need, if it tries it ends up like this http://jqueryui.com/demos/datepicker/ . Just look at all those options you`d have to be crazy to actually use that, events spanned when and where you dont need them etc etc. (I`ve actually tried to use that once, when I was `younger` I ended up not being able to , as in I`ve modified it, because in all those options and events there isnt actually an htmlUpdated event. It`s just rubbish and way too bloated for my taste). BTW. the html is actually updated every time you select a date with that one… (mind you ,only in the `inline` version but stil .. is that crazy and unnecessary or what …)

    Just compare this two in ie6 (ie6 because it`s the best way to see the performance difference)
    http://www.snook.ca/technical/mootoolsdragdrop/
    http://jqueryui.com/demos/draggable/

    Just as a “shout” to jq, you`re giving starting developers more than enough rope to hang themselves with, so cut down on it. Everyone that uses jquery uses it because it`s simple not because it`s good. Anyway, I`ll stop my “love” for jq here

    P.S. there is an error in the mootools drag example that only shows in ie. It`s quite easy to fix you just have to pre-set `left` and `top`. If I`m not mistaken it has been fixed in the newer versions or it`s going to be fixed in the next one.

    P.P.S Take from this what you want. Everyone is free to choose whatever

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!