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

















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

Новый Год



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



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

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"


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

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>




На этом все. Чуть не забыл — если вы хотите использовать те же картинки, что и у нас, то берите их здесь. Да-да, мы не сами их рисовали :) Пользуйтесь на здоровье.



В заключение хотим пожелать всем счастливого нового Года и Рождества; не забывайте про Дафтер и его проекты! Удачи!