CSS Multi Slideshow - Website X5 Hilfe - Die Helpsite

Hier eine animierte Slideshow die 3 verschiedene Bildgrößen (99x66px; 599x399px; 640x480px) benötigt, aber doch einen sehr wirkungsvollen Eindruck hinterläßt. Sollten die Bilder mit einem Link auf andere HTML-Seiten verweisen, werden die großen Bilder nicht benötigt.
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-slideshow", 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-slideshow/slideshow_style.css" />

Variante 1

Code für das HTML-Objekt:

<div>
<ul class="u1">
<li class="title">Fotos aus dem Leben<br /><span>Demo der animierten Multi Slideshow</span></li>
<li class="p1 tp"><a class="a1" href="#url">1<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="cs_multi-slideshow/img/natur_01g.jpg"><img class="small" src="cs_multi-slideshow/img/natur_01k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/natur_01.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/natur_02g.jpg"><img class="small" src="cs_multi-slideshow/img/natur_02k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/natur_02.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/natur_03g.jpg"><img class="small" src="cs_multi-slideshow/img/natur_03k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/natur_03.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/natur_04g.jpg"><img class="small" src="cs_multi-slideshow/img/natur_04k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/natur_04.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/natur_05g.jpg"><img class="small" src="cs_multi-slideshow/img/natur_05k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/natur_05.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/natur_06g.jpg"><img class="small" src="cs_multi-slideshow/img/natur_06k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/natur_06.jpg" alt="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="p2 tp"><a class="a2" href="#url">2<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="cs_multi-slideshow/img/personen_01g.jpg"><img class="small" src="cs_multi-slideshow/img/personen_01k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/personen_01.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/personen_02g.jpg"><img class="small" src="cs_multi-slideshow/img/personen_02k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/personen_02.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/personen_03g.jpg"><img class="small" src="cs_multi-slideshow/img/personen_03k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/personen_03.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/personen_04g.jpg"><img class="small" src="cs_multi-slideshow/img/personen_04k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/personen_04.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/personen_05g.jpg"><img class="small" src="cs_multi-slideshow/img/personen_05k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/personen_05.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/personen_06g.jpg"><img class="small" src="cs_multi-slideshow/img/personen_06k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/personen_06.jpg" alt="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="p3 tp"><a class="a3" href="#url">3<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="cs_multi-slideshow/img/tiere_01g.jpg"><img class="small" src="cs_multi-slideshow/img/tiere_01k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/tiere_01.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/tiere_02g.jpg"><img class="small" src="cs_multi-slideshow/img/tiere_02k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/tiere_02.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/tiere_03g.jpg"><img class="small" src="cs_multi-slideshow/img/tiere_03k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/tiere_03.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/tiere_04g.jpg"><img class="small" src="cs_multi-slideshow/img/tiere_04k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/tiere_04.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/tiere_05g.jpg"><img class="small" src="cs_multi-slideshow/img/tiere_05k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/tiere_05.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/tiere_06g.jpg"><img class="small" src="cs_multi-slideshow/img/tiere_06k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/natur_06.jpg" alt="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="p4 tp"><a class="a4" href="#url">4<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="cs_multi-slideshow/img/bruecken_01g.jpg"><img class="small" src="cs_multi-slideshow/img/bruecken_01k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/bruecken_01.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/bruecken_02g.jpg"><img class="small" src="cs_multi-slideshow/img/bruecken_02k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/bruecken_02.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/bruecken_03g.jpg"><img class="small" src="cs_multi-slideshow/img/bruecken_03k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/bruecken_03.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/bruecken_04g.jpg"><img class="small" src="cs_multi-slideshow/img/bruecken_04k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/bruecken_04.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/bruecken_05g.jpg"><img class="small" src="cs_multi-slideshow/img/bruecken_05k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/bruecken_05.jpg" alt="" /></a></li>
<li><a href="cs_multi-slideshow/img/bruecken_06g.jpg"><img class="small" src="cs_multi-slideshow/img/bruecken_06k.jpg" alt="" />
<img class="full" src="cs_multi-slideshow/img/bruecken_06.jpg" alt="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="cover"></li>
</ul>
</div>

Variante 2

Code für das HTML-Objekt:

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

Code der CSS-Datei (gallery_style.css):

ul.u1 {padding:0; margin:0 auto; list-style:none; width:616px; border:16px solid #000; border-width:16px 16px 5px 0; height:465px; position:relative; background:#000; overflow:hidden;
-o-border-radius: 8px;
-icab-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

ul.u1 ul {padding:0; margin:0; list-style:none; position:absolute; top:70px; width:600px; height:66px; overflow:visible; border:0; left:32px; z-index:100;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
}
ul.u1 ul li {float:left;}
ul.u1 ul li a {display:block; float:left; width:100px; height:66px; background:#000;}
ul.u1 ul li a img {display:block; border:0;}
ul.u1 ul li a img.small {opacity:1; filter: alpha(opacity=100); float:right;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
}
ul.u1 ul li a img.full {position:absolute; left:1px; top:-470px; opacity:0; z-index:1; filter: alpha(opacity=0);
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
}

ul.u1 li.tp {position:absolute; left:-16px; top:400px; width:16px; height:17px; background:orange; z-index:5;}
ul.u1 li.p1 a.a1 {position:absolute; left:16px; top:0; display:block; width:16px; height:17px; background:#000; font:12px/16px arial,sans-serif; color:#fff; text-decoration:none; text-align:center;}
ul.u1 li.p2 a.a2 {position:absolute; left:16px; top:16px; display:block; width:16px; height:17px; background:#000; font:12px/16px arial,sans-serif; color:#fff; text-decoration:none; text-align:center;}
ul.u1 li.p3 a.a3 {position:absolute; left:16px; top:32px; display:block; width:16px; height:17px; background:#000; font:12px/16px arial,sans-serif; color:#fff; text-decoration:none; text-align:center;}
ul.u1 li.p4 a.a4 {position:absolute; left:16px; top:48px; display:block; width:16px; height:17px; background:#000; font:12px/16px arial,sans-serif; color:#fff; text-decoration:none; text-align:center;}

ul.u1 li.p1 ul {top:0;}
ul.u1 li.p1 ul li a img.full {top:-400px;}

ul.u1 li.tp:hover {border:0;}
ul.u1 li.tp:hover a {font-weight:bold; background:#ffae31;}
ul.u1 li.tp:hover ul {top:0;}
ul.u1 li.tp:hover ul li a img.full {top:-400px;}

ul.u1 ul li a:hover img.small {opacity:0.4; filter: alpha(opacity=40);}
ul.u1 ul li a:hover img.full {opacity:1; filter: alpha(opacity=100);}

ul.u1 li.title{position:absolute; left:17px; top:0; height:299px; padding-top:100px; width:599px; z-index:1; color:#888; font-size:25px; text-align:center;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
}
ul.u1 li.title span {font-size:16px;}
ul.u1:hover li.title {opacity:0; filter: alpha(opacity=0);}

/* for IE6 */
ul.u1 table {border-collapse:collapse; width:0; height:0; margin-bottom:-1px; position:absolute;}
ul.u1 li a.a1 ul {top:0;}
ul.u1 li a.a2 ul {top:53px;}
ul.u1 li a.a3 ul {top:37px;}
ul.u1 li a.a4 ul {top:23px;}

ul.u1 li.tp a:hover {border:0;}
ul.u1 li.tp a:hover {font-weight:bold; background:#ffae31;}
ul.u1 li a.a1:hover {ul top:0;}
ul.u1 li a.a2:hover ul {top:-16px;}
ul.u1 li a.a3:hover ul {top:-32px;}
ul.u1 li a.a4:hover ul {top:-48px;}
ul.u1 li.tp a:hover ul li a img.full {top:-400px;}
* html ul.u1 li.cover {height:401px;}
* html ul.u1 ul {left:2px; top:66px;}