Ротатор баннеров и изображений для iWeb | Интернет интересности и полезности

Ротатор баннеров и изображений для iWeb

Доброго времени суток, дорогие друзья! Сегодня предлагаю поговорить о том, как создать и разместить ротатор баннеров или любых изображений на сайте, разрабатываемом в редакторе Apple iWeb.

Ротатор баннеров и изображений для iWeb

 

Использовано фото: Ryoichi Tanaka

В интернете под термином «ротация» обычно подразумевают случайный показ контента на страницах интернет ресурса. В нашем случае, этим контентом выступят любые изображения или рекламные баннеры, которые будут случайным образом меняться при каждом обновлении веб-страницы, на которой они размещены. При этом, каждое изображение или баннер, естественно, будет представлять из себя ссылку, кликнув по которой, пользователь сможет перейти по указанному в ней адресу.

Область применения и пример ротатора

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

Чтобы показать, как может выглядеть ротатор, я создал простую «демку», в которой «крутятся» изображения со ссылками на соответствующие разделы сайта http://apple.ru: при обновлении данной страницы, эти изображения меняются, также меняются и адреса соответствующих ссылок.

Смотреть демо

Обновите страницу: изображение

сменится на другое в случайном порядке (все ссылки работают)

 

Естественно, это только пример, в общем случае, формат изображений и их размер ни чем не ограничен. Изучив этот материал до конца, Вы сможете создать ротатор практически любого размера: все зависит только от вашего желания и фантазии.

Скрипт, на основе которого создан ротатор, очень простой и легко настраиваемый: после минимального редактирования, он (точнее, его код) помещается в html-сниппет редактора Apple iWeb и начинает работать сразу же после публикации веб-страницы.

Кстати, ищется автор данного скрипта: с радостью размещу информацию о нем или его сайте в этом материале.

Настройка и размещение скрипта ротатора на страницах сайта

Теперь о том, как модифицировать скрипт и разместить ротатор на своем веб-ресурсе.

Для начала, подготавливаем баннеры (изображения), определяемся на какие веб-адреса они должны ссылаться. Размер изображений может быть любым, но желательно, чтобы он был одинаковым по вертикали и горизонтали. По умолчанию, скрипт «оперирует» c пятью изображениями, но, при желании, их количество легко увеличить. Создаем в корне сайта папку с названием banner и копируем в нее подготовленные файлы.

Копируем в буфер обмена код скрипта из окна, расположенного ниже. Запускаем текстовый редактор (отлично подойдет TextWrangler), создаем текстовый документ и вставляем в него код.

Настало время внести в код необходимые изменения:

  1. 1.Вместо http://example.com/ вставляем адреса страниц, на которые должен ссылаться соответствующий баннер;

  2. 2.Горизонтальные и вертикальные размеры width=’300′, height=’170′ баннеров / изображений меняем на свои (размеры указываются в пикселах). Если необходимо, также изменяем пути к файлам изображений (в представленном коде, изображения имеют названия banner1.gifbanner5.gif и размещаются в папке «banner», находящейся в корне сайта).

Копируем отредактированный код в буфер обмена. Запускаем редактор Apple iWeb и, в нужное место макета страницы, добавляем html-сниппет, в него вставляем скопированный код. Применяем изменения и публикуем страницу в локальную папку на своем компьютере. Если, на этом этапе работы, возникают какие-либо трудности, освежаем в памяти материалы: Использование iWeb: Применение html-сниппетов и Публикуем сайт на хостинге.

Открываем опубликованную страницу в любом веб-браузере, обновляя страницу, убеждаемся, что скрипт работает и изображения меняются. Если все правильно функционирует, можно «заливать» свой сайт на хостинг: поздравляю — у нас все получилось Рейтинг@Mail.ru .
Ну и напоследок небольшое задание: попробуйте модифицировать скрипт ротатора так, чтобы можно было использовать не пять, а, например, восемь изображений или баннеров, уверен, это Вы легко сделаете самостоятельно .