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

Get MooTools 1.3 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.