Урок 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">

</script>

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

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

<script language="JavaScript">

</script>

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

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

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

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

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

Наверх