Добрый день, друзья! Совсем скоро наступит Новый Год и все к нему готовятся, в том числе и сайты. Есть разные варианты украшений: снег, новогодний логотип… Но мы (как и всем известный ВКонтакте) решили добавить рандомное/случайное изображение около названия в шапке. О том, как мы это сделали, речь и пойдет.
Итак, что мы хотим: случайное изображение при каждой перезагрузке страницы в шапке. Решения можно оформить как на php так и на JavaScript. Но нам больше понравился js, да и задача не настолько сложная.
Для начала вспомним, как можно получить рандомное число на js:
1 |
var a=Math.round(Math.random()*5) |
Так, получили случайное число и присвоили его переменной a. Дальше мы создаем массив под названием image. В него мы поместим адреса на картинки. Смотрите сами:
1 2 3 4 5 6 7 |
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" |
Думай, дальнейший смысл и реализация понятна. Мы выводим картинку на страницу так:
1 |
document.write ("<img style='height: 40px;float: left;margin: -7px;' src="+image[a]+">"); |
Я задал параметры height, float и margin в style. Они необязательны, я всего лишь подстроил таким образом картинку специально для шапки Дафтера. Весь код:
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
На этом все. Чуть не забыл — если вы хотите использовать те же картинки, что и у нас. Да-да, мы не сами их рисовали 🙂 Пользуйтесь на здоровье.
В заключение хотим пожелать всем счастливого нового Года и Рождества; не забывайте про Дафтер и его проекты! Удачи!