var LinkAlert = new Class({
 
//implements
Implements: [Options,Events],
 
//options
options: {
container: document.body,
extensions: {},
offsets: { x:6, y:-15 },
preloadImages: true,
protocols: {},
sticky: false,
onShow: function(el,image) {
this.image.setStyle(‘display’,”);
},
onHide: function(el,image) {
this.image.setStyle(‘display’,‘none’);
}
},
 
//initialization
initialize: function(options) {
//set options
this.setOptions(options);
this.extensions = new Hash(this.options.extensions);
this.protocols = new Hash(this.options.protocols);
this.image = new Element(‘img’,{
src: ”,
styles: {
position: ‘absolute’,
top: -200,
left: -200,
visibility: ‘hidden’
}
}).inject(document.id(document.body));
//preload images, if necessary
if(this.options.preloadImages) { this.preloadImages(); }
//add the listeners
this.addListeners(this.extensions,‘$=’,‘extensions’);
this.addListeners(this.protocols,‘^=’,‘protocols’);
},
 
//give direction to links
addListeners: function(items,sep,type) {
//for every item
items.each(function(image,extension,type) {
//for every link of that type
$$(‘a[href' + sep + '\'' + extension + '\']‘).each(function(el) {
//if the same protocol, don’t bother showing
if(type == ‘protocol’ && window.location.protocol == extension + ‘:’) { return; }
//add the show/hide events
el.addEvents({
mouseenter: function(e) {
//position the image and give it the proper SRC
this.reposition(e).set(‘src’,image);
//fire the event
this.fireEvent(‘show’,[el,image]);
}.bind(this),
mouseleave: function(e) {
//fire the event
this.fireEvent(‘hide’,[el,image]);
}.bind(this)
});
//sticky?
if(this.options.sticky) {
el.addEvent(‘mousemove’,function(e) {
this.reposition(e);
}.bind(this));
}
},this);
},this);
},
 
//repositions
reposition: function(e) {
return this.image.setStyles({
left: e.page.x + this.options.offsets.x,
top: e.page.y + this.options.offsets.y
});
},
 
//preloads necessary images
preloadImages: function() {
var images = [this.protocols.getValues(),this.extensions.getValues()].flatten();
new Asset.images(images);
}
});
 

ESEMPIO APPLICATO

 
/* do it */
window.addEvent(‘domready’, function() {
var graphicsDir = ‘link-alert/’;
var context = new LinkAlert({
extensions: {
doc: graphicsDir + ‘word.png’,
js: graphicsDir + ‘js.png’,
pdf: graphicsDir + ‘pdf.png’,
txt: graphicsDir + ‘text.gif’,
xls: graphicsDir + ‘xls.png’,
jpg: graphicsDir + ‘jpg.png’
},
protocols: {
ftp: graphicsDir + ‘ftp.png’,
https: graphicsDir + ‘secure.png’,
‘javascript:’: graphicsDir + ‘js.png’
},
preloadImages: true,
sticky: true,
onShow: function(el,image) {
this.image.fade(‘in’);
},
onHide: function(el,image) {
this.image.fade(‘out’);
}
});
});
 

Demo: http://davidwalsh.name/dw-content/link-alert.php

fonte: www.sastgroup.com