mister-foto.eu - Foto Skripte - Sliding Photograph Gallerie

<!-- CSS fuer Bildergallerie -->
<style type="text/css">
#galleryh {
  padding:0;
  margin:0 auto 5em auto;
  list-style-type:none;
  overflow:hidden;
  width:575px;
  height:300px;
  border:1px solid #888;
  background:#fff url(http://www.url_zum_hintergrundbild.de/back.png);
  }
#galleryh li {
  float:left;
  }
#galleryh li a {
  display:block;
  height:300px;
  width:28px;
  float:left;
  text-decoration:none;
  border-right:1px solid #fff;
  cursor:default;
  }
#galleryh li a img {
  width:28px;
  height:300px;
  border:0;
  }
#galleryh li a:hover {
  background:#eee;
  width:400px;
  }
#galleryh li a:hover img {
  width:400px;
  }
</style>

<!-- HTML Code fuer Bildergallerie -->

<ul id="galleryh">
<li><a href="#nogo">
<img src="http://www.url_zum_bild_1.de/bild001.png" alt="#1" title="#1" /></a></li>
<li><a href="#nogo">
<img src="http://www.url_zum_bild_2.de/bild002.png" alt="#2" title="#2" /></a></li>
<li><a href="#nogo">
<img src="http://www.url_zum_bild_3.de/bild003.png" alt="#3" title="#3" /></a></li>
<li><a href="#nogo">
<img src="http://www.url_zum_bild_4.de/bild004.png" alt="#4" title="#4" /></a></li>
<li><a href="#nogo">
<img src="http://www.url_zum_bild_5.de/bild005.png" alt="#5" title="#5" /></a></li>
<li><a href="#nogo">
<img src="http://www.url_zum_bild_6.de/bild006.png" alt="#6" title="#6" /></a></li>
<li><a href="#nogo">
<img src="http://www.url_zum_bild_7.de/bild007.png" alt="#7" title="#7" /></a></li>
</ul>

Als Vorlage verwendete Bilder für diese Gallerie (Rechtsklick -> Grafik speichern unter):

Der Hintergrund (wenn der Mauszeiger nicht über einem der Bilder ist).

Vorlage der einzelnen Bilderrahmen, im weißen Bereich wird das eigene Bild eingefügt (max. 362x208 px).

Autor: Stu Nicholls

Website: cssplay.co.uk

Änderungen:
CSS an Auflösung von 400x300px angepasst.
Bildvorlage mit Filmstreifen erstellt.

Sliding Photograph Gallerie ist zum Einsatz bei eBay geeignet.