В преддверии нового года хочу предложить вам интересную гирлянду, для вашего форума. Гирлянда у нас будет не как обычно, с помощью одной *gif картинки, а с помощью: CSS, HTML, JavaScript и одной *png картинки.

Открываем overall_header.html, перед тегом </head> ставим:

Код: Выделить всё

<script type="text/javascript"> 
function garland() { 
nums = document.getElementById('nums_1').innerHTML 
if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'} 
if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'} 
if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'} 
if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'} 
} 

setInterval(function(){garland()}, 600) 
</script>
600 - это скорость мерцания нашей гирлянды. Чем выше число, тем медленнее мерцание

После <body> ставим:

Код: Выделить всё

<div id="garland" class="garland_4"><div id="nums_1">1</div></div>
В тему вашего стиля, в конец добавляем:

Код: Выделить всё

#garland {
	position: absolute;
	top: 0;
	left: 0;
	background-image:  url('ссылка на изображение');
	height: 36px;
	width: 100%;
	overflow: hidden;
	z-index: 99
} 
#nums_1 {
	padding: 100px;
} 
.garland_1 {
	background-position: 0 0;
} 
.garland_2 {
	background-position: 0 -36px;
} 
.garland_3 {
	background-position: 0 -72px;
} 
.garland_4 {
	background-position: 0 -108px;
}
Изображение:
Мерцающая гирлянда для вашего форума. - christmas-lights.png
Мерцающая гирлянда для вашего форума. - christmas-lights.png (17.72 КБ) 1220 просмотров
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.

Похожие темы