|
Случайное изображение при помощи
Java Script.
В этом уроке рассмотрим вставление случайного
изображения. Делать будем это при помощи JavaScript.
Конечный результат:
|
Обновите страницу несколько
раз для изменения изображения. |
Изображение будет меняться при обновлении
страницы.
Создаём несколько изображений одинокого размера.
(количество не имеет значение, главное, чтобы больше 2-х)
Создаём на Веб-Узле в папке "images"
папку. (Например "Banners")
В эту папку размещаем изображения, которые будут
случайным образом генерироваться.
Создаем папку в корне нашего Веб-узла, в которой
будет размещен script, который будет генерировать
изображения.
Называем эту папку например
"Script"
Скачиваем файл
fotofree.js
здесь
Если Файл не
скачивается, то его можно создать в ручную. Откройте блокнот. Нажмите
Файл/
Сохранить как...
Выберете
тип файла - Все файлы.
В поле имя файла введите
fotofree.js
Нажимаем
"Сохранить"
Размещаем этот файл в папке
"Script"
Открываем этот файл в веб-узеле
В строке var a=Math.round(Math.random()*10)
цифры в конце - количество фотографий.
Изменяем пути к фотографиям и их количество.
Конечный код:
var a=Math.round(Math.random()*10) -
здесь ставим количество фото
image = new Array();
image[0]="images/Banners/001.jpg" -
здесь и ниже прописываем пути.
image[1]="images/Banners/002.jpg"
image[2]="images/Banners/003.jpg"
image[3]="images/Banners/004.jpg"
image[4]="images/Banners/005.jpg"
image[5]="images/Banners/006.jpg"
image[6]="images/Banners/007.jpg"
image[7]="images/Banners/008.jpg"
image[8]="images/Banners/009.jpg"
image[9]="images/Banners/010.jpg"
document.write ("<img src="+image[a]+">"); |
Внимание!
При использовании данного кода на страницах, которые находятся
не в корне, код не будет работать! Для того, чтобы код работал везде,
пропишите полный URL адрес к изображениям. Например
- http://front-page.spb.ru/img_urok/001/015.jpg
Сохраняем файл
freefoto.js
Открываем Веб-Шаблон.
В месте, где будут располагаться фотографии
делаем новую таблицу.
Я решил, что фото будут
располагаться в шапке сайта под баннером.
нажмите, чтобы
увеличить.
Переходим в свойства таблицы и делаем параметры,
чтобы пользователь не видел конечную рамку:
Я задал строгую ширину в точках и поставил
выравнивание "По правому краю", т.к. если разрешение у пользователя будет
больше, чем моё, то у него не "поедет" изображение. (Эти настройки зависят от
Ваших изображений и того, где Вы хотите разместить у себя изображение на сайте.)
В параграф новой таблицы прописываем
html код:
Сам код:
<script language="javascript" type="text/javascript" src="http://Путь
к Вашему скрипту/fotofree.js"></script>
<script type="text/javascript"></script> |
Сохраняем Веб-Шаблон.
Проверяем правильность отображения изображений
после размещения файлов на сервере.
Проверка:
нажмите, чтобы
увеличить.
После обновления:
нажмите, чтобы
увеличить.
|
