Урок №3 "Как сделать рекламное мини слайд-шоу"

Следующий вариант работы с HTML-кодами это -  рекламное мини слайд-шоу. Что это такое и зачем оно Вам надо? Идея такова: внутри рамки сменяют друг друга одна картинка за другой. Зачем? Ну, здесь о-ч-ень большой полет фантазии!

Начинаем с того, что создаем рамку (окно) для слайд-шоу:

HTML-код  рамки такой:

где:

border:3px                                            - толщина рамки
solid grey                                              - цвет рамки grey
padding:5px                                         - расстояние между объектов внутри рамки и рамкой по вертикали
background:silver                              - заливка silver
width:110px;                                        - ширина окошка, высота выравнится автоматически благодаря padding
text-align: center                                - выравнивание объекта внутри рамки

---

 Далее: вставляем одну понравившуюся картинку внутрь рамки:

HTML-код  картинки такой:

где:

width=100 height=100                                                                - размер картинок
scrollamount=2                                                                            - скорость движения картинок
http://s011.radikal.ru/i318/1012/19/68813c83bd8b.png"           - адрес моей картинки (берем из программы "Радикал-фото")

---

Далее: одна картинка стала двигаться, теперь добавляем другую:

HTML-код  новой картинки такой:

Между адресами картинок обязательно оставляйте пробел!

---

Далее: так как это рекламное слайд-шоу, то каждая картинка должна вести читателя на определенный ресурс (или страницу блога, сайта)

HTML-код  новой картинки такой:

где:

                             - адрес страницы сайта на которую ссылается кар. №1

                             - адрес страницы сайта на которую ссылается кар.№2

Далее: самый последний штрих в рекламном бизнесе - сделать так, чтобы при наведении на картинку, ее движение останавливалось

HTML-код  новой картинки такой:

где:

onmouseover=this.stop() onmouseout=this.start() - останавливает картинку при наведении.

Все! Слайд-шоу готово! Успехов!