Новогодний Санта

Санта Клаус
Спасибо: Тьме, за помощь с картинками, Павлу(rps'y) за напоминание в использовании css. Ну и Ренату, за показ в прошлом году своего кота А так же тем кто помогал в тестировании
Так первый пункт - вставляем jquery. Если он уже установлен от других скриптов, к примеру спойлера или выпадающего меню, то ставить его не нужно, если не установлен, то ставим в хтмл-верх

Код:

<script type="text/javascript" src="http://i.rusff.org.ru/f/ru/org/rusff/lib_module.js"></script>

Далее ксс

Код:

<style type="text/css">
#santa-block {
	display: block;
	position: fixed;	
	width: 133px;
	height: 400px;
	margin: 20em 0 0 -7em;
	z-index: 2;
	text-align: left;
	}
	
#santa-block #dialog {
	width: 225px;
	height: auto;
	float: right;
	display: none;
	position: absolute;
	bottom: 350px;
	left: 50px;
	font-size: 12px;
	color: red;
	}
#santa-block #dialog div.b1, #santa-block #dialog div.b2, #santa-block #dialog div.b3, #santa-block #dialog div.b4, #santa-block #dialog div.b5,
#santa-block #dialog div.b1 i, #santa-block #dialog div.b2 i, #santa-block #dialog div.b3 i, #santa-block #dialog div.b4 i, #santa-block #dialog div.b5 i, #santa-block#dialog div.b1 b, #santa-block #dialog div.b2 b, #santa-block #dialog div.b3 b, #santa-block #dialog div.b4 b, #santa-block #dialog div.b5 b,#santa-block #dialog div.b1 q, #santa-block #dialog div.b2 q, #santa-block #dialog div.b3 q, #santa-block #dialog div.b4 q, #santa-block #dialog div.b5 q {
	height: 1px;
	font-size: 1px;
	overflow: hidden;
	border-style: solid;
	border-width: 0 1px;
	border-color: #ff6569;
	display: block;
	background: #ffffff;
	}
#santa-block #dialog div.b1 {
	margin: 0 2px;
	background: #ff6569;
	border: none;
}
#santa-block #dialog div.b1 b {
	margin: 0 1px;
	background: #ffffff;
	border-color: #ff6569;
}
#santa-block #dialog div.b2 {margin: 0 1px; border-color: #ff6569;}
#santa-block #dialog div.text {
	border: 1px solid #ff6569;
	border-width: 0 1px;
	padding: 0 12px;
	background: #ffffff;
}

#santa-block div.santa{
	float: left;
	width: 133px;
	height: 300px;	
	display: inline;
	z-index: 5;
	}
#santa-block div.santa a img {
	filter:alpha(opacity=20);
	opacity: 0.2;
	-moz-opacity: 0.2;
	-khtml-opacity: 0.2;
	}
#santa-block,#santa-block div.santa *,#santa-block #dialog,#santa-block #dialog * {border:0; !important}
</style>

находим

#santa-block #dialog {
width: 225px;
height: auto;
float: right;
display: none;
position: absolute;
bottom: 350px;
left: 50px;
font-size: 12px;
color: red;
}

выделенное красным меняйте, если диалоговый блок куда-нибудь уезжает. хтмл-верх

<script type="text/javascript">
$(document).ready(function(){
var santa_message = new Array();
var surl = document.URL;
santa_message.push('Добро пожаловать на сайт!');
santa_message.push('Вы попали в поиск!');
santa_message.push('Ура вы входите!');
santa_message.push('Смотрим темку');
santa_message.push('В профиле ^____^');
santa_message.push('Просматриваем раздельчик');
$("#santa-block > #dialog > #santa-text.text").html(santa_message[0]);
if(surl.indexOf("search.php")!=-1) $("#santa-block > #dialog > #santa-text.text").html(santa_message[1]);
else if(surl.indexOf("login.php")!=-1) $("#santa-block > #dialog > #santa-text.text").html(santa_message[2]);
else if(surl.indexOf("viewtopic.php")!=-1) $("#santa-block > #dialog > #santa-text.text").html(santa_message[3]);
else if(surl.indexOf("profile.php")!=-1) $("#santa-block > #dialog > #santa-text.text").html(santa_message[4]);
else if(surl.indexOf("viewforum.php")!=-1) $("#santa-block > #dialog > #santa-text.text").html(santa_message[5]);
$("#santa-block > div.santa > a").click(function(){
$(this).children("img").css("border","0");
if($("#santa-block > #dialog").css("display")=='none'){
$("#santa-block > #dialog").fadeIn("slow");
$("#santa-block > #dialog").css("display",'inline');
}
else{
$("#santa-block > #dialog").css("display",'none');
}
})
});

</script>

выделенные фразки меняете на свои, хтмл-верх

Код:

<div id="santa-block">
<div class="santa"><a href="#" onclick="return false;"><img src="http://i.rusff.org.ru/f/ru/org/rusff/santa.png" border="0" onmouseover="$(this).animate({opacity: 1}, 1000)" onmouseout="$(this).animate({opacity: 0.2}, 1000)" onClick="this.style.border='0px'"></a></div>
<div id="dialog">
<div class="b1"><b></b></div>
<div class="b2"><b><i><q></q></i></b></div>
<div class="b3"><b><i></i></b></div>
<div class="b4"><b></b></div>
<div class="b5"><b></b></div>
  <div id="santa-text" class="text"></div>

<div class="b5"><b></b></div>
<div class="b4"><b></b></div>
<div class="b3"><b><i></i></b></div>
<div class="b2"><b><i><q></q></i></b></div>
<div class="b1"><b></b></div>
<div style="margin: -4px 0px 0px 3px;"><img src="http://i.rusff.org.ru/f/ru/org/rusff/dialog_bottom.png" border="0" /></div>
</div>
</div>

тоже хтмл верх, если есть желание заменить санту на что-нибудь другое, допустим на Деда Мороза, то находим строку

<div class="santa"><a href="#" onclick="return false;"><img src="http://i.rusff.org.ru/f/ru/org/rusff/santa.png" border="0" onmouseover="$(this).animate({opacity: 1}, 1000)" onmouseout="$(this).animate({opacity: 0.2}, 1000)" onClick="this.style.border='0px'"></a></div>

заменяете на свой адрес

для тех кому лень собирать все кусками

Код:

<script type="text/javascript" src="http://i.rusff.org.ru/f/ru/org/rusff/lib_module.js"></script>
<style type="text/css">
#santa-block {
	display: block;
	position: fixed;	
	width: 133px;
	height: 400px;
	margin: 20em 0 0 -7em;
	z-index: 2;
	text-align: left;
	}
	
#santa-block #dialog {
	width: 225px;
	height: auto;
	float: right;
	display: none;
	position: absolute;
	bottom: 350px;
	left: 50px;
	font-size: 12px;
	color: red;
	}
#santa-block #dialog div.b1, #santa-block #dialog div.b2, #santa-block #dialog div.b3, #santa-block #dialog div.b4, #santa-block #dialog div.b5,
#santa-block #dialog div.b1 i, #santa-block #dialog div.b2 i, #santa-block #dialog div.b3 i, #santa-block #dialog div.b4 i, #santa-block #dialog div.b5 i, #santa-block#dialog div.b1 b, #santa-block #dialog div.b2 b, #santa-block #dialog div.b3 b, #santa-block #dialog div.b4 b, #santa-block #dialog div.b5 b,#santa-block #dialog div.b1 q, #santa-block #dialog div.b2 q, #santa-block #dialog div.b3 q, #santa-block #dialog div.b4 q, #santa-block #dialog div.b5 q {
	height: 1px;
	font-size: 1px;
	overflow: hidden;
	border-style: solid;
	border-width: 0 1px;
	border-color: #ff6569;
	display: block;
	background: #ffffff;
	}
#santa-block #dialog div.b1 {
	margin: 0 2px;
	background: #ff6569;
	border: none;
}
#santa-block #dialog div.b1 b {
	margin: 0 1px;
	background: #ffffff;
	border-color: #ff6569;
}
#santa-block #dialog div.b2 {margin: 0 1px; border-color: #ff6569;}
#santa-block #dialog div.text {
	border: 1px solid #ff6569;
	border-width: 0 1px;
	padding: 0 12px;
	background: #ffffff;
}

#santa-block div.santa{
	float: left;
	width: 133px;
	height: 300px;	
	display: inline;
	z-index: 5;
	}
#santa-block div.santa a img {
	filter:alpha(opacity=20);
	opacity: 0.2;
	-moz-opacity: 0.2;
	-khtml-opacity: 0.2;
	}
#santa-block,#santa-block div.santa *,#santa-block #dialog,#santa-block #dialog * {border:0; !important}
</style>
<script type="text/javascript">
$(document).ready(function(){
	var santa_message = new Array();
	var surl = document.URL;
	santa_message.push('Добро пожаловать на сайт!');
	santa_message.push('Вы попали в поиск!');
	santa_message.push('Ура вы входите!');
	santa_message.push('Смотрим темку');
	santa_message.push('В профиле ^____^');
	santa_message.push('Просматриваем раздельчик');
	$("#santa-block > #dialog > #santa-text.text").html(santa_message[0]);
	if(surl.indexOf("search.php")!=-1) $("#santa-block > #dialog > #santa-text.text").html(santa_message[1]);
    else if(surl.indexOf("login.php")!=-1) $("#santa-block > #dialog > #santa-text.text").html(santa_message[2]);
    	else if(surl.indexOf("viewtopic.php")!=-1) $("#santa-block > #dialog > #santa-text.text").html(santa_message[3]);
        else if(surl.indexOf("profile.php")!=-1) $("#santa-block > #dialog > #santa-text.text").html(santa_message[4]);
        	else if(surl.indexOf("viewforum.php")!=-1) $("#santa-block > #dialog > #santa-text.text").html(santa_message[5]);
	$("#santa-block > div.santa > a").click(function(){
    $(this).children("img").css("border","0");
    if($("#santa-block > #dialog").css("display")=='none'){
    	$("#santa-block > #dialog").fadeIn("slow");
    	$("#santa-block > #dialog").css("display",'inline');
    	}
    else{
    	$("#santa-block > #dialog").css("display",'none');
    	}
    })
	});


</script>
<div id="santa-block">
<div class="santa"><a href="#" onclick="return false;"><img src="http://i.rusff.org.ru/f/ru/org/rusff/santa.png" border="0" onmouseover="$(this).animate({opacity: 1}, 1000)" onmouseout="$(this).animate({opacity: 0.2}, 1000)" onClick="this.style.border='0px'"></a></div>
<div id="dialog">
<div class="b1"><b></b></div>
<div class="b2"><b><i><q></q></i></b></div>
<div class="b3"><b><i></i></b></div>
<div class="b4"><b></b></div>
<div class="b5"><b></b></div>
  <div id="santa-text" class="text"></div>

<div class="b5"><b></b></div>
<div class="b4"><b></b></div>
<div class="b3"><b><i></i></b></div>
<div class="b2"><b><i><q></q></i></b></div>
<div class="b1"><b></b></div>
<div style="margin: -4px 0px 0px 3px;"><img src="http://i.rusff.org.ru/f/ru/org/rusff/dialog_bottom.png" border="0" /></div>
</div>
</div>

все в хтмл-верх
пример санты http://tests.bestff.ru/

Техническая поддержка

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

Новогодний Санта

Сообщений 1 страница 1 из 1

Поделиться12009-12-19 22:42:56