O'Reilly logo

MooTools 1.3 Cookbook by Jay Larry G. Johnston

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Extending images—add captions based on ALT attributes

Often we have to work with images, changing how we display metadata related to the images.

Getting ready

Get ready to extend images on our pages by beginning with a base class to mutate downstream classes.

var imgmootater = new Class({
initialize: function() {
this.imgs = $$('img');
},
make_titles: function() {
this.imgs.each(function(el){
el.set('title',el.get('alt'));
});
}
});

To prevent this from being just a boring interface with no real station in life, add a common function, which is to duplicate the IMG tag required ALT attribute into the TITLE attribute so that mouseover actions will display the otherwise hidden metadata.

How to do it...

Extend this class while maintaining inheritance ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required