Создание рекламного мини слайд-шоу

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

Разумеется, для этого подберем картинки одного размера. Я, например, не буду далеко ходить, а воспользуюсь аватарами. Чтобы долго с ними не мучиться, то отберем только случайные две.

1. Создаем окно для слайд-шоу. Нечто подобное мы уже создавали, когда делали красивые шрифты.

Код такого окошка будет следующий:

<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 - выравнивание объекта внутри рамки.

2. Добавляем одну движущуюся картинку внутрь рамки:

Получаем код:

<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://..........gif"></marquee></div>

где width=100 height=100 - размер картинок;
scrollamount=1 - скорость движения картинок.

3. Все, картинка стала двигаться, добавим вторую

  

Получим код:
<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://..........gif">    <img src="http://.........gif"></marquee></div>

где    - пробелы между картинками.

4. Сделаем так, чтобы каждая картинка ссылалась на определенную страницу:

  

Код:

<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://ty-blogger.blogspot.com/"><img src="http://.........gif"></a> <a href="http://ty-blogger.blogspot.com/2001/09/blog-post_21.html"><img src="http://............gif"></a></marquee></div>

где http://ty-blogger.blogspot.com/ и http://ty-blogger.blogspot.com/2001/09/blog-post_21.html - адреса страниц, на которые ссылаются картинки

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

  

Вот что получим:

<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://ty-blogger.blogspot.com/"><img src="http://www.avataro.ru/files/avatar/foto_38644.gif"></a> <a href="http://ty-blogger.blogspot.com/2001/09/blog-post_21.html"><img src="http://www.avataro.ru/files/avatar/318330_1452511_5499044.gif"></a></marquee></div>

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

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

А кто желает, может остановиться уже на п.3, в которую добавить свои собственные фотографии.

Я как всегда надеюсь на то, что вы сочли мой труд полезным. Если вы видите ошибки, то обязательно сообщайте мне в комментариях. Спасибо.

----------------------------------------------
klemba объявила конкурс на klemba.livejournal.com/301413.html! Вам всего лишь нужно написать один комментарий и выиграете 2 билета на шоу Varekai в Москве. Такого цирка вы еще не видели! Учавствуем в крнкурсе и получаем призы!

Компания "Лидер Переезд" поможет вам осуществить переезд, как квартирный, так и офисный или дачный! Наша компания поможет вам правильно запаковать вещи и предложит своих грузчиков. Все ваши проблемы мы возьмем на себя!

Хотите узнать, как можно угодить мужу-американцу в постели? Читайте блог "Голая правда о жизни русских жен за границей", там вы узнаете что американцы очень любят! Это интересно!
-----------------------------------------------

С этой темой еще читают:

.