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

Мы с вами уже многое научились делать с помощью различных 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, в которую добавить свои собственные фотографии.

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

This entry was posted on Понедельник, Сентябрь 21st, 2009 at 9:02 пп and is filed under HTML теги. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

12 Responses to “Создание рекламного мини слайд-шоу”

  1. Тимур Купаев:

    супер

  2. Алексей:

    спасибо))

  3. avv-blogger:

    Никак не получается заставить картинку двигаться на моем сайте, может у Вас в коде есть ошибка ? Если Вас не затруднит, не могли бы Вы мне помочь решить эту проблемку ? Сайт находится на народе ! Заранее Вам благодарен, если можно ответить мне на mail – rio@fax.ru

  4. Виталий:

    Алексей,сделал всё,как Вы советовали. Получилось.А как сделать,чтобы при ширине окошка 700 и ширине фото 100 ( при этом фотографий 7 и больше)все картинки двигались по всей ширине окошка вагончиком, а не как вот на этом скрине http://img2.immage.de/300155.jpgЗаранее спасибо.

  5. Алексей:

    avv-blogger, ошибки быть не должно, поскольку у других получилось… Да и составлял я сам, все коды проверены – у меня же картинки двигаются! Прошу прощения за поздний ответ…

  6. Алексей:

    Виталий, пока не знаю как это сделать. Если узнаю, то напишу!

  7. фея Winx клуба:

    я прочитала эту статью и хочу сделать слайды не такие но мне не кто не хочет говорить как их сделать не 12 лет у меня есть блог

  8. Алексей:

    Функция слайд-шоу есть в гаджетах блоггера, попробуй воспользоваться ими

  9. Любовь Владимировна:

    Алексей, здравствуйте. Воспользовалась Вашим советом. Всё получилось прекрасно. И фоток больше добавила, и по ширине блога сделала. Но хотела бы ещё, чтобы фотографии крутились непрерывно, то есть не было промежутка даже перед первой фотографией. Я видела такие слайд-шоу.Например:http://www.smoothdivscroll.com/ Можно ли это сделать в вашем варианте?

  10. Ольга:

    Большое спасибо, ваши стать мне так помогают!!!ОЧЕНЬ

  11. Алла:

    Спасибо. Но одно жаль – после установки этот слайдер наводит мысли о сайтах 1995-го года выпуска. ))))

  12. Владимир:

    Не получается сделать две картинки. Только одна. Как правильно вставить код второй , третьей, четвёртой картинки?

Прокомментировать запись: