Дата публикации:

Как просто сделать ротатор изображений или баннеров?

1. Во-первых, определимся с тем, где будет располагаться наш ротатор и, в зависимости от этого, поймем, какого размера нам нужны изображения. Я, например, расположила его в сайдбаре, туда помещаются картинки не более 250px в ширину.

2. Итак, если с размерами определились, то загрузим изображения, которые мы будем крутить в ротаторе на свой сайт. Картинка или баннер могут находиться и на другом сайте — неважно, нам просто нужно взять ее адрес.

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

3. Выявите и запишите в текстовый файл все адреса изображений, которые будут в ротаторе (у нас для примера их будет 4):

4. Дальше идем Внешний вид — Редактор и выбираем   Заголовок (header.php)  !Во избежания несчастных случаев скопируйте на время весь код этого файла в текстовый файлик на Рабочий стол . Если операция пройдет успешно и пациент (то биш — сайт) будет жив, сможете удалить этот файл. А если случится непредвиденное — реанимируйте, то есть верните все на место.

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

<script language="JavaScript" type="text/javascript">  URL=new Array   URL="news.php"   URL="script.php"   URL="useful_site.php"   URL="statistics.php"  image_ID=new Array   image_ID="image/img_1.png"   image_ID="image/img_2.png"   image_ID="image/img_3.png"   image_ID="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.src=image_ID  window.setTimeout('Rotate("banners")',pause); } </script>

5. Далее покажу на картинке что поменять в этом коде на свое:

6. Дальше идем Внешний вид — Виджеты , берем виджет Текст , перетаскиваем его в правую колонку на то место, где будет находиться ротатор. Пишем заголовок, а в пустое поле вставляем вот такой код:

<div align="center">  <a href="javascript:document.location=(URL)">   <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)">   <img name="banners" src="image/img_1.png">  </a> </div>

чтобы увидеть свой ротатор (убрала, так как два одновременно не работают — в сайдбаре отключается)==>>