nicht angemeldet
Hallo, nakedandfamous,
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.
Kann deine Seite nur mit Tastatur und aktivierter JavaScript-Unterstützung bedient werden?
Die Frage ist also, wie krieg ich die position eines links (der dann etwa eine eigene id hat) raus (und geht das mit javascript überhaupt?)
Im Posting [pref:t=49578&m=271055] habe ich beschrieben, wie sich die Objekteigenschaften offsetTop und offsetLeft abfragen lassen. Zu denen könntest du anhand der offsetWidth des Links wiederum einen Wert addieren und entsprechend das Element über die Objekteigenschaft .style.top und die anderen CSS-Positionseigenschaften versetzt erscheinen lassen (visibility auf »visible« setzen).
um dann relativ zu ihm den grafiklayer erscheinen zu lassen?
Ja, aber im Grunde nicht wirklich. Du weißt in der Regel nicht, an welcher der Stelle im Browserfenster der Link letztendlich erscheint und ob eventuell kein Platz ist. Das lässt sich auch schwer zuverlässig prüfen, zumal du damit rechnen musst, dass zahlreiche Browser und damit Benutzer über das System stolpern werden.
Ein rudimentäres (!) Beispiel, wie es funktionieren könnte, ohne Browserabfragen, welche hier besonders nötig wären:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen,tv,projection" title="Autorenformatvorlage">
html {padding:0;}
body {margin:0; padding:10px;}
#bla {border:1px solid red; margin:0; padding:5px; position:absolute; top:0; left:0; visibility:hidden; /* Breite (ist unten unflexibel festgelegt auf 100px): */ width:100px; background-color:white;}
.a {text-align:left;}
.b {text-align:right;}
</style>
<script type="text/javascript">
function zeigelayer (obj) {
var bodywidth=document.body.offsetWidth;
var leftundwidth=obj.offsetLeft+obj.offsetWidth;
var platzrechts=bodywidth-leftundwidth;
/* Ist rechts genug Platz? */
if (platzrechts>=155) {
/* Positioniere rechts vom Element */
var neueposition=(leftundwidth+50)+'px';
document.getElementById('bla').style.left=neueposition;
} else {
/* Ist links genug Platz? */
if (obj.offsetLeft>=105) {
/* Positioniere links vom Element */
document.getElementById('bla').style.left=(obj.offsetLeft-155)+'px';
}
}
document.getElementById('bla').style.top=obj.offsetTop+'px';
document.getElementById('bla').style.visibility='visible';
}
function versteckelayer () {
document.getElementById('bla').style.visibility='hidden';
}
</script>
</head>
<body>
<p class="a">This page is <a href="bla" onfocus="zeigelayer(this);" onblur="versteckelayer();">intentionally</a> left blank.</p>
<p class="b">This page is <a href="bla" onfocus="zeigelayer(this);" onblur="versteckelayer();">intentionally</a> left blank.</p>
<p class="a">This page is <a href="bla" onfocus="zeigelayer(this);" onblur="versteckelayer();">intentionally</a> left blank.</p>
<p class="a">This page is <a href="bla" onfocus="zeigelayer(this);" onblur="versteckelayer();">intentionally</a> left blank.</p>
<p class="b">This page is <a href="bla" onfocus="zeigelayer(this);" onblur="versteckelayer();">intentionally</a> left blank.</p>
<div id="bla">murks</div>
</body>
</html>
(Diesen Code kannst du wie gesagt nicht in dieser Form verwenden, es ist keine fertig anwendbare Lösung, nur eine Konzeptbeschreibung!)
Getestet habe ich es mit dem jeweils neusten Mozilla-Firebird, MSIE und Opera. Im Mozilla und MSIE können die Links mit Tabulator durchgeschaltet werden, im Opera mit den Tasten A und Q, und auf der jeweils gegenüberliegenden Seite sollte die murks-Box erscheinen.
Grüße,
Mathias
»In anderen Newsgroups werden Pseudonyme akzeptiert, es handelt sich dabei meist um Gruppen, in denen sensible Themen (z.B. psychische oder peinliche Erkrankungen o.ä.) behandelt werden.«