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

Скрипт: меняющийся при обновлении страницы логотип
Вполне вероятно, что вы не раз сталкивались с подобным эффектом, бродя по просторам 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>

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

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

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

Script: Changing the page is refreshed logo

 

It is likely that you are not just faced with a similar effect, wandering the expanses of the Internet: you visit a website or forum, go from page to page and for each transition or refresh the page picture in the logo changes randomly. Of course, in such saitostroitel’stva «chip» is not too important, and often perfectly possible to do without it. Nevertheless, it can add some variety to your design.

 

In renewing these logos, you can also write some information that your guests will get acquainted with the updated page. This you can do in Photoshop or another graphics program, putting labels on your pictures.

 

Scripts, which I will introduce you equally can be mounted at any position on the page of your site or forum. In the previous lesson, where I talked about creating simple photo albums, the user changes the picture by pressing the «Next», and here the new image appears every time you refresh the page.

 

Because it would be a javascript, immediately remind one very important detail: do not forget that in javascript every comma, every quote, every sign is of paramount importance. If you happen to miss something — your script will not run.

 

I’ll show you two scripts with which changed the logo. These scripts are put between the <body> and </ body>, where you want to place a picture that will change as we update the page.

 

<script type = «text / javascript»>

var myLogos = new Array

 

(‘Address Pictures 1’, ‘2 pictures Address’, ‘Location 3 pictures’, ‘Location 4 pictures’);

 

// Address of logos can be any number. Importantly, do not forget the quotation marks, commas, and other icons. And of course, the logo is better to take an image of the same size.

 

var Idx = Math.floor (Math.random () * myLogos.length);

document.write (‘<img src = «‘ + myLogos [Idx] + ‘»>’);

</ script>

Ready script with the addresses of ten pictures, for example, looks like this:

 

<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 ‘);

 

// Address of the logo can be any number. Importantly, do not forget the quotation marks, commas, and other icons. And of course, the logo is better to take an image of the same size.

 

var Idx = Math.floor (Math.random () * myLogos.length);

document.write (‘<img src = «‘ + myLogos [Idx] + ‘»>’);

</ script>

Ready version can be found on this page

 

The second script that displays random image when you refresh the page (this time I took five images). This script is a little shorter and easier, but it has its own tricks.

 

Put this script as between the <body> and </ body>, where you want to place it.

 

<script language = «JavaScript»>

<! —

var a = Math.round (Math.random () * 4)

image = new Array ();

image [0] = «Image 1»

image [1] = «Picture 2»

image [2] = «Image 3»

image [3] = «Image 4»

image [4] = «Picture 5»

document.write («<img src =» + image [a] + «>»);

// ->

</ script>

Pay attention to the «mischief», which h said just above: pictures we have 5, but as the numbering in this script should always start with 0 — you are putting in Math.round (Math.random () * 4) figure 4.

 

Ready the script would look like this:

 

<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>

Ready version can be found on this page

 

And once again draw your attention: always check the availability of all the quotes and commas in the right places, as outlined in the code. Otherwise you will wonder why you did not get.

 

So you can put on your pages simply alternating with logos and pictures.