Partage
  • Partager sur Facebook
  • Partager sur Twitter

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 

    • Partager sur Facebook
    • Partager sur Twitter
      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

      • Partager sur Facebook
      • Partager sur Twitter

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

        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 

        • Partager sur Facebook
        • Partager sur Twitter
          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

          • Partager sur Facebook
          • Partager sur Twitter
            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

            • Partager sur Facebook
            • Partager sur Twitter

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

              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;

              }

              • Partager sur Facebook
              • Partager sur Twitter
                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

                • Partager sur Facebook
                • Partager sur Twitter

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

                  2 février 2020 à 17:59:46

                  Voici le code de ma page 

                  <html>

                  <head>

                  <title>Human</title>

                  <link rel="stylesheet" media="all" type="text/css" href="style.css" />

                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

                  <script src="../test/jQueryAssets/jquery-1.11.1.min.js"></script>

                  <script src="../test/jQueryAssets/jquery-ui-effects.custom.min.js"></script>

                  <script type="text/javascript">

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

                  {

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

                  }

                  </script>

                  <style type="text/css">

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

                  <div class=pop id=img> </div>

                  <script type="text/javascript">

                  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>

                  <img src="images/human.png" width="800" height="793" border="0" usemap="#map" />

                  <map name="map">

                  <!-- #$-:Image map file created by GIMP Image Map plug-in -->

                  <!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->

                  <!-- #$-:Please do not edit lines starting with "#$" -->

                  <!-- #$VERSION:2.3 -->

                  <!-- #$AUTHOR:Laeti & Rico -->

                  <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>

                  • Partager sur Facebook
                  • Partager sur Twitter
                    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

                    • Partager sur Facebook
                    • Partager sur Twitter

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

                      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;

                      }

                      • Partager sur Facebook
                      • Partager sur Twitter
                        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; }

                        ou

                        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)

                        • Partager sur Facebook
                        • Partager sur Twitter

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

                          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

                          • Partager sur Facebook
                          • Partager sur Twitter
                            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

                            • Partager sur Facebook
                            • Partager sur Twitter

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

                              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

                              • Partager sur Facebook
                              • Partager sur Twitter
                                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());
                                }
                                • Partager sur Facebook
                                • Partager sur Twitter

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

                                  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

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    3 février 2020 à 7:19:36

                                    Pour mozilla :

                                    a::-moz-focus-inner {
                                      border: 0;
                                      outline:none;
                                    }
                                    • Partager sur Facebook
                                    • Partager sur Twitter

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

                                      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

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        4 février 2020 à 6:54:29

                                        Pas de soucis, pense à mettre en résolu :)
                                        • Partager sur Facebook
                                        • Partager sur Twitter

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

                                        Comportement Area Chrom vs Mozilla

                                        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                        • Editeur
                                        • Markdown