В этом разделе мы поэтапно расскажем, как делался сайт "Созвездие Близнецов"


НазадСодержаниеВперёд

Урок 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-2009 г.
По вопросам использования материалов сайта обращаться по адресу: Kippari2007@rambler.ru



Навигация по урокам

Работа с хостингом

Регистрация на Narod.ru

Регистрация на платном хостинге

Переход с одного платного хостинга на другой


Вопросы по таблицам

Таблица как основа для страницы сайта: табличные теги "width", "border"

Таблица как модуль для ссылок: ячейки и строки ("td" и "tr"), значения атрибута "align"

Атрибут "VALIGN" и его значения. Атрибуты "cellpadding" и "cellspacing"

Сложные таблицы. Атрибуты атрибуты "colspan" и "rowspan"


Форматирование текста

Выравнивание текста (атрибут "align"). Имя, цвет, размер шрифта (font: family, face, color, size). Абзац ("p"). Как задать отступ красной строки (немного о стиле CSS)

Как прописать шрифты и заголовки в стилях CSS

Амперсанды. Текстовые теги. Специфические символы


Делаем ссылки

Как написать код ссылки

Как задать внешний вид ссылки (шрифт, цвет, размер и пр.) в стилях CSS

Что нужно сделать, чтобы на одной странице они были разного цвета, шрифта, размера и пр. (в CSS)

Внутристраничные ссылки или закладки (якоря)

Ссылка "Наверх"


Картинки (логотипы, баннеры, фон)

Загрузка изображений на Radikal.ru

Картинки в тексте

Как сделать работающую кнопку (баннер)

Как установить логотип, задать цвет фона (таблицы, страницы сайта), установить фоновое изображение. Атрибуты bgcolor и background

Как установить логотип через документ стилей CSS

Масштабирующиеся логотипы

Масштабирующиеся рамки в обрамлении таблицы (страницы)

Размещение картинки на странице с текстом

Неподвижный фон


Вопросы по JavaScript и динамическому html

Скрытый текст с помощью JavaScript и динамического html

Бегущая строка

Простейшие фотоальбомы

Сменяющийся логотип


Несколько советов по установке форумного движка SMF на платный хостинг