На Главную
Статьи современных авторов
Художественные произведения
Библиотека
История Европы и Америки 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 г.
|