CSS Sliding Gallery - Website X5 Hilfe - Die Helpsite

Hier einmal 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.
Gezeigt wird hier eine horizontale und vertikale Darstellung.
Für die Einbindung sind 2 Varianten erläutert. Sollte dieses Script als Gleiches auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante 2, um Änderungen nur in einer Datei durchführen zu müssen.
Auch als eine Art Menü könnte diese Photo-Slide-Gallery fungieren.
In der Zip-Datei befindet sich ein Verzeichnis "cs_sliding-gallery", das so übernommen werden kann. Es befinden sich zwei Index-Dateien für die horizontale und vertikale Einbindung im Verzeichnis. Die CSS-Datei steuert beide Varianten.
Die Anpassungen der Verlinkungen erfolgen in der Datei "index_hor.html" bzw. "index_ver.html". Die Anpassung/Änderung des Styles in der Datei "gallery_style.css" im Hauptverzeichnis.

Code für den HEAD-Bereich:

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

Variante 1

Code für das HTML-Objekt:

<div>
<ul id="galleryh">
<li><a href="#nogo">
<img src="cs_sliding-gallery/img/img_1.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo">
<img src="cs_sliding-gallery/img/img_2.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo">
<img src="cs_sliding-gallery/img/img_3.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo">
<img src="cs_sliding-gallery/img/img_4.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo">
<img src="cs_sliding-gallery/img/img_5.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo">
<img src="cs_sliding-gallery/img/img_6.jpg" alt="#6" title="#6" /></a></li>
<li><a href="#nogo">
<img src="cs_sliding-gallery/img/img_7.jpg" alt="#7" title="#7" /></a></li>
</ul>
</div>

Hinweis:
<ul id="galleryh"> - für horizontale Präsentation
<ul id="gallery">   - für vertikale Präsentation

Variante 2

Code für das HTML-Objekt:

<? include "cs_sliding-gallery/index_hor.html"; ?>

bzw.

<? include "cs_sliding-gallery/index_ver.html"; ?>

Code der CSS-Datei (gallery_style.css):

#holder {margin:20px auto;}
#gallery {
 padding:0;
 margin:0 auto 5em auto;
 list-style-type:none;
 overflow:hidden;
 width:320px;
 height:425px;
 border:1px solid #888;
 background:#fff url(img/img_back.gif);
 }
#gallery li {
 float:left;
 }
#gallery li a {
 display:block;
 height:30px;
 width:320px;
 float:left;
 text-decoration:none;
 border-bottom:1px solid #fff;
 cursor:default;
 }
#gallery li a img {
 width:320px;
 height:30px;
 border:0;
 }
#gallery li a:hover {
 background:#eee;
 height:240px;
 }
#gallery li a:hover img {
 height:240px;
 }

#galleryh {
 padding:0;
 margin:0 auto 5em auto;
 list-style-type:none;
 overflow:hidden;
 width:495px;
 height:240px;
 border:1px solid #888;
 background:#fff url(img/img_backh.gif);
 }
#galleryh li {
 float:left;
 }
#galleryh li a {
 display:block;
 height:240px;
 width:28px;
 float:left;
 text-decoration:none;
 border-right:1px solid #fff;
 cursor:default;
 }
#galleryh li a img {
 width:28px;
 height:240px;
 border:0;
 }
#galleryh li a:hover {
 background:#eee;
 width:320px;
 }
#galleryh li a:hover img {
 width:320px;
 }


#galleryie {
 padding:0;
 margin:0 auto;
 list-style-type:none;
 overflow:hidden;
 width:495px;
 height:240px;
 border:1px solid #888;
 background:#fff url(img/img_backh.gif);
 }
#galleryie li {
 float:left;
 }
#galleryie li a {
 display:block;
 height:240px;
 width:28px;
 overflow:hidden;
 float:left;
 text-decoration:none;
 border-right:1px solid #fff;
 cursor:default;
 }
#galleryie li a {img border:0;}
#galleryie li a:hover {
 background:#eee;
 width:320px;
  }