Discussion :

[3psilOn]

Bonjour,

Comment peut-on désactiver la bordure en pointillé d'un lien créé sur une image via l'outil map ?

Mon code est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<img src="photos/1.jpg" width="800" height="600" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="46,98,737,378" href="#" />
</map>

En effet, dans certains navigateur, la bordure apparaît, dans d'autres non.
Je cherche à la désactiver par défaut...

Merci de votre aide.

[Erwan31]

Bonsoir,
essaye avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

outline:none

[3psilOn]

Le "outline:none" appliqué à map, area et même à img ne donne rien, il y a toujours un trait en pointillé qui apparaît...

Sur Firefox et IE, on peut le remarquer en faisant une sélection par tabulation... Mais sur mon navigateur en question, le trait apparaît sur le champs !

Comment me débarrasser de ce truc

PS: le respect des standards d'accessibilité est indispensable, mais mon petit projet s'adresse uniquement à un public particulier, en plus le trait me gêne...

[Erwan31]

Mais sur mon navigateur en question, le trait apparaît sur le champs !

De quel navigateur parles tu? As tu une page en ligne?

PS: le respect des standards d'accessibilité est indispensable, mais mon petit projet s'adresse uniquement à un public particulier, en plus le trait me gêne...

Quel public? Pour info le outline est un plus ergonomique qui permet d'identifier visuellement l'élément qui a le focus en accès clavier, le supprimer n'est donc pas très recommandé.

[HiRoN]

En rajoutant un onfocus="this.blur();" sur ta balise area ? (afin de supprimer les pointillés lors de la sélection, je n'ai jamais essayé sur cette balise)

Pour bien apprendre CSS suis ces tutoriels et cours de formation CSS : http://css.developpez.com/cours/

[blueice]

Avec un :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
outline:0;

[3psilOn]

onfocus="this.blur();" ne fait que montrer la bordure lorsqu'on clique dessus, alors qu'elle n'apparaissait pas sans !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<area shape="rect" coords="200,200,600,400" href="#" onfocus="this.blur();" />

Le outline:0 ou outline:none ne donne rien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<area shape="rect" coords="200,200,600,400" href="#" style="outline:0;" />

Pour illustrer le phénomène, il suffit de cliquer sur la photo et ensuite sur tabulation, la bordure apparaît sur l'objet area.

Le navigateur dont je parle est un logiciel de conférence, il s'agit d'un diaporama qui fait défiler des photos, pour gagner en terme d'espace j'ai implanté les liens suivant et précédent sur les photos en utilisant l'outil map... Donc, l'ergonomie n'est pas vraiment importante pour mon usage, par contre elle gêne la fluidité du diaporama... Voilà pourquoi je cherche à me débarrasser de la bordure.

[GihefBey]

Bonjour,

Essaye en plaçant réellement la zone dans un lien

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" style="outline: none;" shape="rect" coords="200,200,600,400" /></a>

Ou en créant de nouveaux styles pour gérer certaines pseudo-classes.
Vois 18.4.1 Les contours et la sélection (N.D.T. focus)
-

Et pour bien te former : lire les Cours et tutoriels pour apprendre CSS : https://css.developpez.com/cours/

[3psilOn]

Le code ci-dessous est signalé invalide dans dreamweaver, parce que d'après lui certaines propriétés ne doivent pas se trouver à l'intérieur de la balise <a>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<img src="photos/1.jpg" width="800" height="600" border="0" usemap="#Map" />
<map name="Map" id="Map" >
<a href="#" style="outline:none;" shape="rect" coords="46,98,737,378"></a>
</map>

Mais ça n'empêche que le lien fonctionne, sauf que la bordure persiste

Je crois qu'elle est inévitable celle là

Quant au code ci-dessous, il donne rien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<style type="text/css">
area:focus {
	outline:none;
}
area:active {
	outline:none;
}
</style>

Je crois que ce serait plus rapide de chercher une autre solution pour implémenter les liens de navigation... Quid à les mettre à l'extérieur des photos, si au delà des photos la bordure apparaisse ça gêne pas le diaporama