Приветствую вас, уважаемые коллеги!
Сегодня потребовалось сделать на сайте ротатор изображений 3D-коробок моих курсов и книг, чтобы они постепенно сменяли друг друга, а, при нажатии на то или иное изображение, вели на определенную страницу. Хочу поделиться с Вами как это осуществить при помощи простейшего скрипта.
Также такой ротатор можно использовать, если у Вас несколько партнерок, а места на сайте маловато. Да и не очень эстетично смотрится, когда весь сайт завешен рекламными баннерами. Ротатор позволяет воплотить эту идею более компактно, красиво и не так надоедливо для посетителей.
Как просто сделать ротатор изображений или баннеров?
1. Во-первых, определимся с тем, где будет располагаться наш ротатор и, в зависимости от этого, поймем, какого размера нам нужны изображения. Я, например, расположила его в сайдбаре, туда помещаются картинки не более 250px в ширину.
2. Итак, если с размерами определились, то загрузим изображения, которые мы будем крутить в ротаторе на свой сайт. Картинка или баннер могут находиться и на другом сайте — неважно, нам просто нужно взять ее адрес.
Картинка в ротаторе будет отображаться в полном размере, поэтому, если она велика для сайдбара, например, то сразу отредактируйте ее в графическом редакторе, допустим, в фотошопе. Если нет своего, воспользуйтесь аналогичным онлайн сервисом.
3. Выявите и запишите в текстовый файл все адреса изображений, которые будут в ротаторе (у нас для примера их будет 4)
4. Дальше идем Внешний вид — Редактор и выбираем Заголовок (header.php) !Во избежания несчастных случаев скопируйте на время весь код этого файла в текстовый файлик на Рабочий стол. Если операция пройдет успешно и пациент (то биш — сайт) будет жив, сможете удалить этот файл. А если случится непредвиденное — реанимируйте, то есть верните все на место.
В этот файл добавим вот такой код (я добавила в самый конец, чтобы не нагружать верхнюю часть лишними скриптами):
<script language=”JavaScript” type=”text/javascript”>
URL=new Array
URL[0]=”news.php”
URL[1]=”script.php”
URL[2]=”useful_site.php”
URL[3]=”statistics.php”
image_ID=new Array
image_ID[0]=”image/img_1.png”
image_ID[1]=”image/img_2.png”
image_ID[2]=”image/img_3.png”
image_ID[3]=”image/img_4.png”
var banner=3
var last_banner=(URL.length-1)
var pause=2000
function Rotate(image_num) {
if (banner==last_banner) banner=0
else banner++
document.images[image_num].src=image_ID[banner]
window.setTimeout(‘Rotate(“banners”)',pause);
}
</script>
5. Дальше идем Внешний вид — Виджеты, берем виджет Текст, перетаскиваем его в правую колонку на то место, где будет находиться ротатор. Пишем заголовок, а в пустое поле вставляем вот такой код:
<div align=”center”>
<a href=”javascript:document.location=(URL[banner])”>
<img name=”banners” src=”image/img_1.png”>
</a>
</div>
И, для того, чтобы наш скрипт включился, добавим туда же, в виджет еще один код:
<script language=”JavaScript” type=”text/javascript”>
Rotate(‘banners');
</script>
7. Смотрим на результат — все должно работать. Если нет — повторите все сначала, может где-то ошиблись.
Теперь в любое место достаточно поставить вот эту часть кода:
<div align=”center”>
<a href=”javascript:document.location=(URL[banner])”>
<img name=”banners” src=”image/img_1.png”>
</a>
</div>
чтобы увидеть свой ротатор (убрала, так как два одновременно не работают — в сайдбаре отключается)==>>
В коде есть цифры, изменяя которые можно регулировать частоту смены картинок или баннеров:
Я поставила 4000, чтобы не было слишком частого мелькания
Рабочий ротатор баннеров скрипт
Надеюсь, вам не трудно будет теперь установить на своем сайте ротатор баннеров или картинок. А если у вас на
сайте работает сразу несколько рекламных баннеров, объедините их таким образом в один ротатор — в результате
сэкономите место на сайте и внешне все будет смотреться благородно, да и хомячкам свобода
Кстати, не только хомячки крутятся в колесах. В Индии такая напряженка с электричеством, что там нанимают человеческую силу, чтобы крутить колесо обозрения:
Желаю Вам такой жизни, чтобы не крутиться ни как белка, ни как хомяк, ни как эти индийцы в колесе!
