теперь по теме…
к примеру у нас есть несколько таких картиночек с действиями какого-то редактирования
<a href="#"><img src="img/add.png" alt="добавить" /></a>
<a href="#"><img src="img/accept.png" alt="сохранить" /></a>
<a href="#"><img src="img/16_tool_a.png" alt="настройки" /></a>
<a href="#"><img src="img/del.png" alt="выход" /></a>делаем финт ушами
$('a img[alt]').jAlt();и вуа-ля! оно полетело!!! (см. демку)
а вот и сам jAlt, собственной персоной))
(function($) {
$.fn.jAlt = function(options) {
var defaults = {
direction : 1, // 1 = вверх, 0 = вниз
duration : 1000, // время полета
delay : 0, // задержка перед полетом
range : 20 // дальность полета
},
opts = $.extend(defaults, options);
this.bind('mouseover', function(e) {
var t = $(this),
text = t.attr('alt'),
posX = t.offset().left,
posY = t.offset().top + ( opts['direction'] === 1 ? -15 : t.height() + 10 ),
ghost = $('<div class="jalt_ghost">'+text+'</div>');
if (text) {
$('body').append(ghost);
ghost
.css({
position : 'fixed',
zIndex : 1,
fontSize : 11,
fontFamily : 'monospace',
color : '#000'
})
.css({
left : posX-(ghost.width()-t.width())/2,
top : posY
})
.delay(opts['delay'])
.animate({
top : posY + ( opts['direction'] === 1 ? -opts['range'] : opts['range'] ),
opacity : 0
}, opts['duration'], function(){
ghost.remove();
});
}
}).bind('mouseout', function() {
$('.jalt_ghost').remove();
});
};
})(jQuery);демка - http://keyx.narod.ru/jalt/
