Автоматическая подпись изображений с помощью MooTools

Этот урок расскажет Вам про то, как сделать автоматическую подпись под рисунком с помощью MooTools.

demosourse

Для всего этого нам понадобится всего несколько строк кода. Обязательно между тегами <head></head> подключаем фреймворк, таблицу стилей и дополнительный скрипт, который выполняет всю работу:

<link href="sr-auto-caption-css-1.0.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="mootools-1.2.js"></script>
      <script type="text/javascript" src="sr-auto-caption-1.0.js"></script>

И теперь к каждому рисунку достаточно добавить класс "captioned" и также обязательно у каждого изображения должно быть описание в атрибуте title:

<img class="captioned" src="red_rocks.jpg" title="Photo of Red Rock Mountain." width="300" height="201" />
<img class="captioned" src="lake_mead.jpg" title="Lake Mead in a speeding car." width="300" height="201" />

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

Это очень интересный скрипт и, я думаю, многим нашим посетителям он пригодится.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.sixrevisions.com
Перевел: Максим Шкурупий
Урок создан: 19 Июня 2009
Просмотров: 35620
Правила перепечатки

5 последних уроков рубрики "Mootools"

  • Создание меню при помощи MenuMatic 0.68.3

    Создание горизонтального и вертикального меню при помощи MenuMatic 0.68.3

  • Анимированные закладки с использованием MooTools

    Один из возможных способов поместить много контента на одно небольшое место - это использование системы закладок. Данный урок покажет как создать систему анимированных закладок с использованием CSS, куки и анимированного переключения панелей.

  • Выезжающая панель для сайта на Mootools

    Изучив этот урок, Вы научитесь делать компактную выплывающую панель для сайта. Разрабатывать ее мы будем с помощью Mootools, ну и конечно же не обойдемся и без CSS-стилей, которые будут играть здесь роль дизайнинга панели

  • Увеличение / Уменьшение текстовых полей с помощью MooTools

    Короткий урок про то, как добавить к любому текстовому полю возможность увеличения или уменьшения.

  • Multi-Select c помощью MooTools

    В этом уроке речь пойдет о переносе выбранных опций из одного multi-select в другой. Думаю, что подобный виджет вы уже видели. Обычно он применяется на сайтах объявлений и регистрации в каталогах, где ваше объявление (ваш сайт) подходит для размещения в нескольких рубриках. В этом уроке мы реализуем подобный виджет с помощью Mootools.

^ Наверх ^