Урок. Ротатор изображений для сайта.
Серия дополнительных уроков.
Доброго времени суток!
Для чего нужны ротаторы картинок и как их использовать?
С помощью ротатора картинок можно показывать например фото презентацию ваших работ, или услуг, сделать слайд шоу, собрать несколько картиночных баннеров и показывать их чередуя по очереди, да в общем красивая штука, вкючайте свою фантазию.
Сегодня я Вам покажу и научу вас создавать ротаторы картинок на своём сайте.
Немного пред истории.
В сети интернет полно всяких различных кодов для ротации картинок, в поисках простого, кода написанного на "javascript" я провёл целый вечер, анализируя проверяя и рассматривая их коды, я пришёл к мнению:
1) Многие сайты публикуют просто не рабочие коды и примеры.
2) Предлагают голый код без описания как его вставит к себе на сайт.
3) Сложные и замудрённые коды ротаторов.
4) Устаревшие, значит не у всех, и не во всех браузерах такой ротатор будет работать.Мой вывод: Написать самому или обратиться к помощи профессионалов.
Так как я самостоятельно не умею писать скрипты и для меня это трудно пока, я решил прибегнуть к помощи профессионала. Вот здесь я и вспомнил про специалиста своего дела:
Андрея Бернацкого. Один из авторов проекта «Основы Самостоятельного Сайтостроения».
Адрес в сети — www.WebForMyself.comПо началу, его ротатор мне показался сложным, но просмотрев множество других, я понял, что он лучше и проще в настройках. Да и работа самого ротатора вызывает восхищение.
Вот его замечательный пример ротатора картинок мы и будем разбирать.
Вот пример ротатора, который мы будем разбирать.
Урок Андрея про установку ротатора смотрите на сайте:
http://webformyself.com/rotator-kartinok/
Пример ротатора который мы будем делать для сайта, просмотреть
можно на странице обучающего сайта (Размер ротатора 600х400 px.).http://showsbike.narod.ru/foto_rotator
Давайте по порядку, что нам потребуется:
1) Нам нужны фотографии которые мы будем показывать. Они должны быть все одного формата и размера. (В своём ротаторе я использовал 9 фото, размером 400 х 250 пикселей, формат моих фото: gif. Вы можете и jpg использовать.)
Все фото я подготовил с помощью программы фотошоп.
2) Вносим изменения в исходные файлы.
Скачать исходники ротатора можно здесь
В скачивоемом архиве я положу полный исходник с примером от Андрея Бернацкого, и исходники и код для вставки учебного ротатора который мы делаем.Далее смотрим видео и повторяем за мной.
Внимание!
Если вы испытываете трудности в создании картинок одинакового размера, то специально для вас я записал маленький видеоурок по работе в программе фотошоп.
Просмотреть данный урок можно здесь
Да, на последок сделаю подсказку! К каждой картинке можно прикрутить ссылку и при клике на каждое изображение будет открываться новая страница.
Единственный совет, сделаете так чтобы, каждая страница открывалась при этом в новом окне. То есть пользователь нажимает по ссылке, она открывается в новом окне, а ротатор продолжает работать в своем окне, и его видит пользователь.
Выглядеть это будет примерно так:
Вместо простого вывода картинки: <img src="http://bike-show.narod2.ru/rotator/foto1.gif" alt="Байк Шоу 2010" width="400" height="250" class="galery" />
Вставляем ссылку на данное изображение: <a href="http://имя_сайта" target="_blank"><img src="http://bike-show.narod2.ru/rotator/foto1.gif" alt="Байк Шоу 2010" width="400" height="250" class="galery" /></a>
Если вам понравились уроки от Андрея Бернацкого, то можете,
подписаться на бесплатную рассылку перейдя по ссылке сюда
Полезный сайтик по html коду.
Удачи в САЙТА СТРОЕНИИ!
У нас на сайте можно подписаться на обучающий видеокурс "Делаем Сайт Самостоятельно На Яндекс Народ"
Вы узнаете: Как создать сайт на народе. Изучите создание сайта на народе в конструкторе сайтов.
Научитесь, как сделать сайт бесплатно и быстро.
Copyright © 2010-2012. Александр Новиков. Все права защищены.
