Clansphere :: FREE Clan Content Management System

<div style="width: 233px; height: 31px;">
<div style="float: left; width: 114px;">
<img src="Bilder/warscentertitle.png" alt="Wars Center" />
</div>
<div style="float: left; width: 119px;">
<a href="javascript:featuredcontentslider.jumpTo('slider1', 1)">Test</a>
<a href="javascript:featuredcontentslider.jumpTo('slider1', 2)">Bla</a>
</div>


<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
<img src="Bilder/warscenter1.png" />
</div>

<div class="contentdiv">
<img src="Bilder/warscenter2.png" />
</div>


</div>


<script type="text/javascript">

featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: ["<img src='Bilder/warscenterlast.png' style='float: left;' />","<img src='Bilder/warscenterupcoming.png' style='float: left' />"], //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
&#125

</script>

<a href="javascript:featuredcontentslider.jumpTo('slider1', 1)">Test</a>
<a href="javascript:featuredcontentslider.jumpTo('slider1', 2)">Bla</a>

<div class="pagination1" id="paginate-slider1">
<div id="sBoxLink1">
<a href="#" class="toc"><img src="images/slider/spacer.gif" border="0" /></a></div>
<div id="sBoxLink2">
<a href="#" class="toc"><img src="images/slider/spacer.gif" border="0" /></a></div>
</div>

<div id="slider1">
<div class="contentdiv">
<div class="nwars" style="margin-top:2px; margin-left:1px;">
{wars:navtop}
</div>
</div>

<div class="contentdiv">
<div class="lwars" style="margin-top:4px; margin-left:3px;">
{wars:navlist2}
</div>
</div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [false, 0.5], //[true/false, fadedegree]
autorotate: [true, 18000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
} } )
</script>
</div>

/* -------------- SLIDER 1 --------------- */
.pagination1{
float:left;
margin-top:0px;
margin-left:11px;
margin-right:0px;
margin-bottom:0px;
width:194px;
height:22px;
}
.contentdiv{
float:left;
filter:progid: DXImageTransform.Microsoft.alpha(opacity=100);
visibility:hidden;
-moz-opacity:1;
opacity:1;
}
/* -------------- BUTTON 1 -------------- */
#sBoxLink1 a img{
background:url(images/slider/navi_nwars.png) no-repeat;
margin:0px;
float:left;
width:96px;
height:25px;
}
#sBoxLink1 a img:hover, #sBoxLink1 a.selected img{
background:url(images/slider/hovers/hover_nwars.png) no-repeat;
}
.nwars{
background:url(images/db/versus.png) no-repeat top;
float:left;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
width:258px;
height:100%;
}
/* -------------- BUTTON 2 -------------- */
#sBoxLink2 a img{
background:url(images/slider/navi_lwars.png) no-repeat;
margin:0px;
float:left;
width:96px;
height:25px;
}
#sBoxLink2 a img:hover, #sBoxLink2 a.selected img{
background:url(images/slider/hovers/hover_lwars.png) no-repeat;
}
.lwars{
float:left;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
width:250px;
height:100%;
}