Меню сайта
Форма входа
Календарь
«  Март 2012  »
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
262728293031
Архив записей
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
    • Статистика
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Главная » 2012 » Март » 16 » Скрипты uCoz: Аватар и данные о пользователе при наведении на ни...
    20:09
    Скрипты uCoz: Аватар и данные о пользователе при наведении на ни...

    Аватар и данные о пользователе при наведении на ник V.2 (как на DLE)


    Советуем посмотреть:



    Я уже когда-то выкладывал подобный скрипт на основе jquery.coda-bubble.sp.js. Теперь предлагаю Вам скрипт "Аватар и данные о пользователе при наведении на ник V.2 (как на DLE)" основанный на скрипте jquery.tooltip.js.

    Чем новый скрипт лучше старого?
    1. Код не такой громоздкий.
    2. Всплывающее окно располагается динамически относительно ника (в зависимости от расположения в окне браузера),а не статически как в старом скрипте.
    3. Практически не подгружает сайт.
    4. Есть возможность настройки прозрачности в стилях.

    Установка:

    1. Скачать архив,распаковать и залитьсодержимое(java скрипт) в корень сайта:
    Скачать архив

    2. Этот код установить в CSS:

    Code
    /* Avatar */
    #tooltip {
    width: 200px;
    position: absolute;
    z-index: 1;
    border: 1px solid #989790;
    background-color: #fff;
    font: Tahoma;
    color: #000;
    padding: 5px 10px 5px 10px;
    opacity: 1.0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;  
    border: 1px solid #989790;
    border-radius: 5px;
    }
    /*------------------------*/

    3. Через панель управления создаем информер (можно несколько) "Пользователи" и дальше как вам угодно (колличество столбцов,способ сортировки,количество материалов и т.д.) и вставляем в шаблон информера следующий код:

    Code
    <div id="tooltiper">
    <a class="noneline" title="<center><img src='$AVATAR_URL$' height='100' width='100' border='0'><img src='http://hotwarezyour.my1.ru/noavatar.gif.png' border='0' height='100' width='100'></center><br><span style='font-size: 8pt;font-weight:normal;'><b>Ник на сайте:</b> $USERNAME$<br><b>Пол:</b> $GENDER$<br><b>Группа:</b> $GROUP_NAME$<br><b>Страна:</b> $COUNTRY$<br><b>С нами с</b> $REG_DATE$<br><b>Опубликовал новостей:</b> $NEWS_POSTS$ шт.</span>" href="$PROFILE_URL$"><span style="font-size: 7pt;color: #960018;">$USERNAME$</span></a>
    </div>

    Картинки и цвета ссылок меняете по желанию на свои.

    4. А этот код вставляете уже в статистику или куда Вам нужно:

    Code
    <script src="/jquery.tooltip.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
    $('#tooltiper a').tooltip({
      track: false,
      delay: 0,
      showURL: false,
      fade: 200
    });
    });
    </script>

    $MYINF_1$

    Не забываем при этом код информера поменять на свой.
    Вот и всё...

    Материал взят с сайта infoscript.ru













    Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
    Просмотров: 410 | Добавил: Ahmed | Теги: аватар, ни..., при, UCOZ:, на, данные, пользователе, наведении, Скрипты | Рейтинг: 0.0/0
    Всего комментариев: 0
    Имя *:
    Email *:
    Код *: