Using MooTools For Opacity

* MooTools 1.2 is required.

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 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('alt'));
   });
  });

XHTML

<p align="left"><img src="fruit_and_veg.jpg" alt="80" class="opacity" /></p>
<p align="left"><img src="fruit_and_veg.jpg" alt="60" class="opacity" /></p>
<p align="left"><img src="fruit_and_veg.jpg" alt="40" class="opacity" /></p>
<p align="left"><img src="fruit_and_veg.jpg" alt="20" class="opacity" /></p>

Step 5: The MooTools 1.2

Click Here to DOWNLOAD

Example

Click to DEMO