Hallo cssanfängel,
mit CSS ist das ebenso möglich. Es ist schade, dass du mit den o.g. Hinweisen nichts anfangen kannst. Ich habe mir deine Seite noch mal angesehen und denke, dass die Technik mit der Verschiebung eines Bildes unter einer Blende viel zu aufwändig ist. Es geht m.E. einfacher, wenn du für jeden Link ein entsprechendes Bild mit gleicher Größe bereitstellst und diese im Link als IMG-Element unterbringst.
Also ein entsprechender Navigationscontainer würde beispielsweise so aussehen:
HTML:
<div id="nav">
<a href="#">Verweis1<img src="fstern1.gif" alt=""></a><br>
<a href="#">Verweis2<img src="fstern2.gif" alt=""></a><br>
<a href="#">Verweis3<img src="fstern3.gif" alt=""></a>
</div>
Diesen Block kannst du dann im BODY oder in einem Rahmencontainer irgendwo positionieren und die Links (A-Elemente) wie üblich mit CSS formatieren. Dabei ist zu beachten, dass in der hover-Pseudoklasse des A-Elements ein zusätzlicher Initialisierungswert mit untergebracht wird (hier "text-indent: 0;", rot markiert), da sonst der Internet-Explorer nicht mitspielt (vgl.
http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp).
Die IMG-Elemente werden dann über eine absolute Positionierung an ihren Standort gesetzt. Diese Positionierung ist eine relative Verschiebung bezüglich der Position des Navigationscontainers, der dabei die Rolle des Elternelements übernimmt. Im Normalfall wird den IMG-Elementen eine Größe von Null zugewiesen, so dass sie nicht sichtbar sind. In der hover-Pseudoklasse wird ihnen dann ihre ursprüngliche Größe zugewiesen. Das ist alles.
Code:
#nav {
position: absolute;
top: 280px;
left: 525px;
}
a {
text-decoration: none;
font-size: 1em;
line-height: 1.7em;
color: #333;
}
a:hover {
color: #c00;
text-indent: 0; /* für IE notwendig!
siehe http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp */
}
a img {
position: absolute;
top: -150px; /* rel. Bildposition y */
left: -200px; /* rel. Bildposition x */
width: 0; /* Bildgröße = 0 */
height: 0;
border-width: 0;
cursor: default;
}
a:hover img, a img.zeigen {
width: 85px; /* tatsächliche Bildgröße */
height: 85px;
}
Wenn im Normalfall ein Bild sichtbar sein soll, dann kannst du diesem IMG-Element die Klasse "zeigen" zuweisen, z.B. so:
Code:
<div id="nav">
<a href="#">Verweis1<img class="zeigen" src="fstern1.gif" alt=""></a><br>
<a href="#">Verweis2<img src="fstern2.gif" alt=""></a><br>
<a href="#">Verweis3<img src="fstern3.gif" alt=""></a>
</div>
Ich habe eine Demo-Datei mit passenden Bildern angehängt. Ich hoffe, dass dir das weiterhilft.
