nicht angemeldet
Hallo liebe Helfer,
ich möchte eine Bildergalerie mit folgender Funktionalität und Design erstellen:
Es gibt eine Reihe von Thumbnails mit kurzem Untertitel.
Beim Hovern eines Thumbnails wird das zugehörige Bild in mittlerer Größe auf der gleichen Seite eingeblendet, und zwar so, das es von der Thumbnailreihe teilweise überdeckt wird.
Bei Klick auf ein Thumbnail wird eine neue Seite geladen, die z.B. das Bild in voller Pracht und etwas beschreibenden Text enthält.
Mein Ansatz:
<ul>
<li>
<a href="Ziel.htm">
<img src="Thumbnailgrafik.jpg" alt="...">
Linktext (gleichzeitig Untertitel für Thumbnail)
<span><img src="Das-Bild-mittelgross.jpg" alt="..."></span>
</a>
</li>
<!-- weitere <li> mit Thumbnails -->
<ul>
Das Popup-Verhalten und die gewünschte Überlappung möchte ich über folgende CSS-Auszeichnung erreichen:
#bildmenu {
position:absolute; top:130px; left:630px; height:480px;
padding:0; margin:0;
list-style:none;
}
/* Die Thumbnailgrafik: */
#bildmenu li a>img {
width:120px; height:79px;
position:relative; top:0; z-index:10;
}
/* nicht sichtbares, mittelgroßes Bild */
#bildmenu li a span img { width:0; height:0; border-width:0; z-index:0; }
/* beim Hovern eingeblendetes, mittelgroßes Bild */
#bildmenu li a:hover span img {
position:absolute;
top:-10px; left:-610px; width:620px; height:410px;
z-index:0;
}
Ein vollständiges Beispiel habe ich hier hochgeladen.
Problem 1:
Im IE6 erscheint beim Hover das Popup-Bild nicht. Ist mir absolut rätselhaft, weil ich diese Technik schon öfter erfolgreich eingesetzt habe, irgendwie peile ich nicht, was ich hier anders/falsch mache. In Opera 9 und Firefox 1.5 klappt es prima.
Problem 2:
Wie gewünscht, wird das beim Hovern erscheinende mittelgroße Bild von den Thumbnail_grafiken_ überlagert, der eigentliche Linktext jedoch wird halb überdeckt. Mir ist bewußt, daß bei Verschachtelung von Elementen ein neuer lokaler z-index Stapel für die Kinder erzeugt wird, aber die richtigen Schlußfolgerungen konnte ich daraus noch nicht ziehen.
Danke für jede Hilfe
Shepard