Simple CSS Mouse Over Image Gallery
Vor einigen Tagen brauchte ich eine simple Bildergalerie in der man mit der Maus über Miniaturansichten fährt und das entsprechende Bild in groß angezeigt bekommt. Auf der Suche nach einer entsprechenden Lösung fand ich jedoch leider nichts was mir wirklich zusagte. Zum einen wollte ich komplett auf JavaScript verzichten, zum anderen das Markup möglichst übersichtlich halten.
Im folgenden erläutere ich Euch die nun entwickelte Lösung.
Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen
Zum Hintergrund
Die Lösung ist außerordentlich simpel. Innerhalb eines < a >-Tags positionieren wir die Grafik des Thumbnails sowie ein leeres < span >-Element. Das < span > ist ausgeblendet und enthält über CSS die Großansicht als Hintergrundbild sowie feste Dimensionen. Beim Überfahren der Kleinansicht wird das < span >-Element mittels display:block eingeblendet.
Im HTML-Code tauchen nur die Miniaturen auf, da die Großansichten ja als Hintergrund via CSS definiert wurden.
XHTML
<div class="image-container">
<div id="first-image"> </div>
<a id="image1" href="#"><img src="css-gallery-01_thumb.jpg" alt=" "/><span> </span></a>
<a id="image2" href="#"><img src="css-gallery-02_thumb.jpg" alt=" "/><span> </span></a>
<a id="image3" href="#"><img src="css-gallery-03_thumb.jpg" alt=" "/><span> </span></a>
<a id="image4" href="#"><img src="css-gallery-04_thumb.jpg" alt=""/><span> </span></a>
<a id="image5" href="#"><img src="css-gallery-05_thumb.jpg" alt=" " class="last"/><span> </span></a>
</div>
Der div
-Container „first-image“ enthält über CSS das Bild, welches immer angezeigt werden soll. In diesem Fall das erste.
CSS
Der CSS-Code sollte selbsterklärend sein.
.image-container { /* main container. incl all elements */
padding:0;
width:600px;
float:left;
margin:0 0 10px 0;
position:relative;
border:1px solid #191b1f;
background:#101114;
padding:10px;
}
#first-image { /* first image - always in bg */
position:absolute;
top:10px;
left:10px;
height:580px;
width:600px;
background:url(css-gallery-01_large.jpg) 0 0 no-repeat;
}
.image-container a img { /* thumbs 1-4 */
width:112px;
height:108px;
padding:0 10px 0 0;
margin:590px 0 0 0;
border:0;
float:left;
}
.image-container a img.last { /* thumb 5. I don't use last-child to support ie-users. */
width:112px;
height:108px;
padding:0; /* no right padding for the last thumb */
margin:590px 0 0 0;
float:left;
}
.image-container a span { /* hide spans */
display: none;
}
.image-container a:hover span { /* display span if hovered */
display: block;
position: absolute;
width: 600px;
height:580px;
padding:0;
margin:0;
top:10px;
left:10px;
}
/* large images */
a#image1:hover span {background:url(css-gallery-01_large.jpg);}
a#image2:hover span {background:url(css-gallery-02_large.jpg);}
a#image3:hover span {background:url(css-gallery-03_large.jpg);}
a#image4:hover span {background:url(css-gallery-04_large.jpg);}
a#image5:hover span {background:url(css-gallery-05_large.jpg);}
Feedback und Bugfixing
Ich habe diese Galerie unter Firefox 2, Firefox 3, Safari 3.1 und Internet Explorer 7 getestet. Im IE 6 läuft ohne JS bisher noch nichts. Vllt. hat ja jemand eine Lösung. Sollten Euch Fehler auffallen so bitte ich dies hier zu diskutieren.
Update
Vera hat mir den gesuchten Code zur optimalen Darstellung im IE6 noch einmal per E-Mail geschickt, da es Darstellungsfehler in den Kommentaren gab. Getestet habe ich davon allerdings noch nichts. Also bitte wie gehabt: Feedback!
Nochmals vielen herzlichen Dank Vera!
<div id="bigpic"><img src="gfx/gallery/1_1_gr.jpg" /></div>
<div id="thumbs">
<ul id="gallery">
<li id="bild-1-1"><a href="#"><span><img src="gfx/gallery/1_1_gr.jpg" /></span></a></li>
<li id="bild-1-2"><a href="#"><span><img src="gfx/gallery/1_2_gr.jpg" /></span></a></li>
<li id="bild-1-3"><a href="#"><span><img src="gfx/gallery/1_3_gr.jpg" /></span></a></li>
<li id="bild-1-4"><a href="#"><span><img src="gfx/gallery/1_4_gr.jpg" /></span></a></li>
<li id="bild-1-5"><a href="#"><span><img src="gfx/gallery/1_5_gr.jpg" /></span></a></li>
<li id="bild-1-6"><a href="#"><span><img src="gfx/gallery/1_6_gr.jpg" /></span></a></li>
</ul>
</div>
<pre lang="css" line="1">
focus {
outline:none;
}
#bigpic {
height:300px;
width:300px;
margin:0;
padding:0;
}
#thumbs {
height:49px;
width:300px;
margin:0;
padding:0;
}
ul#gallery {
height:49px;
list-style:none;
margin:0;
padding:0;
position:relative;
width:300px;
}
#gallery li span {
display:none;
}
#gallery li {
float:left;
margin:0;
width:50px;
}
#gallery li a {
display:block;
height:50px;
border-right:#fff 1px solid;
border-top:#fff 1px solid;
}
li#bild-1-1 a {background:url(../gfx/gallery/1_1_kl.jpg);}
li#bild-1-2 a {background:url(../gfx/gallery/1_2_kl.jpg);}
li#bild-1-3 a {background:url(../gfx/gallery/1_3_kl.jpg);}
li#bild-1-4 a {background:url(../gfx/gallery/1_4_kl.jpg);}
li#bild-1-5 a {background:url(../gfx/gallery/1_5_kl.jpg);}
li#bild-1-6 a {background:url(../gfx/gallery/1_6_kl.jpg);}
#gallery li a:focus span, #gallery li a:hover span {
display:block;
height:51px;
position:absolute;
right:0;
top:-300px;
width:300px;
}
#gallery a img {
border:0;
}
#gallery li a span {visibility:hidden}
#gallery li a.current span,
#gallery li a:hover span {visibility:visible}
#gallery li a:hover{visibility:visible;}
Feedback & Ergänzungen – 34 Kommentare
Kommentar zu dieser Seite
Website-Projekte mit kulturbanause
Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.
Übersicht Kompetenzen →Schulungen von kulturbanause
Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.
Übersicht Schulungsthemen →
super, besten Dank, auch 2013 immer noch nützich
Hallo Jonas, großes Respekt für diese Seite.
Aaaaber. Diese Lösungsmöglichkeit ist mir schon länger bekannt und ich finde sie nicht so schön, da man für eine einfache Galerie einen verhältnismäßig großen Aufwand betreiben muss.
Ich bin gerade dabei eine einfachere und sauberere Lösung ohne span-tag zu erarbeiten. Sollte mir das gelingen melde ich mich hier wieder.
Viele Grüße und weiter so!
@Jan: jepp, für jedes Bild muß ein entsprechend kleines Thumbnail zuvor erstellt werden.
achso, die thumbnails werden bei mir jetzt nur als ausschnitt in der entsprechenden größe angezeigt, d.h. das bild wird nicht auf zB 50x50px verkleinert, sondern es wird ein 50x50px ausschnitt aus der oberen linken ecke gezeigt…kann man wohl auch nich ändern, da man einem hintergrundbild ja keine größe zuordnen kann. also muss man für die thumbnails passende bilder erstellen, richtig?
wow, danke an alle fürs netzwerken und wissen-teilen :) klappt jetzt auch im IE!
@ all: Ich hab den Code von Vera als Update unter meinen Artikel gepostet. Danke Vera!
Huhu nochmal,
EDIT: Ich habe den gesamten HTML & CSS Teil ans Ende meines Beitrags verschoben. Gruß Jonas
„bicpic“ ist das groß angezeigte Bild
„thumbs“ sind die Miniaturbilder
„gallery“ ist die Auflistung der Miniaturbilder
Hoffe, es hilft Euch.
Grüße aus Erftstadt bei Köln
Vera
@ Jan: Hab ich gemacht. Daumen drücken ;)
vielleicht könntest du ihr kurz ne mail schicken dass hier leute ihren rat brauchen? :)
@ CT: Ich hab den Tipp von Vera ehrlich gesagt noch nicht ausprobiert. Leider fehlt mir im Moment dazu auch die Zeit. Sorry.
Das Skript ist super, allerdings bekomme ich den Tipp von Vera
Zitat:
#gallery li a span {visibility:hidden}
#gallery li a.current span,
#gallery li a:hover span {visibility:visible}
#gallery li a:hover{visibility:visible;}
auch nicht gebacken. Wäre nett, wenn jemand mal so lieb wäre, und das genauer erklären würde, da in den Original-Skript gar keine „#gallery li“s vorkommen ???
Vielen Dank im Voraus
Hm, krieg das mit dem IE6 nicht hin, auch der Code von Vera hilft da nich, oder wo genau kommt der hin? Kann leider nicht auf IE6 verzichten :/
Ich sitze hier gerade in meiner Weiterbildung in Webdesign und bin von deiner genialen Seite einfach nur begeistert. Wollte ich nur mal gesagt haben. So als Anfängerin.
@ Vera: Super sache! Dankeschön!
danke jonas, ich habs grad mal ausprobiert. finds super ;)
Bzgl. IE6: Habe meine li’s noch mit folgendem erweitert:
#gallery li a span {visibility:hidden}
#gallery li a.current span,
#gallery li a:hover span {visibility:visible}
#gallery li a:hover{visibility:visible;}
Der IE schluckts problemlos :)
grüsse
vera
hallo – erst einmal super vielen dank für die gründliche darstellung. das ding läuft, trotz meiner doch recht wenigen erfahrungen. ich stehe jetzt davor, meine bildergalerie in eine weitere seite einzubinden – welche möglichkeiten habe ich mit java – php ist mir absolut fremd… würde mich über tips freuen, christiane
Ein hervorragendes Design und danke für dieser Kode!
Es inspiriert wenn mann solche Designs sieht.
GOIIIIIIL :)
und weisste was? scheiss auf IE6!
Wann starten wir endlich ne Kampagne um den auszurotten?
@ Gärtner: Selbstverständlich. Es können beliebig viele Bilder hinzugefügt werden. Es ist auch nicht festgelegt wo sich die Thumbnails befinden. Also können diese auch links vom Hauptbild oder darüber positioniert werden.
Kann man das auch erweitern wenn man mehre bilder hat?
@ Jens: Jau! Das sieht ja richtig gut aus.. ich werde mir das morgen mal in aller Ruhe zu Gemüte führen. Hatte ich bisher noch gar nichts von gehört.
Hallo Jonas,
also als „Kulturbanause“ kann man Dich nicht bezeichnen. Mit diesem Theme wirst Du neue Maßstäbe setzen! :-)
Aber zum allseits „beliebten“ IE6. Google mal nach „IE7.js“, und binde dieses Script von Dean Edwards mittels „Conditional Comments“ ein. Das Teil ist einfach genial! Wenn nun ein IE5/6-User auch noch JavaScript abgeschalten hat, na dann kann man ihm nicht helfen.
Viel Glück,
Jens
@ Tobias: Super! Freut mich sehr, dass Ihr Verwendung dafür finden konntet.
Vielen Dank.
Habe das glatt doch mal für unsere Vereinshomepage benutzt. Musste natürlich noch ein paar Dinge anpassen aber das ging dann auch leicht von der Hand.
Hier die Seite
http://www.badminton-vilsen.de/galerie.php
Genial!
Danke!
Hab hier auch mal so was gebastelt:
http://www.cube31.ch/erdgeschoss.php
Wirklich? Ich bild mir ein, erst vor kurzem noch mittels Auto-Update genervt worden zu sein, der neue IE würde sich ja so unheimlich gerne auf meinem System installieren – ist mein Zeitgefühl tatsächlich dermaßen im Eimer und das war anno dazumal der Wechsel zu IE6?
(Ich werd langsam alt XD)
Hab jedenfalls jetzt eine unsaubere, nicht standard konforme, nur im IE funktionierende und fürchterlich zusammengeschachtelte Lösung.
http://ie6sucks.nathrai.de/ie6_css_gallery.html
Ist natürlich nicht alltagstauglich – aber hier gings ohnehin nur noch darum, mein angeknakstes Ego wieder zu kitten… ;)
@Ben: Wenn ich nicht völlig hinterm Mond lebe, dann ist der IE7 noch nicht mit einem ServicePack ausgeliefert worden. Ich meinte das passiert mit dem kommenden SP3. Daher muss er momentan noch manuell installiert werden (zumindest über ein manuellen Windows-Update).
Und wer Windows nicht als Original besitzt klickt sicher nicht aufs Update :) das dürften einige sein …
Hi. I don’t speak your language, but I just had to drop in a note to say that this is the best designed site I have ever seen.
@Jonas: Nachdem ich inzwischen beruflich garnichts mehr mit CSS zutun hab, sollte ich das vermutlich auch langsam – aber leider sitzt derzeit mein Das-muß-doch-zu-schaffen-sein! Ego am längeren Hebel. :P
Wobei es mich schon ziemlich wundert, daß noch gar so viele Leute überhaupt mit dem IE6 arbeiten – die „Auf neue Version upgraden?“ Meldung hätte doch selbst für den größten DAU unmißverständlich sein sollen…
Super Sache. =)
@Ben: bei meiner privaten Seite lasse ich IE6 User mittlerweile außen vor. Für gewöhnlich baue ich dann eine weniger schöne aber nicht hässliche oder unfunktionale IE6-Lösung ein.
Wer nicht up-to-date ist bekommt eben auch nicht das beste! So ist das immer, nicht nur im Netz.
Hmph – hab jetzt 6 verschiedene Variationen ausgetestet, die allesamt in anderen Browsern funktionieren – die aber im IE6 jeweils an einem anderen der §$“/Q§$%“&“ bugs scheitern.
Ich versuch’s nach der Arbeit weiter, jetzt muß ich aber los – komm jetzt schon 20min zu spät…
(Merken: Keine Blogs am Morgen lesen XD)