Приветствую Вас, Гость! Регистрация RSS

Понедельник, 27.01.2020
  
Главная » Файлы » Скрипты+Программы » Скрипты - Избранные


ДЕМО:

Установка:

В начале скачайте себе архив с основными файлами
• speechbubbles.js
• speechbubbles.css вы можете по желанию (редактировать этот файл, чтобы изменить тип цвет подсказки )
• speechdata.txt (образец внешнего файла, содержащего подсказки)

Шаг 1: Вставьте следующий код в раздел head странице:

Code


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="speechbubbles.css" />

<script src="speechbubbles.js"></script>

<script type="text/javascript">

jQuery(function($){ //on document.ready
  //Apply tooltip to links with class="addspeech", plus look inside 'speechdata.txt' for the tooltip markups
  $('a.addspeech').speechbubble({url:'speechdata.txt'})
})

</script>

Ниже показан пример ссылки на страницы, каждая из которых показывает текст
всплывающей подсказки при наведении мыши на них:

Code

Материал подготовлен сайтом <a href="http://fog.3dn.ru/" class="addspeech" rel="#speechbubble1">fog.3dn.ru</a>  


А теперь немного разберём скрипт


Если вас устаревает путь к подсказке, то оставляем всё как он есть.

Code

jQuery(function($){ //on document.ready
  $('.addspeech').speechbubble({url:'speechdata.txt'})
})

Если же вы хотите указать свой путь к подсказке, то в скрипте меняем на:

Code

JQuery (функция ($) {/ / на document.ready
  $ ('. Addspeech'). Speechbubble ()
})

А также путь к файлу прописываем так:
Code

<a class="addspeech" href="http://fog.3dn.ru" title="Тут текст подсказки" rel="speechbubble1">Сайт FOG</a>

Обязательные параметры вставки, при заключение ссылок

В начале class="addspeech" ив конце rel="speechbubble1"

Как вы видели на примере выше.


Материал подготовлен сайтом: http://fog.3dn.ru/

Материал подготовил Bizon.



Автор\Источник: http://www.dynamicdrive.com/forums/forumdisplay.php?f=22
Категория: Скрипты - Избранные | Добавил: bizon | Теги: виде, пузыря, подсказка
Просмотров: 867 | Загрузок: 2 | Рейтинг: 1.0/4 | |

Новости по теме:

Поделись ссылкой

  • - ссылка
  • - BBCode
  • - HTML

  • Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Гость