ГЛАВНАЯ СТРАНИЦА | ВХОД
Свой блог я хочу посвятить таким же новичкам в сети, каким являюсь и я.
Здесь я буду делиться с вами всем тем, чему я научился за время существования моего блога.
И пусть опытные Веб-мастера не удивляются банальности моих тем, ведь я еще сам "чайник", поэтому и делиться советами буду прежде всего с такими же новичками, как и я.
Надеюсь, что мои советы кому-то помогут.
С уважением, Алексей

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

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

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

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




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



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

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



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



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

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

  


Получим код:


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

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

  


Код:



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

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

  


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



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

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

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

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

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

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

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

-----------------------------------------------

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

11 комментариев:

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

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

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

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

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

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

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

    ОтветитьУдалить
  8. Спасибо! Очень подробно и грамотно написано. Полезный материал.

    ОтветитьУдалить
  9. Это единственная статья которая мне реально помогла. Автор, а можно сопутствующий вопрос? Как сделать так, чтобы картинки в этом слайд-шоу присутствовали постоянно? Ато как происходит перезагрузка страницы, выплывает серое пустое окно. Хотелось бы использовать ваш метод в создании меню инет-кинотеатра (сразу под шапкой)

    ОтветитьУдалить

В комментариях оставляем мнения и советы к данной статье. Все вопросы задаем ТОЛЬКО на ФОРУМЕ. Отвечаю и стараюсь помочь всем!