<div id="switcher-content">
<a class="c1" rel="1" href="javascript://">Картинка 1</a> |
<a class="c2" rel="2" href="javascript://">Картинка 2</a> |
<a class="c3" rel="3" href="javascript://">Картинка 3</a> |
<a class="c4" rel="4" href="javascript://">gradient 1</a> |
<a class="c5" rel="5" href="javascript://">gradient 2</a> |
<a class="c6" rel="redText" href="javascript://">gradient 2 + Red Text</a> |
<a class="c7" rel="greenText" href="javascript://">gradient 2 + Green Text</a>
</div>
<script type="text/javascript">
function setDynClass(mClass){
if(!arguments.length){
var mClass=(mClass=document.cookie.match(/\bdyncss=([^;]*)/))&&mClass[1];if(!mClass)return '';}
document.getElementById('dm1').className=mClass;
var d=new Date();
d.setFullYear(d.getFullYear()+1);
document.cookie=['dyncss=',mClass,';expires=',d.toGMTString(),';path=/;'].join('');
return mClass;}
setDynClass();
</script>
<script type="text/javascript">
$('#switcher-content a').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var n=this.rel,el=document.getElementById('dm1');
if(n>0&&n<6){
var tmp='style'+n+' '+(el.className.split(' ')[1]?el.className.split(' ')[1]:'');
$('#header-content').animate({opacity:0},10,function(){
el.className=tmp;
setDynClass(tmp);
$(this).animate({opacity:'1'},500);
});
}else{
var tmp=el.className.split(' ')[0];
el.className=tmp+' '+n;
setDynClass(tmp+' '+n);
};
return false;
});
</script>
<style type="text/css">
#header-content{background-color:transparent;background-image:url(/_example/bg/patterns/patt8_0.jpg);background-repeat:repeat;background-position: left top;height:200px;width:100%;}
#switcher-content{margin:5px 0;}
#switcher-content a.active,body.style1 a.c1,body.style2 a.c2,body.style3 a.c3,body.style4 a.c4,body.style5 a.c5,body.redText a.c6,body.greenText a.c7{color:#F0F;font-weight:700;}
body.style1 table.anime_table{border-color: #4A4A4A; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-image: url(http://my-soul.ucoz.com/1.png)!important; background-size: cover; width:490; height:490;}
body.style2 table.anime_table{border-color: #4A4A4A; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-image: url(http://my-soul.ucoz.com/2.png)!important; background-size: cover; width:490; height:490;}
body.style3 table.anime_table{border-color: #4A4A4A; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-image: url(http://my-soul.ucoz.com/3.png)!important; background-size: cover; width:490; height:490;}
body.style4 table.anime_table{background:-moz-linear-gradient(top,rgba(51,51,51,0.8),rgba(62,187,218,0.8));background:-webkit-gradient(linear,left top,left bottom,from(rgba(51,51,51, 0.8)),to(rgba(62,187,218, 0.8)));background:-o-linear-gradient(top,rgba(51,51,51,0.8),rgba(62,187,218,0.8));}
body.style5 table.anime_table{background:-moz-linear-gradient(top,rgba(51,51,51,0.8),rgba(241,123,99,0.8));background:-webkit-gradient(linear,left top,left bottom,from(rgba(51,51,51,0.8)),to(rgba(241,123,99,0.8)));background:-o-linear-gradient(top,rgba(51,51,51,0.8),rgba(241,123,99,0.8));}
body.redText p{color:#F00}
body.greenText p{color:#096;}
</style>
<?if($ADD_ENTRY_LINK$)?><div style="text-align:right;padding-bottom:3px;">[ <a href="$ADD_ENTRY_LINK$">Добавить новость</a> ]</div><?endif?>$LAST_NEWS$
