"Бегущая строка" или Слайдшоу своими руками

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

Текст движется
По умолчанию строка движется справа налево.
Чтобы изменить направление движения, используем в тэге атрибут direction, задающий направление движения.

Для движения направо:


Для движения вверх:


Для движения вниз:


Кроме команды direction тэг может содержать атрибут behavior, задающий поведение бегущей строки.

behavior="scroll" –прокрутка текста. Это значение можно не указывать, т.к. текст по умолчанию всегда прокручивается.

behavior="slide" – Прокрутка текста с остановкой

behavior="alternate" – Движение от края к краю

Другие aтрибуты:
scrollamount="1" – скорость движения строки. Может изменяться от 1 до 9.
scrolldelay="20" – Этот атрибут задаёт временной интервал в миллисекундах между шагами бегущей строки.
width="200" – ширина бегущей строки в пикселях или процентах от ширины экрана.
height="17" – высота бегущей строки в пикселях или процентах. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).
bgcolor="#E9E9D1" – Задаёт фоновый цвет бегущей строки. (Вместо E9E9D1 подставляйте свой цвет).
loop="2" – задаёт число проходов бегущей строки. (Если указать "2" то два раза текст проедет и больше показываться не будет, только если ещё раз обновить страницу).
hspace="70" - атрибут задает поле в пикселах справа и слева от бегущей строки.
vspace="70" - атрибут задает отступ в пикселах выше и ниже бегущей строки.
Чтобы двигалась картинка, заменим текст между тегами ... ссылкой на картинку:

Теперь приступим к изготовлению слайдшоу.
1. Заходим в альбом с нужными картинками на Яндекс.Фотках, нажимаем на ссылку "получить код", отмечаем все нужные изображения.
2. Внизу страницы в верхней строке последнего окошка с кодами выбираем нужный размер фоток. Подбирая картинки для слайдшоу, помните, что чем больше размер и количество фото, тем "тяжелее" будет ваше произведение, тем дольше будет грузится страница со слайдшоу..
3. Копируем содержимое окошка с кодами в любой текстовый файл. Всё, страницу с Яндекс.Фотками можно закрыть.
4. Вы помните, что под бегущей сторокой можно сделать цветной фон, а вот фон из картинки сделать нельзя. Но это не повод отказываться от использования красивых текстур в качестве подложки для слайд-шоу. Создадим таблицу, состоящую из одной ячейки. Размер ячейки подбирайте экспериментально, исходя из размеров картинок в будущем слайд-шоу. Установите для таблицы фоновую картинку.

5. Формируем слайдшоу.
5.1. Открываем файл с подготовленным списком кодов картинок и каждой из них дописываем теги следующим образом:

5.2. Определяемся с параметрами слайдшоу (ширина слайдшоу 130 px, движение вправо, скорость движения 3) и пишем код:


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

6. Вставляем код слайдшоу внутрь приготовленного кода таблички-рамочки:



Готовое слайдшоу.
Вы можете сделать своё слайдшоу из картинок или фото любого (разумного) размера!
Удачи и творческих успехов, друзья!

http://dkartasheva.ya.ru/replies.xml?item_no=2111