Мануалы

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

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

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

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

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

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

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

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

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

НА СЛЕДУЮЩЕЙ СТРАНИЦЕ БОЛЬШЕ ИНФОРМАЦИИ