verwijderen kader bij actieve links bij afbeeldingen

[HenkRog]

Hallo,

wanneer ik op een afbeelding (.png) met een link klik komt er een stippelijn-kader rond te staan. Hoe kan ik dat afzetten?

Ik heb al geprobeerd op de volgende manier maar het lukt niet:

.infogegevens a:active img {
	border: none;
}
.infogegevens a:focus img {
	border: none;
}

 

[flitsflitsflits]

Ik denk dat je op zoek bent naar:

img.infogegevens {
	border: none;
}

Maar als je toch per css class een wijziging wilt aanbrengen kun je dat op deze manier doen:

img.infogegevens:hover{
	border: none;
}

 

[HenkRog]

Misschien moet ik nog wat meer info geven:

in mijn html ziet het er zo uit

<div class="infogegevens">
Test<br />
Test<br /> 
<strong>Test</strong>
<br />
<br />
<a target="_blank" href="http://www.test.com">
<img src="images/test1.png" width="17" height="17" /></a>
<a target="_blank" href="print.htm">
<img src="images/print.png" width="17" height="17" /></a>
</div>

Als ik in de css bij focus en bij active bvb. een groene kader om de image zet dan doet hij dat EN hij zet er ook nog een stippelijnkader bij (als ik er op klik wel te verstaan), als ik border: none zet blijft hij de stippelijnkader nog steeds gebruiken als ik erop klik.

 

[Goeroeboeroe]

Dat 't 'n png is, of zelfs feitelijk 'n afbeelding, maakt niet uit. 't Zelfde gebeurt als het 'n tekstlink is.
Als 'n link focus heeft of actief is, komt er gewoon 'n soort border omheen. Zodat je kunt zien waar je naartoe gaat als je op Enter drukt. Dat is niet onbelangrijk voor mensen die, mogelijk vanwege 'n handicap, geen muis kunnen gebruiken.
Je kunt dit niet in alle browsers uitzetten omdat het belangrijk is voor toegankelijkheid. Wat in sommige browsers werkt is border: 0; (of border: none; ) en in sommige browsers werkt outline: 0;
Ik weet niet uit m'n hoofd wat waar werkt, omdat ik het nooit uitzet vanwege de nadelen voor toegankelijkheid.

 

[csshunter]

Hoi Henk,

(...) zodat je kunt zien waar je naartoe gaat als je op Enter drukt.

Dat kan geïnterpreteerd worden als: "als je op de Tab-toets drukt".

• Nog wat toelichting staat in deze post.

Maar ik begrijp dat je via een border-kleurwisseling het actieve linkend image wilt weergeven. Dan zouden alléén voor de images de stippeltjes uitgezet kunnen worden zonder de toegankelijkheid geweld aan te doen. Puntjes om hierbij in de gaten te houden:

• De gewone tekst-links moeten wèl de stippeltjes houden.
• De kleuren van de borders moeten voldoende kleurverschil en contrastverschil hebben t.o.v. de omringende achtergrond-kleur. In de IE toegankelijkheids-toolbar WAT zit een optie om de kleurverschillen en intensiteitsverschillen te checken (Colour > Color Contrast Analyser). Deze Color Contrast Analyser is ook als los programma te downloaden.
• En het kleurverschil en contrastverschil tussen de borders bij de gewone en de :focus status moet óók voldoende groot zijn, anders ziet men geen verschil!
• Dit geldt met name voor kleurenblinden: de twee kleuren voor de verschillende statussen moeten ook nog getest worden op voldoende verschil bij diverse soorten kleurenblindheid. Zie bv. dit artikel en het online test-instrumentarium van wickline of de online check van vischeck.
• En als alles heelhuids door alle tests heen komt (!), blijft nog staan, dat mensen die op de Tab-toets zijn aangewezen èn mensen met verminderd gezichtsvermogen gewoon gewend zijn om op de stippeltjes te letten. Voor hen gaat het gebruiksgemak sowieso achteruit bij vervangen van de stippeltjes door een andere visuele verandering, want voor hen zijn die stippeltjes juist bedoeld.

Al met al laat ik daarom, net als Goeroeboeroe, de stippeltjes rustig voor wat ze zijn. Dan is de pagina in ieder geval het meest toegankelijk, en tenslotte zie je bij muisgebruik die stippeltjes maar een fractie van een tel: bij de klik op de link. Dat moet de goed-geoogde muisgebruikende surfer dan maar voor lief nemen!
En ik gok 9 van de 10 mensen zullen het niet eens in de gaten hebben *) dat die stippeltjes er even waren: ze zijn daarop totaal niet gefocust, want heel hongerig naar wat er op de volgende pagina staat!

Met vriendelijke groet,
CSShunter

*)
Oefening: proberen je de tien laatst bezochte websites voor de geest te halen, en uit je hoofd zeggen of ze wel of niet de stippeltjes hadden verwijderd... Mij lukt het niet!

 

[Goeroeboeroe]

Ahem, ik word echt oud. Dit had ik per ongeluk in 'n totaal andere draad gepost. Alsnog...

Ha, ik blijk wat achter te lopen. 't Is ook al 'n tijd geleden dat ik 't geprobeerd heb. Even snel gekeken hoe 't nu is. En 't blijkt dat je inmiddels ook in Safari en Firefox 't uit kan schakelen met outline.
In Opera kun je 't niet uitschakelen en dat is jammer, want Opera heeft 'n omkadering die zelfs 'n blinde mol nog op hol zou doen slaan. Safari is trouwens nog erger, maar die kun je inmiddels dus uitzetten of aanpassen.
IE 6 en 7 kun je trouwens ook niet uitzetten, IE 8 wel.
Ik vind 't trouwens af en toe wel storend, want als je 'n link hebt aangeklikt en teruggaat via de back-knop van de browser, heeft die link nog steeds focus. En dus die omkadering. En dat kan inderdaad foeilelijk zijn bij zo'n door 'n kleurenblinde bedacht brandalarm als Opera (of Safari standaard) gebruiken.

Maar hoe dan ook, csshunter, hartelijk dank: ik ben weer helemaal bij en weet nu dat je inmiddels behalve bij IE 6 en 7 en Opera overal die outline kan aanpassen!