Bildgalerie

Auf dieser Seite:

a:hover

Ganz ohne JavaScript nur durch CSS werden diese Bildgalerien erzeugt. Die erste funktioniert über die Textlinks, die Zweite über die Thumbnails. Beide Navigationen können unabhängig vom grossen Bild positioniert und auch als Zeilen ausgelegt werden.

Textlink Galerie

Vogel

Hund

Schmetterling

Schrimps

Goldfische

Käfer

Das HTML definiert in jedem Link ein Bild. Zuvor wird ein Bild positioniert, das von den wechselnden Bildern verdeckt wird.

<!-- Textlink Galerie -->
<div id="bildposition">
  <img src="images/bild_01.jpg" height="156px" width="240px" alt="Galeriebild" />
</div>
<div id="txtlinks">
  <a href="#">Vogel<img src="images/bild_01.jpg" alt="Galeriebild" /></a><br />
  <a href="#">Hund<img src="images/bild_02.jpg" alt="Galeriebild" /></a><br />
  <a href="#">Schmetterling<img src="images/bild_03.jpg" alt="Galeriebild" /></a><br />
  <a href="#">Schrimps<img src="images/bild_04.jpg" alt="Galeriebild" /></a><br />
  <a href="#">Goldfische<img src="images/bild_05.jpg" alt="Galeriebild" /></a><br />
  <a href="#">Käfer<img src="images/bild_06.jpg" alt="Galeriebild" /></a><br />
</div>

Das CSS stellt zuerst die Bildgrösse der Bilder in den Links auf 0px ein und macht sie somit unsichtbar; dennoch werden sie geladen. Beim a:hover stellt es die Bildgrösse von 0px auf 156px/240px ein, womit es sichtbar wird, und positioniert das Bild absolut genau über das Bild neben den Textlinks. Dadurch dürfen die Bilder im Original unterschiedliche Masse haben, aber noch immer die selben Proportionen.

<style type="text/css">
/* Textlink Galerie*/
  div#txtlinks a img {height: 0; width: 0; border-width: 0;}
  div#txtlinks a:hover img { position: absolute; top: 320px; 
    left: 470px; height: 156px; width: 240px;}
  div#bildposition { position: absolute; top: 320px; left: 470px;}
</style>

Bildlink Galerie

Digitale Federzeichnung
Grünfink
1

Der Hund
Sein Gesicht sieht aus wie ein Schmetterling, darum wird er Pappillon genannt.

Digitales Aquarell
Zwei Schmetterlinge
3

Bild vier
Digitale Tusche, nach einem Chinesischen Malereilehrbuch.

Digitaler Pinsel
Fischparty
5

Default Titel
Thema: Digitale Zeichnungen
Bewertung: schön

HTML:


<?php
<!-- Bildlink Galerie -->
<div class="galerie">
  <div class="imglinks">
    <a id="link1" href="#">
      <img src="images/bild_01.jpg" alt="Bild eines Vogel" title="Vogel" />
      <span><b>Digitale Federzeichnung</b><br />Grünfink<br />1</span>
    </a>
    <a id="link2" href="#">
      <img src="images/bild_02.jpg" alt="Bild eines Hundes" title="Hund" />
      <span><b>Der Hund</b><br />Sein Gesicht sieht aus wie ein Schmetterling, 
      darum wird er Pappillon genannt.</span>
    </a>
    <a id="link3" href="#">
      <img src="images/bild_03.jpg" alt="Bild zweier Schmetterlinge" title="Schmetterlinge" />
      <span><b>Digitales Aquarell</b><br />Zwei Schmetterlinge<br />3</span>
    </a>
    <a id="link4" href="#">
      <img src="images/bild_04.jpg" alt="Bild von Schrimps" title="Schrimps" />
      <span><b>Bild vier</b><br />Digitale Tusche, nach einem Chinesischen Malereilehrbuch.</span>
    </a>
    <a id="link5" href="#">
      <img src="images/bild_05.jpg" alt="Bild mit Goldfischen" title="Goldfische" />
      <span><b>Digitaler Pinsel</b><br />Fischparty<br />5</span>
    </a>
  </div>
  <div class="defaultbox">
    <p><b>Default Titel</b><br />Thema: Digitale Zeichnungen<br />Bewertung: schön</p>
  </div>
  <br style="clear:both;" />
  <br /><br />
</div>
?>

CSS:


<?php
<style type="text/css">
/* Bildlink Galerie*/
.galerie{
  font-size:1em;
  margin-left:0px;
  width:476px;
  margin-top:7px;
  padding-left:0;
}
/* Container mit allen Links (mit Thumbnails und Spans) */
div.imglinks{
  padding:7px 0 3px 7px;
  width:97px;
  float:left;
}
    
/* Links */
div.imglinks a{
  padding:0;
  margin:0;
}
div.imglinks a:hover{
  color: #411;
  background: #ffffff;
  padding:0;
  margin:0;
}
     
/* Thumbnails */
.imglinks a img{
  width:72px;
  padding:0px;
  margin:1px 1px 2px 1px;
  border:1px solid #4089AC;
  float:left;
}
.imglinks a:hover img{
  border:1px solid #000000;
}
    
/* span in den Links */
div.imglinks a span {
  display: none;
  color:#ff0000;
  background:#efefef;
}
div.imglinks a:hover span{
  display: block;
  position: absolute;
  width: 293px;
  padding: 220px 15px 11px 20px;
  margin: 1px 0 0 129px;
  z-index: 100;

  /* Aussehen der box */
  color: #858445;
  font: 0.85em verdana, sans-serif;
  text-align: left;
  float:right;
  border:1px solid #cfcfcf;

  /* Position des Hintergrunds */
  background-color:#f6f6f6;
  background-position: 21px 10px;
  background-repeat: no-repeat;
}
/* in span des identifizierten Links ein Hintergrundbild laden  */
a#link1:hover span{background-image:url(images/bild_01.jpg);}
a#link2:hover span{background-image:url(images/bild_02.jpg);}
a#link3:hover span{background-image:url(images/bild_03.jpg);}
a#link4:hover span{background-image:url(images/bild_04.jpg);}
a#link5:hover span{background-image:url(images/bild_05.jpg);}
   
/* Default Bildbox */
div.defaultbox{
  float:right;
  width:300px;
  margin:8px 10px 0 0;
  padding: 208px 8px 0px 20px;
  color: #858445;
  background: #f6f6f6 url(images/bild_06.jpg) no-repeat 21px 10px;
  border:1px solid #cfcfcf;
}
div.defaultbox p{
  padding:0;
  font: 0.85em verdana, sans-serif;
  text-align: left;
}
</style>
?>

Werden an Stelle der Textlinks (das erste Beispiel weiterentwickelnd) einfach die Bilder in den Links als Thumbnails angezeigt, würden sie beim a:hover durch die neue Positionierung verschoben und hin und her flackern.
Der Bildwechsel wird hier erzeugt, indem zusätzlich ein unsichtbarer Span im Link steht (unsichtbar durch display: none;). Beim a:hover wird dieser Span (und nicht das Thumbnail) verändert, sichtbar gemacht (durch display: block;), absolut über das Defaultbild positioniert und dann mit einem Hintergrundbild versehen.
Der Span hat oben ein so grosses Padding, dass sein Text (die Bilduntertitelung) unterhalb des Hintergrundbildes zu stehen kommt. Für die Defaultbbox mit dem Defaulttext und dem Defaultbild wird ein Container positioniert. Das ist etwas knifflig, denn der Rahmen und Text (und Margins, und Paddings) muss deckungsgleich mit dem der darauf positionierten Spans sein. Die Bilder müssen alle die selben Masse haben. (Achtung, für den IE 6 habe ich spezielle CSS-Angaben gemacht.)

Weitere Galerien

CSSplay: Stu Nicholls macht nicht anderes als Spielereien mit CSS
In JavaScript: solche mit automatischem Bildwechsel (und Übergängen), die dadurch zur Diashow werden.
Kommt Animation hinzu, sind wir bei DHTML. Z.B: Lightbox 2
In PHP: solche, die sich die Bilder aus bestimmten Ordnern selber zusammen suchen und Formatunabhängig darstellen.
In Flash: legen den Schwehrpunkt auf Animation und Interaktivität.

Check den Code.

Listen >> << Hintergrundbilder

Ich bin hier: > CSS Lehrling >> Bildgalerie