ФорумПрограммированиеПыхнуть хотите?Готовые решения → Альтернативный текст для картинов а-ля тултип, или jAlt... XD

Альтернативный текст для картинов а-ля тултип, или jAlt... XD

  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 16 сентября 2010 г. 19:38

    выпадающая подсказка при наведении на картинку с каким-то действием конечно норм смотрится, но я решил сделать по-другому)) расценивайте это как "Стасовскому нечего делать. Дубль три."))

    теперь по теме…
    к примеру у нас есть несколько таких картиночек с действиями какого-то редактирования
    <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/
    Высокоуровневое абстрактное говно
  • Givi

    Сообщения: 2284 Репутация: N Группа: Адекваты

    Spritz 16 сентября 2010 г. 21:45, спустя 2 часа 7 минут 5 секунд

    Ну разве что реально от нехуй делать, ибо конкретно к выполненной задаче сия функция нах не нужна.
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 17 сентября 2010 г. 3:27, спустя 5 часов 41 минуту 46 секунд

    ибо конкретно к выполненной задаче сия функция нах не нужна

    да пофигу)) прикольная хреновинка получилась))
    Высокоуровневое абстрактное говно
  • Абырвалг

    Сообщения: 6476 Репутация: N Группа: Джедаи

    Spritz 17 сентября 2010 г. 3:29, спустя 2 минуты 20 секунд

    забавно
    Спустя 10 сек.
    я соскучился по жуйквери
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 17 сентября 2010 г. 3:31, спустя 1 минуту 52 секунды

    нах не нужна

    кстать, я больше не для необходимости, а для практики делал))

    забавно

    ну вот кому-то нравится))
    Высокоуровневое абстрактное говно
  • Givi

    Сообщения: 2284 Репутация: N Группа: Адекваты

    Spritz 17 сентября 2010 г. 6:05, спустя 2 часа 33 минуты 53 секунды

    Stasovsky, она-то прикольная, я ж не спорю. Просто нужно придумать более полезное применение ей. Но в целом молоток.
  • felix90

    Сообщения: 191 Репутация: N Группа: Адекваты

    Spritz 17 сентября 2010 г. 6:49, спустя 43 минуты 40 секунд

    А мне нравится)
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 17 сентября 2010 г. 6:54, спустя 5 минут 46 секунд


    А мне нравится)
    а мне чето не понравилось) альт должен быть читаемым, а не "съябываемым")))))
    Сапожник без сапог
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 17 сентября 2010 г. 6:57, спустя 2 минуты 56 секунд

    альт должен быть читаемым, а не "съябываемым"

    дык там мона задержку сделать, а потом он съябываеццо)) а можно сделать, чтоб вааще не съябывалсо))
    Высокоуровневое абстрактное говно

Пожалуйста, авторизуйтесь, чтобы написать комментарий!