Литература и жизнь
Поиск по сайту

На Главную
Статьи современных авторов
Художественные произведения
Библиотека
История Европы и Америки XIX-XX вв
Как мы делали этот сайт
Форум и Гостевая
Полезные ссылки
Статьи на заказ



Монастыри и храмы Северо-запада



Урок 25. Скрипт: меняющийся при обновлении страницы логотип

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

На подобных обновляющихся логотипах можно так же написать какую-нибудь информацию, с которой ваши гости будут знакомиться при обновлении страницы. Это вы можете сделать в программе Photoshop или другом графическом редакторе, наложив надписи на ваши картинки.

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


Поскольку речь будет идти о javascript, напоминаю сразу же об одной очень важной детали: не забывайте, что в javascript каждая запятая, каждая кавычка, каждый знак имеет огромное значение. Если вы случайно что-то пропустите - ваш скрипт не будет работать.

Я покажу вам два скрипта, с помощью которых меняется логотип. Ставятся эти скрипты между <body> и </body> , там, где вы пожелаете расположить картинку, которая будет меняться по мере обновления страницы.

<script type="text/javascript">
var myLogos = new Array

('Адрес картинки 1', 'Адрес картинки 2', 'Адрес картинки 3', 'Адрес картинки 4');

//Адресов логотипов может быть сколько угодно. Главное, не забывайте о кавычках, запятых и прочих значках. И разумеется, для логотипа лучше брать изображения одного размера.

var Idx = Math.floor(Math.random() * myLogos.length);
document.write('<img src="'+myLogos[Idx]+'"> ');
</script>


Готовый скрипт с адресами десяти картинок, например, будет выглядеть так:

<script type="text/javascript">
var myLogos = new Array

('http://dugward.ru/foto/Kosha1.jpg', 'http://dugward.ru/foto/Kosha2.jpg', 'http://dugward.ru/foto/Kosha3.jpg', 'http://dugward.ru/foto/Kosha4.jpg', 'http://dugward.ru/foto/Kosha5.jpg', 'http://dugward.ru/foto/Kosha6.jpg', 'http://dugward.ru/foto/Kosha7.jpg', 'http://dugward.ru/foto/Kosha8.jpg', 'http://dugward.ru/foto/Kosha9.jpg', 'http://dugward.ru/foto/Kosha10.jpg', 'http://dugward.ru/foto/Kosha11.jpg');

//Адресов Логотипов может быть сколько угодно. Главное, не забывайте о кавычках, запятых и прочих значках. И разумеется, для логотипа лучше брать изображения одного размера.

var Idx = Math.floor(Math.random() * myLogos.length);
document.write('<img src="'+myLogos[Idx]+'">');
</script>


Готовый вариант можно посмотреть на этой странице

Второй скрипт, выводящий случайное изображение при обновлении страницы (на этот раз я взяла пять изображений). Этот скрипт выглядит немного покороче и попроще, но в нём есть свои каверзы.

Ставится этот скрипт так же между <body> и </body> , там, где вы пожелаете его расположить.

<script language="JavaScript">
<!--
var a=Math.round(Math.random()*4)
image = new Array();
image[0]="Картинка 1"
image[1]="Картинка 2"
image[2]="Картинка 3"
image[3]="Картинка 4"
image[4]="Картинка 5"
document.write (" <img src="+image[a]+"> ");
//-->
</script>


Обратите внимание на "каверзу", о которой ч говорила чуть выше: картинок у нас 5, но поскольку нумерация в этом скрипте всегда должна начинаться с 0 - то вы ставите в Math.round(Math.random()*4) цифру 4.

Готовый скрипт будет выглядеть так:

<script language="JavaScript">
<!--
var a=Math.round(Math.random()*4)
image = new Array();
image[0]="http://dugward.ru/foto/Kosha1.jpg"
image[1]="http://dugward.ru/foto/Kosha2.jpg"
image[2]="http://dugward.ru/foto/Kosha3.jpg"
image[3]="http://dugward.ru/foto/Kosha4.jpg"
image[4]="http://dugward.ru/foto/Kosha5.jpg"
document.write (" <img src="+image[a]+"> ");
//-->
</script>


Готовый вариант можно посмотреть на этой странице

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


Таким образом вы можете ставить на ваши страницы сменяющиеся логотипы и просто картинки.

Урок окончен.


Перейти к Уроку 26


© М.В. Гуминенко. 2008 г.

Наверх