Ränder bei Bildern unterdrücken

[toppy]

Wenn man auf einen Link klickt, welcher als Bild dargestellt wird, erscheint doch diese gepunktete Umrandung (siehe Anlage).

Kann man diesen unschönen Effekt irgendwie unterdrücken?

[azett]

Ich behaupte, daß das browserabhängig ist und nicht im Einflußbereich des Webdesigners liegt. Natürlich lasse ich mich da aber auch gern eines Besseren belehren.

[HJST1979]

Hallo

ich weiß nicht ob das geht aber ich könnte mir vorstellen, dass es mit text-decoration:none gehen sollte.

[azett]

ich könnte mir vorstellen, dass es mit text-decoration:none gehen sollte.

Nein, das ändert an dem beschriebenen Verhalten nix. text-decoration ist nur für Unter-, Über- und Durchstreichungen von Text zuständig und hat mit Links erstmal noch nix zu tun.

Edit: Die gepunktete Umrandung findet sich nicht nur beim Klicken auf verlinkte Bilder, sondern auch bei Textlinks - also allgemein bei Link-Elementen.

[toppy]

ich weiß nicht ob das geht aber ich könnte mir vorstellen, dass es mit text-decoration:none gehen sollte.

Nein, hat leider anscheinend keinen Einfluss auf die Darstellung.

[toppy]

Edit: Die gepunktete Umrandung findet sich nicht nur beim Klicken auf verlinkte Bilder, sondern auch bei Textlinks - also allgemein bei Link-Elementen.

Jup, hast Recht. Ist mir vorhin gar nicht aufgefallen.

Na vielleicht kennt ja noch jemand einen work-around...

[azett]

Der Firefox bestätigts: Es ist Browsersache.

About:config (Einstellungen - FirefoxWiki) (den Link mußt du dir händisch wegkopieren - die automatische Linkersetzung des Forums scheitert am enthaltenen Doppelpunkt):

browser.display.focus_ring_width

Integer

Legt die Dicke des Rahmens um fokusierte Links (oder allen Elementen, je nach dem wie browser.display.focus_ring_on_anything eingestellt ist) fest.

0: Der Rahmen wird nicht angezeigt.

1 (Standard): Die Punkte sind einen Pixel breit.

(Zahl): Der Rahmen ist so Zahl Pixel breit.

Achtung: Bei zu großen Zahlen kann der Browser abstürzen.

EDIT:

Spannend, das... o.O

<a href="test.html" onfocus="this.blur();">blubb</a>

[toppy]

Der Firefox bestätigts: Es ist Browsersache.

About:config (Einstellungen - FirefoxWiki) (den Link mußt du dir händisch wegkopieren - die automatische Linkersetzung des Forums scheitert am enthaltenen Doppelpunkt):

Super, klappt.

<a href="test.html" onfocus="this.blur();">blubb</a>

Nutze für Popups eine Java-Funktion, mit derer ich eine bestimmte Größe und weitere Sache festlege. Dort klappt es nicht.

Bei normalen Verknüpfungen funktioniert es - z.B. den Einträgen in der Navi o.ä.

Danke somit vielmals für deine Hilfe

Bevor ich jetzt alle Verknüpfungen bearbeite; du kannst ja etwas Java, oder?

Kann man eine kleine Javascript-Funktion basteln, welche allen <a href>-Verknüpfungen dieses onfocus=this.blur(); hinzufügt?

[azett]

Wichtig: Java != JavaScript

Bin auch noch am Überlegen, wie man das automatisch *allen* Links zuweisen könnte...wenn mir was einfällt, sag ich Bescheid.

[toppy]

Bin auch noch am Überlegen, wie man das automatisch *allen* Links zuweisen könnte...wenn mir was einfällt, sag ich Bescheid.

Vielleicht als Hilfe:

Nutze u.a. auch das JavaScript "Sweet Titles" --> Link

In einer der beiden js-Dateien kann man angeben, welche html-Tags mit der SweetTitles-Funktionalität erweitert werden sollen.

Vielleicht kannst du davon ableiten, wie man nach dem <a>-Tag sucht und diesen erweitert.

[azett]

Bin selbst kein JS-Gott, deswegen mal den Kollegen gefragt (danke MB ):

function fuegeOnFocusEventEin() {

            var array_of_links = document.getElementsByTagName("a");

            if (!array_of_links) {

                        // alert("Fehlerbeschreibung..."); // Fehlermeldung optional

                        return false;

            }

            // Hier wird jedem Link das onfocus-Attribut zugewiesen.

            for (var i = 0; i < array_of_links.length; i++) {

                        var current_link = array_of_links[i];

                        current_link.setAttribute("onfocus", "blur();");

            }

            return true;

}

Und für den Aufruf:

<html>

...

<body onLoad="fuegeOnFocusEventEin();">

...

</body>

</html>

Hat bei mir funktioniert.

Achso, was vielleicht noch wichtig wäre: Links, denen du ein onfocus="blur();" mitgibst, kannst du nicht mehr per Tastaturnavigation (mit Tab) erreichen. Die Frage ist, ob das im Sinne der Barrierefreiheit gewollt ist.

http://de.selfhtml.org/javascript/objekte/elements.htm#blur:

blur()

Entfernt den Cursor bzw. den Focus von dem betreffenden Element

[toppy]

Mh, klappt leider bei mir noch nicht.

Den JS-Code hab ich 'ne externe Datei ausgelagert.

Die html-Seite schaut wie folgt aus:

<html>

<head>

    <title>blablabla</title>

    <link rel=stylesheet type="text/css" href="../css/game.css">

	<script language="Javascript" src="../js/functions.js" type="text/javascript"></script>

</head>

<body onLoad="fuegeOnFocusEventEin();">


<div id="navi"><b>navi</b>

	<div id="pallino">

		<a href="./overview.php"><img name="Pallino" src="../images/pallino.gif" alt="Übersicht" title="Übersicht" border="0">

	</div>

</div>


</body>

</html>

In der externen JS-Datei steht noch mehr und das wird auch korrekt includet - daran kann's also eigentlich nicht scheitern.

[azett]

Bei mir funktionierts

Ersetz doch den Inhalt der Funktion mal spaßeshalber durch ein alert("ich bin die funktion"); - und dann schau, was passiert. Hm...hätte auf fehlerhafte Pfadangaben im script-Tag getippt, aber wenns die anderen Funktionen tun...? Komisch.

[toppy]

Mh, hab nochmal alles per Copy&Paste neu eingefügt und jetzt läuft's :upps

Besten Dank an dich und deinem Kollegen für die Hilfe

[azett]

Ich richts aus

[geloescht_JesterDay]

Wenn man auf einen Link klickt, welcher als Bild dargestellt wird, erscheint doch diese gepunktete Umrandung (siehe Anlage).

Kann man diesen unschönen Effekt irgendwie unterdrücken?

Ohne das jetzt probiert zu haben:

:active

Aktiver Hyperlink (Wenn der User mit der Maus auf den Link klickt.)

also sowas wie:

a img:active { border: 0; }

könnt ich mir vorstellen... (oder ganz ohne img, für alle Links)

[azett]

Aus eigenem Interesse grad mal getestet, das klappt leider nicht. Ein Klicken (und Halten) auf einen mit

a:active { border:1px solid; }

gestylten Link bewirkt einen Rahmen um den Link - und um diesen Rahmen herum liegt nochmal der gepunktete Fokusrahmen. Mit

a:active { border:0px solid; }

ist der innere Rahmen wieder weg, der Fokusrahmen allerdings bleibt.