Hover-Effekte für Vorschaubilder

Hover-Effekte für Vorschaubilder sind nicht nur eine nette Spielerei, sondern praktisch für die intuitivere Bedienung (Touch & Feel).

Vorausgesetzte Funktionen

Zugänglichkeit auch ohne CSS, IE6, Firefox und Opera:
Das inaktive Vorschaubild soll auch angezeigt werden, wenn im Browser CSS ausgeschaltet ist, in den aktuellen Versionen von Mozilla Firefox und Opera sowie im IE6.

Übersicht - Direkt zum Abschnitt springen ▽

Mauszeiger in Lupe verwandeln :: HTML/CSS :: Probleme :: Links

Rahmen

Durch den 3-dimensionalen Rahmen wird entsprechend dem Windows-Klassik-Standard folgendes angedeutet:

• Inaktiv: Inset = Es geht noch weiter rein,
• Hover: Outset = Button = Draufdrücken für Funktion
• Aktiv: Inset = Es geht los

Die Purpurfärbung als visited-Kennzeichnung ist derzeit noch nicht so schön: Weil sie im Firefox sehr hell dargestellt wird, kann man sie bei Opera und IE leider nicht dezenter machen. Sonst ist sie im FF gar nicht mehr zu sehen.

So wird es zurzeit hier gemacht

Grafikaustausch beim Hovern: Mit CSS gibt man bei hover ein background-image: url('/img/aufleuchtendes-bild-bei-hover.jpg')an.
Gleichzeitig verschiebt man das ursprüngliche Bild aus dem sichtbaren Bereich mit margin-left:120px; und versteckt es mit overflow:hidden;.
(foreground-image gibt es leider noch nicht, z.B. für transparente "Folie").

Mauszeiger in Lupe mit Plus verwandeln: Um den Mauszeiger in ein selbsterklärendes Zeichen zu verwandeln, benötigt man ein Bild im *.cur Format (Cursor). Das erstellt man mit einem speziellen Grafik-Programm, z.B. der Freeware SnIco Edit.

Wichtig für "Hover-Bilder": Damit sie auch bei Besuchern, die noch offline gehen müssen, in jedem Fall angezeigt werden, lade ich sie unten in der Seite unsichtbar mit width='1' height='1' vor.

HTML:
Anmerkung zu den Untertiteln: Im p ist clear:left; nötig wegen float:left; für den Thumbnail-Link. Müsste hier im CSS für float-Klasse noch verbessert werden.
Praxis-Tipp: Sofern PHP unterstützt wird und die Vorschaubilder innerhalb von Artikeln erscheinen, schreibt man sich für das HTML rings um den Vorschaubild-URL am besten eigene Platzhalter (=Variablen, z.B. [thumb][/thumb]), deren HTML-Inhalt man in ein Include auslagert. Dann braucht man sich nicht den Kopf über das beste HTML zu zerbrechen und kann das ebenso gut ggf. später noch ändern.

<div class='float'>
  <a class='tn' href = '[Link-Adresse/Vollbild-URL]'>
    <img src='/img/[Vorschaubild-Normal.jpg]' alt='' />
  </a>
  <p style='clear:left;'>Untertitel</p> 
</div>

CSS:
Wahrscheinlich auch nicht das Eleganteste, aber so scheint es hier jetzt erst einmal zu funktionieren. Die Schrift-Art und Größe für den Thumbnail-Untertitel ist so gewählt, dass sie im IE6 auch bei Ansicht-Schriftgrad-Sehr klein erkennbar bleibt.

img {
 border: none;
}
a.tn, a.tn: link {
 display: block;
 width: 120px;
 height: 120px;
 overflow: hidden;
 padding: 0;
 border: inset 4px white;
}
a.tn: visited {
 border: inset 4px purple;
}
a.tn: hover {
 cursor: url(/img/lupeplus.cur),pointer;
 border:4px outset white;
 background-image: url('/img/[Vorschaubild-Hover.jpg]');
 background-repeat: no-repeat;
}
a.tn: active {
 border: 4px inset #B7BFD4;
 background-image: url('/img/[Vorschaubild-Normal.jpg]');
 background-repeat: no-repeat;
}
a.tn: hover img {
 margin-left: 120px;
}
div.float {
 float: left;
 margin-right: 1em;
 margin-bottom: 1em;
 margin-top: 1em;
}
div.float p {
 font-family: 'ms sans serif',geneva,sans-serif;
 font-size: 75%;
 margin-top: 0; 
 margin-bottom: 0;
 text-align: center;
}

Probleme

• Cursor-Verwandlung: Opera beherrscht sie leider noch gar nicht, und damit im IE6 nichts flattert, müssen title- und alt-Attribut leer bleiben.
• Opera ignoriert teilweise das overflow:hidden, der Abstand nach rechts muss daher leider erhöht vorgegeben werden. Sonst wackelt die Seite/erscheinen bei Hover plötzlich vorher nicht vorhandene Scrollbalken im Browser.
• Innerhalb einer Tabelle kommt es scheinbar in allen Browsern zu mysteriösen Problemen.
• Äußerst unpraktisch ist auch, dass für die Effekte ein zweites Vorschaubild benötigt wird. Ein Versuch, das Thumbnail teilweise transparent zu machen und dann jeweils mit demselben Hover-Hintergrundbild nur an diesen Stellen zu durchleuchten, sah grauenhaft aus, weil bereits in inaktivem Zustand jeder vorhandene Hintergrund zu stark durchschien. Man könnte das vielleicht noch einmal mit z.B. 80%iger Teiltransparenz testen. Mit keinem meiner derzeitigen Grafikprogramme habe ich das in angemessener Zeit hinbekommen.

Zusätzliche Probleme bei Verwendung von animierten GIFs

• Ladezeit: Effekte mit animierten GIFs sind nur für Einzelbilder geeignet, Galerie benötigt DSL.
• Opera, Firefox: Start der Sequenz bei animierten GIFs nicht immer am Anfang. IE OK.
  Bei Sequenzen, die nicht nur aus Farbübergängen o.ä., sondern auch aus Übergängen zwischen verschiedenen Bildern (wie im hier gezeigten Fall) bestehen, kommt es dann zu unerwünschten Wackel-Effekten.

---

Weiterführende externe Links

• CSS/Hovereffekt mit Grafikaustausch
• CSS/Iconlink - Linking both text and icons with rollover state
• Examples for PNG Alpha blending
• Vorschaubildlinks: Welche Hervorhebung beim Hovern ist nuetzlich und schoen?
• Bild in Bildlink beim Hovern austauschen
• Vorlage für eine Bildergalerie in (X)HTML Mit transparenter Lupe (etwas pixelig, da zurzeit noch kein GIF als Cursor möglich)
• Bildwechsel mit CSS

Interessante Vergrößerungsfunktionen

• CSS Photo Gallery
• Hoverbox Image Gallery
• Lightbox 2.0, JavaScript
• JavaScript/Live Thumbnails: Watch ‘em Grow
• Minislides - inline slide shows with DOM and CSS
• Image previews with DOM JavaScript (and PHP if wanted)

---