Zum Inhalt springen
View in the app

A better way to browse. Learn more.
Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Ränder bei Bildern unterdrücken

toppy
in Webdesign

Empfohlene Antworten

Veröffentlicht

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?

post-12488-1443044767194_thumb.jpg

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.

  • Autor
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...

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>

  • Autor
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?

  • Autor
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.

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

  • Autor

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.

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.

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)

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.

Erstelle ein Konto oder melde dich an, um einen Kommentar zu schreiben.

Zur Themenliste gehen

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.