swap image - kader verwijderen

[gast0515]

hoi,

ik werk in dreamweaver.
Ik heb plaatjes gemaakt, die onderdelen vormen van de menu.
Als je op een van deze klikt, wordt je verwezen naar de andere pagina.
Hier gebruik ik swap image fuctie voor:

<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>


<div id="project"><a href="project.html"><img src="plaatjes/project.jpg" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','plaatjes/project01.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></div>


Maar elke keer als ik op het plaatje klik, krijg ik zwarte kader er omheen te zien.
Hoe kan ik deze kader wissen/verwideren?
Kan iemand mij helpen?

 

[csshunter]

Hoi gast0515,

• Zie hier!

Met vriendelijke groet,
CSShunter

 

[gast0515]

Hallo CSShunter,

ik heb jouw codes al eerder gezien en toegepast maar het lost mijn probleem niet op.
Steeds als ik o het plaatje klik zie ik de zwarte kader omheen. Is er geen "decoration" code die toegepast kan worden voor de swap image functie?

groet,

 

[csshunter]

Hoi gast0515,
Ik snap niet zo wat er gebeurt. Vanwege de border="0" zou het image toch geen zwarte of andere kleur border mogen krijgen, zou je zeggen. Tenzij er ergens in het stylesheet iets verordonneerd staat met een !important-regel, of als het hover-plaatje net iets kleiner is en de backgroundkleur zwart is; in die geest. Of als één van de images per ongeluk zelf een zwarte rand heeft.
Er is wel "text-decoration", maar die slaat alleen op de link-onderstreping en niet op een volledig kader om een image heen.
Heb je een link naar een pagina waar het verschijnsel zich voordoet?

Met vriendelijke groet,
CSShunter

 

[gast0515]

kijk op www.hku.nl
Klik op de menu, links in het beeld (beeldende kunst, games en interactie, kunstamanagement...) zodra je erop klikt, verschijnt er een border.
Als de tweede pagina geladen is ga weer terug, naar de eerste pagina en je ziet er ook de border nog staan om de menu "balk" heen.

groet

 

[gast0515]

het is zichtbaar ook op deze site (http://www.helpmij.nl/forum/forumdisplay.php?f=247&order=desc). Klik op een van de onderwerpen en je ziet de border verschijnen.

met vriendelijke groet,

 

[csshunter]

Aha, nu snap ik 'm.
Het kader is geen echte border om de links heen (die staan ook op "none" ingesteld) maar de zogenaamde "outline". Dat is een stippeltjes-randje dat als het goed is, altijd verschijnt als je op een link klikt, of als je van een pagina teruggaat naar de vorige pagina.
Als het goed is?
Ja, want deze stippeltjeskadertjes hebben een duidelijke bedoeling, en horen niet te ontbreken:

• Als je terugkomt, geven ze aan waar je vandaan komt ( a:visited ). Nu zou dat misschien soms gemist kunnen worden.
• Als een link op een pagina "focus" krijgt, geven ze aan waar die link zich op het beeldscherm bevindt. Dat mag nooit gemist worden.

De reden zit in de toegankelijkheid. Iemand die geen muis kan gebruiken, zapt van link naar link op een pagina met de Tab-toets. Om een link te volgen, geef je dan Enter.

• Experiment: leg je muis op z'n kop. Tab-toets door de pagina. Waar zou je zitten als er geen stippeltjes waren?
  - Onbekend, dus kan er ook niet op de goede link geklikt worden => menu-links èn alle interne en alle externe links zijn volstrekt onbereikbaar geworden!

Nu zijn er hele volksstammen, die de stippeltjes "niet mooi" vinden, en de outline op nul zetten. Dat zijn dus:

1. Webdesigners die zich niet bewust zijn wat de gevolgen ervan zijn: de website is niet voor iedereen toegankelijk.
2. Webdesigners die het geen fok kan schelen of dat zo is, onder het motto "dat is toch niet de primaire doelgroep, die geld in het laatje brengt". Die mogen wat mij betreft een stevige Opfriscursus Mentaliteit krijgen.

Nu zijn er ook wat visuele alternatieven, bv. een menutekst iets laten opschuiven als deze focus krijgt, en/of kleuren laten veranderen. Voorbeeld: dit is hier toegepast (maar dan wel in combinatie met de stippeltjes; die bij images of echte borders moeilijker zichtbaar zijn).
Belangrijke nadelen: bij kleurwisseling moet je terdege rekening houden met alle vormen van kleurenblindheid, anders is de site voor Tab-bende kleurenblinden nog niet toegankelijk. Plus: de Tabbers verwachten de stippeltjes, en worden tureluurs als ze op verschillende sites verschillende focus-manifestaties krijgen voorgeschoteld.

Conclusie:
Ik zou de stippeltjes lekker laten staan.

Wat je nog wel kunt doen om het leed iets te verzachten, is de links aan de linker- en rechterkant een kleine padding geven:

[FONT="Courier New"][SIZE="2"]a { padding: 0 2px; }[/SIZE][/FONT]

Dat oogt wat beter, omdat dan de stippeltjes niet pal tegen de tekst aan komen te staan.

Met vriendelijke groet,
CSShunter

PS:
De stippeltjes nemen in de layout (in tegenstelling tot borders) géén ruimte in. Zie de css-eigenschappen van de outline.
Verder leesvoer bv. via Google: css outline accessibility.