[Home]

Einfache Hervorhebung
nur durch Rahmen.

"Aufleuchten"
durch zweites Thumbnail.

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:

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.


Hover lässt das Bild
"erwachen" durch
zusätzliches animiertes GIF.
Start-Problem im Firefox
und Opera s.u.!

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;
}

Visited - So besser nicht:
Mir schwebte erst irgendeine visited-Kennzeichnung
*im* Bild vor, ist aber u.a. zum Ausdrucken unpraktisch,
sofern man kein anderes Stylesheet verwendet.

Probleme

Zusätzliche Probleme bei Verwendung von animierten GIFs


Weiterführende externe Links

Interessante Vergrößerungsfunktionen


Posted by Gabriele Jesdinsky @ 2006-03-22 | Filed: Web | [Kommentar schreiben]

Home | RSS [?] | Impressum | Copyright © 1999-2019 jesdinsky.com autotec | Überprüfen: XHTML»