Как это сделано на Дафтере #2: случайная новогодняя картинка в шапке / Как это сделать? / Дафтер

Добрый день, друзья! Совсем скоро наступит Новый Год и все к нему готовятся, в том числе и сайты. Есть разные варианты украшений: снег, новогодний логотип… Но мы (как и всем известный ВКонтакте) решили добавить рандомное/случайное изображение около названия в шапке. О том, как мы это сделали, речь и пойдет.

Итак, что мы хотим: случайное изображение при каждой перезагрузке страницы в шапке. Решения можно оформить как на php так и на JavaScript. Но нам больше понравился js, да и задача не настолько сложная.

Для начала вспомним, как можно получить рандомное число на js:

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

1	var a=Math.round(Math.random()*5)

Так, получили случайное число и присвоили его переменной a. Дальше мы создаем массив под названием image. В него мы поместим адреса на картинки. Смотрите сами:

image = new Array();
image[0]="/site/newyear1.png"
image[1]="/site/newyear2.png"
image[2]="/site/newyear3.png"
image[3]="/site/newyear4.png"
image[4]="/site/newyear5.png"
image[5]="/site/newyear6.png"

image = new Array();

image[0]="/site/newyear1.png"

image[1]="/site/newyear2.png"

image[2]="/site/newyear3.png"

image[3]="/site/newyear4.png"

image[4]="/site/newyear5.png"

image[5]="/site/newyear6.png"

Думай, дальнейший смысл и реализация понятна. Мы выводим картинку на страницу так:

document.write ("<img style='height: 40px;float: left;margin: -7px;' src="+image[a]+">");

1	document.write ("<img style='height: 40px;float: left;margin: -7px;' src="+image[a]+">");

Я задал параметры height, float и margin в style. Они необязательны, я всего лишь подстроил таким образом картинку специально для шапки Дафтера. Весь код:

<script>
var a=Math.round(Math.random()*5)
image = new Array();
image[0]="/site/newyear1.png"
image[1]="/site/newyear2.png"
image[2]="/site/newyear3.png"
image[3]="/site/newyear4.png"
image[4]="/site/newyear5.png"
image[5]="/site/newyear6.png"
document.write ("<img src="+image[a]+">");
</script>