CSS Multi Gallery - Website X5 Hilfe - Die Helpsite

Und noch eine ganz andere Form für eine Fotopräsentation. Dieses Script verwendet kein JavaScript und auch kein Flasch. Es wird ausschließlich über CSS gesteuert.
Für die Einbindung sind 2 Varianten erläutert, wobei die 2. Variante einfacher zu handhaben wäre.
In der Zip-Datei befindet sich ein Verzeichnis "cs_multi-gallery", das so übernommen werden kann.
Die Anpassungen der Verlinkungen  erfolgen in der Datei "index.html" bzw. im HTML-Objekt, das Aussehen der gesamten Gallerie in der  Datei "gallery_style.css".

Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="cs_multi-gallery/gallery_style.css" />

Variante 1

Code für das HTML-Objekt:

<div class="photo" style align="center">
<ul class="topic">
<li><a class="set" href="#bruecken">Brücken<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="cs_multi-gallery/img/bruecken_01.jpg">
<img src="cs_multi-gallery/img/bruecken_01k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_02.jpg">
<img src="cs_multi-gallery/img/bruecken_02k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_03.jpg">
<img src="cs_multi-gallery/img/bruecken_03k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_04.jpg">
<img src="cs_multi-gallery/img/bruecken_04k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_05.jpg">
<img src="cs_multi-gallery/img/bruecken_05k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_06.jpg">
<img src="cs_multi-gallery/img/bruecken_06k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_07.jpg">
<img src="cs_multi-gallery/img/bruecken_07k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_08.jpg">
<img src="cs_multi-gallery/img/bruecken_08k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_09.jpg">
<img src="cs_multi-gallery/img/bruecken_09k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_10.jpg">
<img src="cs_multi-gallery/img/bruecken_10k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_11.jpg">
<img src="cs_multi-gallery/img/bruecken_11k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_12.jpg">
<img src="cs_multi-gallery/img/bruecken_12k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_13.jpg">
<img src="cs_multi-gallery/img/bruecken_13k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_14.jpg">
<img src="cs_multi-gallery/img/bruecken_14k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_15.jpg">
<img src="cs_multi-gallery/img/bruecken_15k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/bruecken_16.jpg">
<img src="cs_multi-gallery/img/bruecken_16k.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="active"><a class="set" href="#tiere">Tiere<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="cs_multi-gallery/img/tiere_01.jpg">
<img src="cs_multi-gallery/img/tiere_01k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_02.jpg">
<img src="cs_multi-gallery/img/tiere_02k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_03.jpg">
<img src="cs_multi-gallery/img/tiere_03k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_04.jpg">
<img src="cs_multi-gallery/img/tiere_04k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_05.jpg">
<img src="cs_multi-gallery/img/tiere_05k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_06.jpg">
<img src="cs_multi-gallery/img/tiere_06k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_07.jpg">
<img src="cs_multi-gallery/img/tiere_07k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_08.jpg">
<img src="cs_multi-gallery/img/tiere_08k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_09.jpg">
<img src="cs_multi-gallery/img/tiere_09k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_10.jpg">
<img src="cs_multi-gallery/img/tiere_10k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_11.jpg">
<img src="cs_multi-gallery/img/tiere_11k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_12.jpg">
<img src="cs_multi-gallery/img/tiere_12k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_13.jpg">
<img src="cs_multi-gallery/img/tiere_13k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_14.jpg">
<img src="cs_multi-gallery/img/tiere_14k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_15.jpg">
<img src="cs_multi-gallery/img/tiere_15k.jpg" alt="" title="" /></a></li>
<li><a href="cs_multi-gallery/img/tiere_16.jpg">
<img src="cs_multi-gallery/img/tiere_16k.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="set" href="#wasser">Wasser<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#wasser_01">
<img src="cs_multi-gallery/img/wasser_01.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_02">
<img src="cs_multi-gallery/img/wasser_02.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_03">
<img src="cs_multi-gallery/img/wasser_03.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_04">
<img src="cs_multi-gallery/img/wasser_04.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_05">
<img src="cs_multi-gallery/img/wasser_05.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_06">
<img src="cs_multi-gallery/img/wasser_06.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_07">
<img src="cs_multi-gallery/img/wasser_07.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_08">
<img src="cs_multi-gallery/img/wasser_08.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_09">
<img src="cs_multi-gallery/img/wasser_09.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_10">
<img src="cs_multi-gallery/img/wasser_10.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_11">
<img src="cs_multi-gallery/img/wasser_11.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_12">
<img src="cs_multi-gallery/img/wasser_12.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_13">
<img src="cs_multi-gallery/img/wasser_13.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_14">
<img src="cs_multi-gallery/img/wasser_14.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_15">
<img src="cs_multi-gallery/img/wasser_15.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_16">
<img src="cs_multi-gallery/img/wasser_16.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="set" href="#natur">Natur<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#natur_01">
<img src="cs_multi-gallery/img/natur_01.jpg" alt="" title="" /></a></li>
<li><a href="#natur_02">
<img src="cs_multi-gallery/img/natur_02.jpg" alt="" title="" /></a></li>
<li><a href="#natur_03">
<img src="cs_multi-gallery/img/natur_03.jpg" alt="" title="" /></a></li>
<li><a href="#natur_04">
<img src="cs_multi-gallery/img/natur_04.jpg" alt="" title="" /></a></li>
<li><a href="#natur_05">
<img src="cs_multi-gallery/img/natur_05.jpg" alt="" title="" /></a></li>
<li><a href="#natur_06">
<img src="cs_multi-gallery/img/natur_06.jpg" alt="" title="" /></a></li>
<li><a href="#natur_07">
<img src="cs_multi-gallery/img/natur_07.jpg" alt="" title="" /></a></li>
<li><a href="#natur_08">
<img src="cs_multi-gallery/img/natur_08.jpg" alt="" title="" /></a></li>
<li><a href="#natur_09">
<img src="cs_multi-gallery/img/natur_09.jpg" alt="" title="" /></a></li>
<li><a href="#natur_10">
<img src="cs_multi-gallery/img/natur_10.jpg" alt="" title="" /></a></li>
<li><a href="#natur_11">
<img src="cs_multi-gallery/img/natur_11.jpg" alt="" title="" /></a></li>
<li><a href="#natur_12">
<img src="cs_multi-gallery/img/natur_12.jpg" alt="" title="" /></a></li>
<li><a href="#natur_13">
<img src="cs_multi-gallery/img/natur_13.jpg" alt="" title="" /></a></li>
<li><a href="#natur_14">
<img src="cs_multi-gallery/img/natur_14.jpg" alt="" title="" /></a></li>
<li><a href="#natur_15">
<img src="cs_multi-gallery/img/natur_15.jpg" alt="" title="" /></a></li>
<li><a href="#natur_16">
<img src="cs_multi-gallery/img/natur_16.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="set" href="#personen">Personen<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#personen_01">
<img src="cs_multi-gallery/img/personen_01.jpg" alt="" title="" /></a></li>
<li><a href="#personen_02">
<img src="cs_multi-gallery/img/personen_02.jpg" alt="" title="" /></a></li>
<li><a href="#personen_03">
<img src="cs_multi-gallery/img/personen_03.jpg" alt="" title="" /></a></li>
<li><a href="#personen_04">
<img src="cs_multi-gallery/img/personen_04.jpg" alt="" title="" /></a></li>
<li><a href="#personen_05">
<img src="cs_multi-gallery/img/personen_05.jpg" alt="" title="" /></a></li>
<li><a href="#personen_06">
<img src="cs_multi-gallery/img/personen_06.jpg" alt="" title="" /></a></li>
<li><a href="#personen_07">
<img src="cs_multi-gallery/img/personen_07.jpg" alt="" title="" /></a></li>
<li><a href="#personen_08">
<img src="cs_multi-gallery/img/personen_08.jpg" alt="" title="" /></a></li>
<li><a href="#personen_09">
<img src="cs_multi-gallery/img/personen_09.jpg" alt="" title="" /></a></li>
<li><a href="#personen_10">
<img src="cs_multi-gallery/img/personen_10.jpg" alt="" title="" /></a></li>
<li><a href="#personen_11">
<img src="cs_multi-gallery/img/personen_11.jpg" alt="" title="" /></a></li>
<li><a href="#personen_12">
<img src="cs_multi-gallery/img/personen_12.jpg" alt="" title="" /></a></li>
<li><a href="#personen_13">
<img src="cs_multi-gallery/img/personen_13.jpg" alt="" title="" /></a></li>
<li><a href="#personen_14">
<img src="cs_multi-gallery/img/personen_14.jpg" alt="" title="" /></a></li>
<li><a href="#personen_15">
<img src="cs_multi-gallery/img/personen_15.jpg" alt="" title="" /></a></li>
<li><a href="#personen_16">
<img src="cs_multi-gallery/img/personen_16.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<div>

Variante 2

Code für das HTML-Objekt:

<? include "cs_multi-gallery/index.html"; ?>

Code der CSS-Datei (gallery_style.css):

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}

/* slides styling */

.photo {width:635px; height:550px; text-align:left; position:relative; margin:0 auto;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}

.photo ul.topic li.active a
{color:#000; background:#bbb;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;

.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}