Grafiken beim Auswählen eines Links zeigen

[molily]

Hallo noch einmal,

Ich hab eine liste an links (ein link pro zeile).
Nun möchte ich, dass bei markierung mit der tab-taste jeweils in relativer position zum markierten link (zum beispiel jeweils direkt davor) ein layer mit einer grafik erscheint, der auf einen weiteren tab-druck dann wieder weiter vor den nächsten link wandert.

Vielleicht kannst du dein Ursprungsproblem konkreter und präziser beschreiben, denn je länger ich darüber nachdenke, kommen mir verschiedene Lösungen für verschiedene Probleme in den Kopf, welche sich aus deinem Posting herauslesen ließen. Insofern weiß ich nicht, ob die gepostete JavaScript-Lösung für dein spezielles Problem überhaupt angemessen ist.

Eine andere Lesart:

Falls du direkt vor einem Link eine Grafik erscheinen lassen willst, wenn der Link ausgewählt wird, gibt es zahlreiche viel simplere Möglichkeiten als die, die ich vorgestellt habe - die geht nämlich nur von einem irgendwie relativ positionierten Link aus, auch anders herum, als du im Beispiel genannt hast; wahrscheinlich hilft sie die folglich nicht viel weiter.

Eine einfache Möglichkeit ist, eine solche Grafik erscheinen zu lassen, ist eine »Blindgrafik« (ein transparentes 1x1 Pixel großes Gif-Bild oder Png-Bild) vor jeden Link in der jeweiligen Größe zu stellen und die Adresse (src-Attribut) dieses Bilders zu ändern, wenn der Link ausgewählt wird. Das Bild selbst kann natürlich mit CSS über die Seite verschoben werden oder schlichtweg danebengestellt werden. Damit sparst du dir den Ärger mit der nachträglichen Positierung, da die Grafik bereits von Anfang an ihren Platz hat. Siehe dazu das images-Element http://selfhtml.teamone.de/javascript/objekte/images.htm.
Von dieser Variante gibt es verschiedene Spielarten, du kannst beispielsweise ein CSS-Hintergrundbild auftauchen lassen, sodass das Markup selbst keine img-Elemente nötig sind. Im Mozilla geht das über a:focus ausschließlich mit CSS, in MSIE und Opera ist etwas JavaScript notwendig:

#eins a {padding-left:20px;}
#eins a:focus, .ausgewaehlt {background-image:url(http://forum.de.selfhtml.org/src/x2.gif); background-position:left; background-repeat:no-repeat;}

<ul id="eins">
<li><a href="link">link</a></li><!-- Nur Mozilla -->
<li><a href="link" onfocus="this.className='ausgewaehlt'" onblur="this.className=''">link</a></li><!-- Opera, Mozilla und MSIE -->
</ul>

Das Bild ist dann Teil des Links, sozusagen.

Weiterhin gibt es die Möglichkeit, die Grafiken zwar als img-Elemente im HTML-Code unterzubringen, sie aber über visibility:hidden zu verstecken und über einen passenden Selektor bei :focus auftauchen zu lassen... Mit JavaScript wird wieder die Klasse über className geändert.

#zwei a {text-decoration:none;}
#zwei a img {visibility:hidden; border-style:none;}
#zwei a:focus img, .sichtbar {visibility:visible !important;}

<ul id="zwei">
<li><a href="link"><img src="http://forum.de.selfhtml.org/src/x2.gif"/> link</a></li><!-- Nur Mozilla -->
<li><a href="link" onfocus="this.childNodes[0].className='sichtbar'" onblur="this.childNodes[0].className=''"><img src="http://forum.de.selfhtml.org/src/x2.gif"/> link</a></li><!-- Opera, Mozilla und MSIE -->
</ul>

childNodes http://selfhtml.teamone.de/javascript/objekte/node.htm#child_nodes ist DOM-Syntax (childNodes[0] spricht den erste Kindknoten an, das ist das img-Element), nicht sehr kompatibel, es ist wieder nur ein einfaches Theoriebeispiel.
Auch hier ist die Grafik Teil des Links, sie könnte aber auch absolut positioniert werden, also aus dem Fluss genommen werden beispielsweise über position:absolute; left:30px;. (Bei beispielsweise position:relative; left:-20px; wird die Grafik zwar 20px um ihre Ursprungsposition verschoben, an der Ursprungsstelle bleibt jedoch ein imaginärer Platzhalter, das heißt, die nachfolgenden Elemente werden so angezeigt, als wäre die Grafik noch an ihrem alten Platz.) Dadurch könnte die zum Link gehörende Grafik auch optisch weit entfernt stehen.

Falls du übrigens mit »Wandern« eine geschmeidige Bewegung meintest, habe ich dich falsch verstanden, ich ging von »Springen« aus (Grafik erscheint bei dem einen Link ruckartig, verschwindet kurz für eine nicht merkbare Zeit und taucht sofort wieder vor dem nächsten auf).

Die Nennung von Opera bezieht sich immer auf die 7er-Version, die des MSIEs auf die 6er.

Grüße,
Mathias