Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using MooTools For Opacity

DZone's Guide to

Using MooTools For Opacity

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

Update: The semantic-lovers have won!  I'm now using the title attribute.

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 "alt" tag (correct, semantics have been thrown out the window). MooTools 1.2 is required.

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.getProperty('title'));
});
});

The XHTML

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

The Result

Click here to view an example. For those concerned with semantics, you can just as easily use the "title" attribute in the image.

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

Published at DZone with permission of David Walsh. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}