Gernot Back: gestrichelte linie um bild - warum nicht mit CSS oder HTML?

Beitrag lesen

SELF-Forum

gestrichelte linie um bild - warum nicht mit CSS oder HTML?

Gernot Back Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo D.R.,

Und was ist mit outline:0 das geht zurzeit zwar nur in Firefox, wird aber voraussichtlich Standard.

Für den IE kannst du einen ähnlichen Effekt erreichen, wenn du "hidefocus" in das Link-Element einbaust (z.B: <a href="Zeilpfad" hidefocus>Linktext</a>"). Du das aber sehr aufwendig ist, würde ich die Eigenschaft nur in die Links setzen, die durch den Rahmen wirklich extrem versaut werden. Die CSS-Eigenschaft, kann man dagegen einfach generell für Links definieren.

Ich finde das nicht allzu aufwändig, und wenn man das proprietäre MSIE-Attribut hidefocus, das ich durch deinen Beitrag überhaupt erst jetzt kennen gelernt habe, mit in einer Initialisierungsfunktion mit Javascript zuweist, dann schluckt es auch der Validator.

In diesem Beispiel habe ich spaßeshalber mal den IE und den Firefox optisch an das Highlightverhalten von Opera angepasst, das dieser bei Links zeigt, wenn man Tabindizes vergibt.

Jetzt müsste ich die gehighlighteten Stellen nur auch noch selektieren, sodass man sie, wenn sie fokussiert sind, wie bei Opera auch in die Zwischenablage kopieren kann:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>Mit Tasten navigieren ohne &bdquo;h&auml;ssliche&ldquo; Outline</title>  
<style type="text/css">  
[code lang=css]  
a { outline:0;color:black; }  
a:focus, a:active { background-color:highlight;color:highlighttext; }

</style>
<script type="text/javascript">

  
window.onload = function () {  
 var allLinks = document.all.tags('a') || document.getElementsByTagName('a');  
 for (i=0; i< allLinks.length; i++) {  
  allLinks[i].setAttribute('hidefocus', 'true' , 0);  
  allLinks[i].onfocus = function () { this.style.backgroundColor = 'highlight';}  
  allLinks[i].onblur = function () { this.style.backgroundColor = ''; }  
 }  
}

</script>
</head>
<body>
 <form action="#" method="post">
  <p>
   <a href="#" tabindex="1">Link1</a>
   <input type="text" size="6" value="Feld1" id="Text1" name="Text1"  tabindex="2" />
  </p>
  <p>
   <a href="#" tabindex="3">Link2</a>
   <input type="text" size="6" value="Feld2" id="Text2" name="Text1"  tabindex="4" />
  </p>
  <p>
   <a href="#" tabindex="5">Link3</a>
   <input type="text" size="6" value="Feld3" id="Text3" name="Text1"  tabindex="6" />
  </p>
  <p>
   <a href="#" tabindex="7">Link4</a>
   <input type="text" size="6" value="Feld4" id="Text4" name="Text1"  tabindex="8" />
  </p>
 </form>
</body>
</html>
[/code]

Gruß Gernot

Beitrag melden
–
Informationen zu den Bewertungsregeln