Partage

Comportement Area Chrom vs Mozilla

Sujet résolu

30 janvier 2020 à 21:41:04

Bonjour,

je viens de créer une image cliquable avec pop up associé qui fonctionne bien, sauf que lorsque je charge avec chrome j'ai le contour du lien area qui apparaît en bleu alors que sous mozilla je ne vois rien (ce que je souhaite)

comment puis je m'en sortir pour ne pas voir apparaître ce contour sous chrome?

Merci d'avance

Mehddii

31 janvier 2020 à 7:45:02

Bonjour,

Généralement les conteur bleu sont des style de base de la part de google chrome (ex : Après avoir cliquer sur un bouton -> border blue autour de ce dernier etc ...)

Pour régler ça, tu peux faire :

outline:0; /ou/ outline:none; /ou/ border:0; /ou/ text-decoration:none;

Sinon, si aucun ne fonctionne, tu peux voir la propriété qui cause cela dans inspecter l'élément (généralement un border blue ou box-shadow) et agir en conséquence, peut-être en faisant un !important

-
Edité par Mehddii 31 janvier 2020 à 7:45:35

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

EricJoé

31 janvier 2020 à 13:38:02

Bonjour

Merci de ton retour, je vais regarder ce qui ne va pas avec tes solutions.

Je ferai un retour par la suite.

Merci et bonne journée

EricJoé

2 février 2020 à 14:21:02

Bonjour,

je viens de tester mais j'ai toujours le même problème.....peut etre que l'info sur mon css n'est pas pris en compte car j'ai coupé mes area à un script java?

pas simple ces differences entre mozilla et chrome

voici mon code de l'inspection element en piece jointe

Merci et bon dimanche

Mehddii

2 février 2020 à 14:24:51

Pas très bien compris, peux-tu nous montrer en screenshot le problème causé

Ainsi que la partie css de ton inspecter l'élément

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

EricJoé

2 février 2020 à 17:15:21

c'est l'entourage bleu du bras qui ne va pas quand on clique on le vois , normalement sur mozilla je ne le vois pas apparaître?

Mon css correspondant merci

body

{

width:100%;

margin:auto;

max-width:1200px;

text-align:center;

outline:0;

outline:none;

border:0;

text-decoration:none;

}

Mehddii

2 février 2020 à 17:55:31

Essayes un area:focus { outline:none }

Il s'agit du css du body, ce qui ne sert à rien par rapport à ton problème

J'aimerais voir le css du <area>

Sinon vu que ton truc c'est un lien, alors il faudrait peut-être faire un a:focus {outline:none}

Ou border, mais comme dit précédemment, il me faudrait le css de ton area

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

EricJoé

2 février 2020 à 17:59:46

Voici le code de ma page

<html>

<head>

<title>Human</title>

function MM_DW_effectHighlight(obj,method,effect,color,speed)

{

obj[method](effect, {color:color}, speed);

}

</script>

.pop { POSITION: absolute; VISIBILITY: hidden }

a:link {

text-decoration: none;

}

a:visited {

text-decoration: none;

}

a:hover {

text-decoration: none;

}

a:active {

text-decoration: none;

}

</style>

if (document.getElementById){

box = document.getElementById("img").style;

if(navigator.appName.substring(0,3) == "Net")

document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = pointer;

}

function poplink(contenu){

var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000><TR><TD> <TABLE WIDTH=1 CELLPADDING=3 CELLSPACING=1><TR><TD BGCOLOR=#FFFFFF><CENTER>"+contenu+"</CENTER></TD></TR></TABLE></TD></TR></TABLE>";

if (document.getElementById)

{

document.getElementById("img").innerHTML =

content;

box.visibility = "visible";

}

function pointer(e)

{

var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;

var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;

box.left = x+100;

box.top = y-100;

}

function closepopup()

{

if (document.getElementById)

box.visibility = "hidden";

}

</SCRIPT>

</head>

<body>

<area shape="poly" coords="6,5,7,23,8,27,1,38,8,58,10,75,30,93,50,123,63,131,100,176,127,208,147,221,165,224,205,237,239,247,262,249,291,263,313,232,320,214,289,191,259,189,225,187,174,175,146,150,99,116,64,89,66,71,58,45,55,34,54,17,40,17,38,25,44,48,27,39,26,31,34,21,30,14,20,20,14,1,7,1" HREF="menu-ms.html" target="Menu" title="Membre supérieur" onMouseOver="poplink('<img src=images/imagette-mbresup.jpg> ')" onmouseout="closepopup()" />

<area shape="poly" coords="295,194,301,201,326,206,354,202,387,194,414,160,417,137,413,120,404,101,367,85,338,86,320,101,308,123,307,139,297,147,302,162,296,174" HREF="menu-crane.html" target="Menu" title="Neuro" onMouseOver="poplink('<img src=images/imagette-neuro.jpg> ')" onmouseout="closepopup()" />

<area shape="poly" coords="384,198,400,211,434,228,458,243,415,262,366,275,350,279,326,263,299,254,321,217,321,207" HREF="menu-cou.html" target="Menu" title="Cou-ORL" onMouseOver="poplink('<img src=images/imagette-orl.jpg> ')" onmouseout="closepopup()" />

<area shape="poly" coords="390,270,400,282,424,298,453,321,474,328,488,346,547,398,582,416,616,433,656,459,651,467,650,470,656,477,667,480,691,533,703,525,691,500,727,507,731,463,710,458,691,443,639,403,613,382,587,367,569,356,537,302,506,276,467,243,457,243" HREF="menu-ms.html" target="Menu" title="Membre supérieur" onMouseOver="poplink('<img src=images/imagette-mbresup.jpg> ')" onmouseout="closepopup()" />

<area shape="poly" coords="291,264,301,306,312,358,334,370,371,376,405,379,440,380,452,355,452,319,409,287,393,272,353,279,330,265,302,254"

HREF="menu-thorax-seno.html" target="Menu" title="Poitrine" onMouseOver="poplink('<img src=images/imagette-poitrine.jpg> ')" onmouseout="closepopup()" />

<area shape="poly" coords="329,369,340,401,343,445,356,484,397,551,418,526,419,502,448,473,487,455,461,436,439,413,440,379,439,382"

HREF="menu-abdopelv.html" target="Menu" title="Abdomino-pelvien" onMouseOver="poplink('<img src=images/imagette-abdo.jpg> ')" onmouseout="closepopup()" />

<area shape="poly" coords="486,456,518,486,525,516,531,537,524,563,561,604,579,629,637,637,670,668,715,702,741,686,743,694,747,705,750,714,763,733,792,757,791,766,796,776,788,783,714,747,664,720,591,687,577,682,554,684,463,629,428,659,451,664,468,680,484,697,498,685,520,700,544,745,539,788,529,788,492,768,479,747,441,728,391,724,362,716,343,689,346,664,373,589,397,550,421,526,420,502,452,473"

HREF="menu-mi.html" target="Menu" title="Membre inférieur" onMouseOver="poplink('<img src=images/imagette-mbinf.jpg> ')" onmouseout="closepopup()" />

<area shape="poly" coords="452,324,478,333,486,348,464,392,454,413,454,430,439,413,441,377,453,348,450,322,468,328"

HREF="menu-rachis.html" target="Menu" title="Rachis" onMouseOver="poplink('<img src=images/imagette-rachis.jpg> ')" onmouseout="closepopup()" />

</map>

</body>

</html>

Mehddii

2 février 2020 à 18:08:20

Bon, on s'est toujours pas compris, j'aimerais que tu fasses :

- Inspecter l'élément sur ton area qui dispose de la bordure bleu

- Screenshot la partie css se trouvant à droite dans la partie style

Au passage, tu peux séparer tes liens par des virgules dans ton css et éviter la répétition de text-decoration:none

a:visited, a:active, a:hover { text-decoration: none; }

Sinon me passer la lien de ton site web

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

EricJoé

2 février 2020 à 18:09:43

je viens d'appliquer de faire le css à area et ça fonctionne sous chrome : merci il n'y a que sous IE où il reste des pointillées....

area { outline:0;

outline:none;

border:0;

text-decoration:none;

}

Mehddii

2 février 2020 à 18:27:43

Bon, je t'ai donner une technique pour pouvoir trouver la solution tout seul, mais tu ne veux pas l'appliquer

Essayes de faire :

area:focus { outline:none; }

a:focus { outline:none; }

Pour infos, :focus c'est lorsque tu clic dessus (donc lorsqu'on clic sur le lien, on dit au navigateur de supprimer les outline qui sont mit de base par ce dernier)

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

EricJoé

2 février 2020 à 18:52:09

Mon site n'est pas encore en ligne donc difficile de le partager .....

l'entourage bleu sous chrome est resolu avec area {outline:none;} mais je conserve un entourage en pointillé sous *IE

je te donne le sreenshot : desolé je n'avais pas bien lu ton message....

consernant area:focus { outline:none; } a:focus { outline:none; } je n'ai pas eu de resultat different sous IE

Merci encore pour ton aide

Mehddii

2 février 2020 à 19:15:53

Apparemment, d'après mes recherches tu ne peut pas enlever les pointillés sur IE sauf en incluant cette balise meta :

<meta http-equiv="X-UA-Compatible" content="IE=9" />

et dans ton css met :

a:hover, a:active, a:focus {
  outline:none;
}

Remplace les a par area si ça ne fonctionne pas, mais normalement c'est les liens ici

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

EricJoé

2 février 2020 à 20:28:44

J'en arrive à la meme conclusion, et cela ne change rien malgré la balise et le complément CSS , j'ai toujours les pointillés

Je vais voir ce que je peux faire, Merci beaucoup

Mehddii

2 février 2020 à 20:37:44

En complément de mes recherches, je remarque que IE ne supporte pas la propriété outline

Donc essayes de mettre cette expression, je crois que ça fonctionne :

a:focus, *:focus {
    noFocusLine: expression(this.onFocus=this.blur());
}

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

EricJoé

2 février 2020 à 21:34:06

Non cela ne fonctionne pas ....par contre je viens d'ajouter à la balise aera : onfocus="this.blur();"

Cela a enlever les pointillés sur IE mais en a mis sur Mozilla alors que chrome n'a pas changé....Mystere

Mehddii

3 février 2020 à 7:19:36

Pour mozilla :

a::-moz-focus-inner {
  border: 0;
  outline:none;
}

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

EricJoé

3 février 2020 à 21:08:36

Hello

pas de modification.....je crois que je vais indiquer que le site sera optimisé sous Mozilla et chrome

Merci beaucoup pour ton aide

Mehddii

4 février 2020 à 6:54:29

Pas de soucis, pense à mettre en résolu

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...