michaelsinterface.de

blur.links

Verweise in HTML-Dokumenten, also Hyperlinks in Form von Texten, Grafiken und verweis-sensitiven Grafiken (ImageMaps), aber auch die Klick-Buttons von Formularen werden von diversen Browsern beim Anklicken automatisch mit einer gepunkteten Umrandung markiert.

Dieser Rahmen stellt zwar den Fokus des angeklickten Elements dar, doch gibt es Fälle, in denen er das Gesamtbild des Layouts beeinträchtigt, und vom Autor an gewissen Stellen nicht erwünscht ist.

In diesem Tutorial stelle ich eine Methode mittels Javascript vor, die die Darstellung des Fokus unterbindet.

text-link  grafik-link

button 1 button 2 button 3

onfocus="this.blur()"

Dieser IE-Standard lässt sich deaktivieren, indem der Event-Handler onfocus= (beim Anklicken) mit der JavaScript-Anweisung "this.blur()" im HTML-TAG notiert wird:

<p><a href="demo.htm" onfocus="this.blur()">text-link</a></p>

<p><a href="demo.htm" onfocus="this.blur()"><img src="img/up.png" border="0" alt=""></a></p>

<p>
    <img src="img/imgMap.png" border="0" usemap="#Map" alt="">
    <map name="Map">
        <area href="demo.htm" onfocus="this.blur()" shape="rect" coords="0,16,100,32">
        <area href="demo.htm" onfocus="this.blur()" shape="rect" coords="0,36,100,52">
        <area href="demo.htm" onfocus="this.blur()" shape="rect" coords="0,56,100,72">
    </map>
</p>

<form action="">
      <p><input type="submit" value="submit" onfocus="this.blur()"></p>
</form>

text-link  grafik-link

button 1 button 2 button 3

JavaScript

Bei umfangreichen Webseiten / Projekten mit vielen Verweisen, wie z.B. Link-Datenbanken, ist das einzelne Einfügen des Event-Handlers viel zu zeitaufwendig.

In diesem Fall eignet sich folgende JavaScript-Funktion, die mit der getElementsByTagName -Methode alle HTML-Elemente <a> und <area> innerhalb des Dokumentes anspricht und ihnen so den Event-Handler mit der Anweisung onfocus="this.blur()" beim Seitenaufruf automatisch zuweist.

function BlurLinks(){

// Text- u. Grafik-Links
lnks=document.getElementsByTagName('a');
for(i=0;i&lt;lnks.length;i++){
lnks[i].onfocus=new Function("this.blur()");
}

// ImageMaps
lnks=document.getElementsByTagName('area');
for(i=0;i&lt;lnks.length;i++){
lnks[i].onfocus=new Function("this.blur()");
}
}

onload=BlurLinks;

Für Klick-Buttons <input type="button"> muss in der Script-Funktion die getElementsByName -Methode zum Einsatz kommen, da sonst die einzeiligen Eingabefelder <input type="text">, oder die Eingabebereiche für Passwörter <input type="password"> in dem Formularfeld ausser Kraft gesetzt werden und die Texteingabe dann blockiert ist!

// Klick-Buttons
lnks=document.getElementsByName('Verweis');
for(i=0;i&lt;lnks.length;i++){
lnks[i].onfocus=new Function("this.blur()");
}

Der gewählte Attribut-Name Verweis ist im Tag für den Klick-Button zu notieren:

<input type="button" name="Verweis" value="submit">

Quelltext

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>::: blur.links :::</title>

<script type="text/javascript">
<!--
function BlurLinks(){
// Text- u. Grafik-Links
lnks=document.getElementsByTagName('a');
for(i=0;i<lnks.length;i++){
lnks[i].onfocus=new Function("this.blur()");
}
// ImageMaps
lnks=document.getElementsByTagName('area');
for(i=0;i<lnks.length;i++){
lnks[i].onfocus=new Function("this.blur()");
}
// Klick-Buttons
lnks=document.getElementsByName('Verweis');
for(i=0;i<lnks.length;i++){
lnks[i].onfocus=new Function("this.blur()");
}
}
onload=BlurLinks;
//-->
</script>

</head>
<body>

<ul>
    <li><a href="demo.htm">link 1</a></li>
    <li><a href="demo.htm">link 2</a></li>
    <li><a href="demo.htm">link 3</a></li>
</ul>
<p>
   <img src="img/imgMap.png" border="0" usemap="#Map" alt="">
   <map name="Map">
        <area href="demo.htm" shape="rect" coords="0,16,100,32">
        <area href="demo.htm" shape="rect" coords="0,36,100,52">
        <area href="demo.htm" shape="rect" coords="0,56,100,72">
   </map>
</p>
<form action="">
      <p><input type="submit" name="Verweis" value="submit"></p>
</form>

</body>
</html>