- Метки урока:
- изображения
Автоматическая подпись изображений с помощью MooTools
Этот урок расскажет Вам про то, как сделать автоматическую подпись под рисунком с помощью MooTools.
Для всего этого нам понадобится всего несколько строк кода. Обязательно между тегами <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.