Следующий вариант работы с HTML-кодами это - рекламное мини слайд-шоу. Что это такое и зачем оно Вам надо? Идея такова: внутри рамки сменяют друг друга одна картинка за другой. Зачем? Ну, здесь о-ч-ень большой полет фантазии!
Начинаем с того, что создаем рамку (окно) для слайд-шоу:
HTML-код рамки такой:
| <div style="border:3px solid grey; padding:5px; background:silver; width:110px; text-align: center;"></div> |
где:
border:3px - толщина рамки
solid grey - цвет рамки grey
padding:5px - расстояние между объектов внутри рамки и рамкой по вертикали
background:silver - заливка silver
width:110px; - ширина окошка, высота выравнится автоматически благодаря padding
text-align: center - выравнивание объекта внутри рамки
Далее: вставляем одну понравившуюся картинку внутрь рамки:
HTML-код картинки такой:
| <div style="border:3px solid grey; padding:5px; background:silver;width:110px; text-align: center;"><marquee width=100 height=100 scrollamount=2><img src=" http://s011.radikal.ru/i318/1012/19/68813c83bd8b.png"gif"> </marquee></div> |
где:width=100 height=100 - размер картинок
scrollamount=2 - скорость движения картинок
http://s011.radikal.ru/i318/1012/19/68813c83bd8b.png" - адрес моей картинки (берем из программы "Радикал-фото")
Далее: одна картинка стала двигаться, теперь добавляем другую:
HTML-код новой картинки такой:
| <div style="border:3px solid grey; padding:5px; background:silver;width:110px; text-align: center;"><marquee width=100 height=100 scrollamount=2> <img src="http://s011.radikal.ru/i318/1012/19/68813c83bd8b.png"gif"> <img src="http://s54.radikal.ru/i146/1012/cd/c1d00f9697d8.png"gif" > </marquee></div> |
Между адресами картинок обязательно оставляйте пробел!
Далее: так как это рекламное слайд-шоу, то каждая картинка должна вести читателя на определенный ресурс (или страницу блога, сайта)
HTML-код новой картинки такой:
| <div style="border:3px solid grey; padding:5px; background:silver;width:110px; text-align: center;"><marquee width=100 height=100 scrollamount=2> <a href="http://cezare.sehost.ru/home/"> <img src="http://s011.radikal.ru/i318/1012/19/68813c83bd8b.png"gif"> <a href="http://cezare.sehost.ru/page11"> <img src="http://s54.radikal.ru/i146/1012/cd/c1d00f9697d8.png"gif" > </marquee></div> |
где:
<a href="http://cezare.sehost.ru/home/"> - адрес страницы сайта, на которую ссылается картинка №1
<a href="http://cezare.sehost.ru/page11"> - адрес страницы сайта, на которую ссылается картинка №2
Далее: самый последний штрих в рекламном бизнесе - сделать так, чтобы при наведении на картинку, ее движение останавливалось
HTML-код новой картинки такой:
| <div style="border:3px solid grey; padding:5px; background:silver;width:110px; text-align: center;"><marquee onmouseover=this.stop() onmouseout=this.start() width=100 height=100 scrollamount=2> <a href="http://cezare.sehost.ru/home/"> <img src="http://s011.radikal.ru/i318/1012/19/68813c83bd8b.png"gif"> <a href="http://cezare.sehost.ru/page11"> <img src="http://s54.radikal.ru/i146/1012/cd/c1d00f9697d8.png"gif" > </marquee></div> |
где:
onmouseover=this.stop() onmouseout=this.start() - останавливает картинку при наведении.
Все! Слайд-шоу готово! Успехов!