Nur falls noch von Interesse?!
Wenn man mal unter die Haube der Webseite guckt kann man sehen, dass es sich nicht um einen herkömmlichen "Solider" handelt, sondern um Tabs.
Dazu wird das jquery_tabs.js Script genutzt:
/**
* Tabs - jQuery plugin for accessible, unobtrusive tabs
* @requires jQuery v1.1.1
*
* http://stilbuero.de/tabs/
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Version: 2.7.4
*/
Alles anzeigen
Das ganze wird mit folgender Zeile Javascript aktiviert:
$('#tabs_news').tabs({ fxFade: true, fxSpeed: 'fast' });
Das genutzte HTML Gerüst sieht wie folgt aus:
<div class="slider">
<div id="tabs_news">
<div id="news-5" class="tabs-container" style="">
<div><a href="#"><img src="img_1.jpg" alt="icon" width="940" height="400" border="0"></a></div>
</div>
<div id="news-4" class="tabs-container tabs-hide">
<div><a href="#"><img src="img_2.jpg" alt="icon" width="940" height="400" border="0"></a></div>
</div>
<div id="news-3" class="tabs-container tabs-hide" style="">
<div><a href="#"><img src="img_3.jpg" alt="icon" width="940" height="400" border="0"></a></div>
</div>
<div id="news-2" class="tabs-container tabs-hide" style="">
<div><a href="#"><img src="img_4.jpg" alt="icon" width="940" height="400" border="0"></a></div>
</div>
<div id="news-1" class="tabs-container tabs-hide" style="">
<div><a href="#"><img src="img_5.jpg" alt="icon" width="940" height="400" border="0"></a></div>
</div>
<ul class="tabs tabs-nav">
<li class="tabs-selected"><a href="#news-5"><img src="spacer.gif" alt="picture" width="21" height="22" border="0"></a></li>
<li class=""><a href="#news-4"><img src="spacer.gif" alt="picture" width="21" height="22" border="0"></a></li>
<li class=""><a href="#news-3"><img src="spacer.gif" alt="picture" width="21" height="22" border="0"></a></li>
<li class=""><a href="#news-2"><img src="spacer.gif" alt="picture" width="21" height="22" border="0"></a></li>
<li class=""><a href="#news-1"><img src="spacer.gif" alt="picture" width="21" height="22" border="0"></a></li>
</ul>
</div>
</div>
Alles anzeigen
und das CSS:
/* Slieder Tabs */
#tabs_news { margin:0 auto; padding:0; width:940px; }
.slider { width:940px; padding:10px 0 0 0; margin:0 auto; }
.slider ul.tabs { margin:0 auto; padding:10px 10px 35px 10px; width:160px; list-style:none; }
.slider ul.tabs li { margin:0 5px; padding:0; float:right; background:none; }
.slider ul.tabs li img { float:right; margin:0; padding:0; }
.slider ul.tabs li a { display:block; background:url(images/tabs_2.gif) top no-repeat; padding:12px 0; margin:0; }
.slider ul.tabs li a:hover { background:url(images/tabs_1.gif) top no-repeat; }
.slider ul.tabs li.tabs-selected a { background:url(images/tabs_1.gif) top no-repeat;}
.tabs-hide { display:none; }
Alle Code Zeilen sind der von Selle verlinkten Seite entnommen und stammen nicht aus meiner Feder. Einzig die URLs sind von mir gekürzt worden, da die zum Verständnis nicht notwendig sind.
Ich hoffe ich konnte weiterhelfen.