IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Navigateurs Change background


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Homme Profil pro
    dessinateur
    Inscrit en
    avril 2019
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : dessinateur

    Informations forums :
    Inscription : avril 2019
    Messages : 25
    Points : 8
    Points
    8
    Par défaut Navigateurs Change background
    Bonjour à tous,
    Ce code fonctionne très bien sur chrome, les backgrounds s’enchaînent bien lorsque je survole mon cadre.. Sur mozilla, une bref page blanche se produit lors du 1er mouseover et donc du 1er changement d’arrière plan... ensuite ils s'enchainent correctement.
    Sur IE, a chaque mouseover, ce bref instant 'blanc' fait surface

    Avez vous une idée (car cela me dérange..), ou peut êtrece code n'est il pas l'idéal.
    J'ai essayé avec addeventlistener mais le phénomène est le même..

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    <style>
    .cadre {
    position: absolute;
    width: auto;
    height: auto;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
        }
    .image {
      display: block;
        width: auto;
        height: auto;
    }
     
    body
    {
    margin:0;
    padding: 0;
      background: url("img/FOND3.jpg") no-repeat center fixed; 
      -webkit-background-size: cover; /* pour Chrome et Safari */
      -moz-background-size: cover; /* pour Firefox */
      -o-background-size: cover; /* pour Opera */
      background-size: cover; /* version standardisée */
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;}
    </style>
     
    <div id=cadre class=cadre onmouseover="over()"  onmouseout="out()" style='top:8%; left:8%;'><img src="img/svalbard.jpg"  class="image" alt="Le Svalbard" />
    </div>
     
    <script type="text/javascript">
    var body = document.getElementsByTagName ("body")[0];
    var cadre = document.getElementsById("cadre");
    function over() {
    body.style.backgroundImage = 'url(\'img/FOND3spitz.jpg\')';
    body.style.backgroundSize = "cover";
    }  
    function out() {
    body.style.backgroundImage = 'url(\'img/FOND3.jpg\')';
    body.style.backgroundSize = "cover";
    }   
    </script>

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 090
    Points : 6 741
    Points
    6 741
    Par défaut
    C’est un phénomène dont tu entendras parler sur le Web parfois sous le nom de « flicker » (littéralement « scintillement »). En général on l’évite en pré-chargeant les images. Quelques simples instructions comme suit suffisent :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    const $preloadImg = document.createElement("img");
    $preLoadImg.src = 'img/FOND3spitz.jpg';
    Sinon, tu peux tenter de changer la classe de <body> plutôt que changer le CSS directement. IE voudra peut-être mieux coopérer avec des images de fond déclarées dans un CSS statique.
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    body {
      background-image: url('img/FOND3.jpg');
      background-size: cover;
     
    body.hovered {
      background-image: url('img/FOND3spitz.jpg');
      background-size: cover;
    }

    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function over() {
      document.body.classList.add("hovered");
    }
     
    function out() {
      document.body.classList.remove("hovered");
    }
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Futur Membre du Club
    Homme Profil pro
    dessinateur
    Inscrit en
    avril 2019
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : dessinateur

    Informations forums :
    Inscription : avril 2019
    Messages : 25
    Points : 8
    Points
    8
    Par défaut
    Merci pour ta réponse...
    Après vérification ce code ne fonctionne pas: la seconde image spitz ne s'affiche carrément plus
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
     
    .cadre {
    position: absolute;
    width: auto;
    height: auto;
        }
    .image {
      display: block;
        width: auto;
        height: auto;
    }
    body
    {
    margin:0;
    padding: 0;
      background: url("img/FOND3.jpg") no-repeat center fixed; 
      -webkit-background-size: cover; /* pour Chrome et Safari */
      -moz-background-size: cover; /* pour Firefox */
      -o-background-size: cover; /* pour Opera */
      background-size: cover; /* version standardisée */
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;}
    </style>
     
    <div id=cadre class=cadre onmouseover="over()"  onmouseout="out()" style='top:8%; left:8%;'><img src="img/svalbard.jpg"  class="image" alt="Le Svalbard" />
    </div>
     
    <script type="text/javascript">
    const $preloadImg = document.createElement("img");
    $preLoadImg.src = 'img/FOND3spitz.jpg';
    var body = document.getElementsByTagName ("body")[0];
    var cadre = document.getElementsById("cadre");
    function over() {
    body.style.backgroundImage = 'url(\'img/FOND3spitz.jpg\')';
    body.style.backgroundSize = "cover";
    }  
    function out() {
    body.style.backgroundImage = 'url(\'img/FOND3.jpg\')';
    body.style.backgroundSize = "cover";
    }   
    </script>
    Concernant ta seconde façon de procéder, je ne comprends pas bien. Le bodybg doit se changer lorsque l'on survole un div 'cadre'. pourquoi body.hovered ? De plus j'ai plusieurs images de fond qui viendront en fonction des différents cadres que je survolerai.
    Merci pour ton aide

  4. #4
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 090
    Points : 6 741
    Points
    6 741
    Par défaut
    Citation Envoyé par Charal72 Voir le message
    Merci pour ta réponse...
    Après vérification ce code ne fonctionne pas: la seconde image spitz ne s'affiche carrément plus
    As-tu testé avec plusieurs navigateurs ?
    Si l’image est très volumineuse, il est possible que le navigateur n’arrive plus à la réafficher depuis le cache. Par exemple, j’ai déjà vu ça arriver avec Firefox. Vérifie la taille de tes images, compresse-les si c’est possible.

    Concernant ta seconde façon de procéder, je ne comprends pas bien. Le bodybg doit se changer lorsque l'on survole un div 'cadre'. pourquoi body.hovered ?
    C’est juste un nom de classe. Je l’ai peut-être mal choisi, j’aurais pu mettre par exemple .fond-alternatif.

    Si tu veux rajouter des cadres, il faut commencer à s’organiser un peu. Tu pourrais par exemple mettre l’URL de l’image dans un attribut data, puis la passer en paramètre à ta fonction over().

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div class="cadre" data-fond="img/FOND3spitz.jpg"> ... </div>
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    document.addEventListener("mouseover", function (event) {
      if (event.target.matches(".cadre")) {
        over(event.target.dataset.fond);
      }
    });
     
    document.addEventListener("mouseout", function (event) {
      if (event.target.matches(".cadre")) {
        out();
      }
    });
     
    function over(imageUrl) {
      document.body.style.backgroundImage = `url('${imageUrl}')`;
      document.body.style.backgroundSize = "cover";
    }
     
    function out() {
      document.body.style.backgroundImage = "url('img/FOND3.jpg')";
      document.body.style.backgroundSize = "cover";
    }

    J’ai choisi mouseenter et mouseleave plutôt que mouseover et mouseout car ils sont plus pratiques : ils n’émettent pas de faux positifs quand tu survoles un élément enfant de l’élément ciblé.

    J’ai également utilisé addEventListener pour éviter d’avoir des attributs on* partout dans le code HTML.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  5. #5
    Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    décembre 2004
    Messages
    5 751
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : décembre 2004
    Messages : 5 751
    Points : 14 919
    Points
    14 919
    Par défaut
    Salut

    Essais de modifier ta ligne 26 ainsi
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="cadre" class="cadre" onmouseover="over()"  onmouseout="out()" style="top:8%; left:8%;"><img src="img/svalbard.jpg"  class="image" alt="Le Svalbard" />
    Prend l’habitude de mettre soit des ' soit des ", mais ne les mélangent pas, ce sera plus facile de lire ton code et éventuellement l'interpréteur du navigateur sera content.
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.
    👉 → → Ma page perso sur DVP ← ← 👈

  6. #6
    Futur Membre du Club
    Homme Profil pro
    dessinateur
    Inscrit en
    avril 2019
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : dessinateur

    Informations forums :
    Inscription : avril 2019
    Messages : 25
    Points : 8
    Points
    8
    Par défaut
    Vérifie la taille de tes images, compresse-les si c’est possible.
    C'est fait..aucune modif. même résultat et mêmes effets que ceux cités précédemment.

    J’ai également utilisé addEventListener pour éviter d’avoir des attributs on* partout dans le code HTML.
    Désolé..je n'y arrive pas! toujours ce scintillement..je vais essayer en préloadant les imgs.

    Prend l’habitude de mettre soit des ' soit des ", mais ne les mélangent pas, ce sera plus facile de lire ton code et éventuellement l'interpréteur du navigateur sera content.
    Merci pour ce conseil.. mais il n'influe pas sur le résultat

  7. #7
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 090
    Points : 6 741
    Points
    6 741
    Par défaut
    Bonjour,
    j’ai fait une grosse bourde hier en essayant de déléguer les évènements mouseenter et mouseleave. Ces évènements, par conception, ne bouillonnent pas, on ne peut donc pas les déléguer.

    Du coup j’ai fait une page de test en utilisant la propriété relatedTarget des évènements mouseover et mouseout. Voici le code complet de ma page.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    <!DOCTYPE html>
    <html lang="fr">
    <head>
      <meta charset="utf-8" />
      <title>Changement de fond au survol</title>
      <style>
     
      body {
        background-image: url('img/FOND3.jpg');
        background-size: cover;
        background-color: black;
        color: white;
      }
     
      body.fond-alternatif {
        background-image: url('img/FOND3spitz.jpg');
        background-color: red;
      }
     
      .cadre {
        width: 300px;
        height: 300px;
        background: rgba(196, 255, 112, 0.5);
      }
     
      .cadre div {
        width: 60px;
        height: 60px;
        display: inline-block;
        margin: 1em;
        background: rgba(255, 255, 255, 0.5);
      }
     
      </style>
    </head>
    <body>
     
    <h1>Changement de fond au survol</h1>
     
    <div class="cadre">
      <div></div>  <div></div>  <div></div>
    </div>
     
    <script> "use strict";
     
    const over = () => {
      document.body.classList.add("fond-alternatif");
    };
     
    const out = () => {
      document.body.classList.remove("fond-alternatif");
    };
     
    const isDescendant = (aChild, aParent) => {
      if (!aChild || !aParent) return false;
     
      let found = false;
      let element = aChild.parentElement;
      while (!found && element) {
        if (element === aParent) found = true;
        element = element.parentElement;
      }
      return found;
    };
     
    document.addEventListener("mouseover", (event) => {
      if (event.target.matches(".cadre")) {
        if (!isDescendant(event.relatedTarget, event.target)) {
          console.log("%cmouseover%c on en veut bien", "color: orange", "");
          over();
        }
        else {
          console.log("%cmouseover%c non merci", "color: orange", "");
        }
      }
    });
     
    document.addEventListener("mouseout", (event) => {
      if (event.target.matches(".cadre")) {
        if (!isDescendant(event.relatedTarget, event.target)) {
          console.log("%cmouseout%c on en veut bien", "color: cyan", "");
          out();
        }
        else {
          console.log("%cmouseout%c non merci", "color: cyan", "");
        }
      }
    });
     
    </script>
    </body>
    </html>

    J’ai mis une couleur de fond rouge pour bien voir le flash. Et j’ai bel et bien un flash rouge, sous Firefox et sous Vivaldi (un équivalent de Chrome que j’avais sous la main).

    Ça ne change rien de précharger l’image avec la technique document.createElement("img"). En fait, en regardant dans la console réseau, on voit que le problème se produit même quand les images ont un code 304 (qui signifie qu’elles sont obtenues depuis le cache du navigateur). Je pense que le problème est en fait lié à la compression de l’image (jpeg, png, etc.), et que la latence qui provoque le flash est dûe au temps que met le navigateur à décoder l’image en bitmap brut.

    Du coup je me suis dit : passons par un canevas pour décoder l’image à l’avance. Et ça a l’air de marcher… Mais accroche-toi, c’est plutôt velu

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    <!DOCTYPE html>
    <html lang="fr">
    <head>
      <meta charset="utf-8" />
      <title>Changement de fond au survol</title>
      <style>
     
      body {
        background-image: url('img/FOND3.jpg');
        background-size: cover;
        background-color: black;
        color: white;
      }
     
      body.fond-alternatif {
        background-color: red;
      }
     
      .cadre {
        width: 300px;
        height: 300px;
        background: rgba(196, 255, 112, 0.5);
      }
     
      .cadre div {
        width: 60px;
        height: 60px;
        display: inline-block;
        margin: 1em;
        background: rgba(255, 255, 255, 0.5);
      }
     
      </style>
    </head>
    <body>
     
    <h1>Changement de fond au survol</h1>
     
    <div class="cadre">
      <div></div>  <div></div>  <div></div>
    </div>
     
    <script> "use strict";
     
    // changement : over reçoit une URL en paramètre, et on n’agit plus sur la classe,
    // on manipule directement backgroundImage
    const over = (imageUrl) => {
      document.body.style.backgroundImage = `url('${imageUrl}')`;
    };
     
    const out = () => {
      document.body.style.backgroundImage = "";
    };
     
    const isDescendant = (aChild, aParent) => {
      if (!aChild || !aParent) return false;
     
      let found = false;
      let element = aChild.parentElement;
      while (!found && element) {
        if (element === aParent) found = true;
        element = element.parentElement;
      }
      return found;
    };
     
    // on n’écoute pas tout de suite l’évènement mouseover,
    // on attend d’avoir décodé les images
     
    document.addEventListener("mouseout", (event) => {
      if (event.target.matches(".cadre")) {
        if (!isDescendant(event.relatedTarget, event.target)) {
          console.log("%cmouseout%c on en veut bien", "color: cyan", "");
          out();
        }
        else {
          console.log("%cmouseout%c non merci", "color: cyan", "");
        }
      }
    });
     
    // les images décodées sont représentées sous forme de blobs,
    // il faut les révoquer au déchargement de la page pour libérer la mémoire
    const urlsToRevoke = [];
    window.addEventListener("unload", () => {
      console.log(`revoking object URLs now (length = ${urlsToRevoke.length})`);
      for (const url of urlsToRevoke) {
        URL.revokeObjectURL(url);
      }
    });
     
    // la fonction de décodage, elle renvoie une promesse
    const decodeImage = (imageUrl) => new Promise((resolve, reject) => {
      const $img = document.createElement("img");
     
      $img.addEventListener("error", (error) => {
        // en cas d’erreur de chargement de l’image, on rejette la promesse
        reject(error);
      });
     
      $img.addEventListener("load", (loadEvent) => {
        if ($img.complete && $img.naturalWidth > 0) {
          // crée un canevas aux dimensions de l’image
          const $canvas = document.createElement("canvas");
          $canvas.width = $img.naturalWidth;
          $canvas.height = $img.naturalHeight;
     
          // dessine l’image dans le canevas
          const cx = $canvas.getContext("2d");
          cx.drawImage($img, 0, 0);
     
          // crée un blob à partir du canevas
          $canvas.toBlob((blob) => {
            // crée une URL « blob: »
            const blobURL = URL.createObjectURL(blob);
            urlsToRevoke.push(blobURL);
     
            // on résoud la promesse avec l’URL du blob
            resolve(blobURL);
          }, { type: "image/bmp" }); // type bitmap = sans compression
        }
      });
     
      // initie le chargement de l’image
      $img.src = imageUrl;
    });
     
    decodeImage("img/FOND3spitz.jpg").then((blobURL) => {
      // la fonction .then() est appelée quand la promesse est résolue,
     // on peut alors écouter mouseover
      document.addEventListener("mouseover", (event) => {
        if (event.target.matches(".cadre")) {
          if (!isDescendant(event.relatedTarget, event.target)) {
            console.log("%cmouseover%c on en veut bien", "color: orange", "");
            over(blobURL);
          }
          else {
            console.log("%cmouseover%c non merci", "color: orange", "");
          }
        }
      });
    });
     
    </script>
    </body>
    </html>
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 779
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 779
    Points : 40 083
    Points
    40 083
    Par défaut
    Bonjour,
    il y aurait une autre approche possible.

    • Mettre sur l'élément <html> le même background que celui du <body>.
    • Au survol du « cadre » on modifie le background du <body> ce qui laisse apparaître celui du <html> le temps du téléchargement.

    Ce qui pourrait donner quelque chose comme :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Changement de fond au survol</title>
    <style>
    html, body {
      margin: 0;
      padding: 1px;
      min-height: calc(100vh - 4px);
    }
    html, body {
      background-size: cover;
      background-image: url(https://cyberzoide.developpez.com/misc/background12-1600x1200.jpg);
    }
    body.cadre-over {
      background-image: url(https://cyberzoide.developpez.com/misc/background12b-1600x1200.jpg);
    }
    .cadre {
      width: 10em;
      height: 10em;
      margin: 5em;
      background-color: #ABC;
    }
    </style>
    </head>
    <body>
      <h1>Changement de fond au survol</h1>
      <div class="cadre"></div>
    <script>
    "use strict";
    function changeFond(){
      const oBody = document.querySelector("body");
      oBody.classList.toggle("cadre-over");
    };
    const oCadre = document.querySelector(".cadre");
    oCadre.addEventListener("mouseenter", changeFond, false);
    oCadre.addEventListener("mouseleave", changeFond, false);
    </script>
    </body>
    </html>

  9. #9
    Membre éclairé
    Femme Profil pro
    Autre
    Inscrit en
    janvier 2017
    Messages
    327
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : janvier 2017
    Messages : 327
    Points : 687
    Points
    687
    Par défaut
    Bonjour,
    J'ai regardé un peu vos codes et fait quelques tests avec de grosses images.
    L'idée de NoSmoking est efficace, mais il reste tout de même intéressant d'avoir une solution sans devoir doubler l'image.

    Par défaut, pour moi, le scintillement n'a lieu que la première fois (exception : à retester, mais, sur Internet Explorer, quand on change la propriété style.backgroundImage, il m'a semblé que le scintillement pouvait se répéter).

    Si je teste le code de Watilin avec canvas, j'ai quand même un scintillement, mais peut-être ai-je mal testé.
    Malgré tout, je vois une solution toute simple avec canvas : faire simplement un drawImage et rester sur les urls initiales.

    J'ai fait ce test en reprenant un peu vos codes, mais en simplifiant au maximum pour que ce soit compréhensible par tous :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    	<meta charset="utf-8">
    	<title>Changement de fond au survol</title>
    	<style>
            body
                    {
                    background-size:cover;
                    background-image:url(img1.jpg);
                    }
            body.cadre-over
                    {
                    background-image:url(img2.jpg);
                    }
            .cadre
                    {
                    width:100px;
                    height:100px;
                    background-color:#999999;
                    }
            </style>
    </head>
    <body>
    	<div class="cadre"></div>
    	<script>
            "use strict";
     
            function changeFond()
                    {
                    document.body.classList.toggle("cadre-over");
                    }
            function quandImagesChargees()
                    {
                    const oCadre=document.querySelector(".cadre");
                    oCadre.addEventListener("mouseenter",changeFond);
                    oCadre.addEventListener("mouseleave",changeFond);
                    }
            const oImg=document.createElement("img");
            oImg.onload=function()
                    {
                    const oImg=document.createElement("img");
                    oImg.onload=function()
                            {
                            document.createElement("canvas").getContext("2d").drawImage(this,0,0);
                            quandImagesChargees();
                            };
                    oImg.src="img2.jpg";
                    };
            oImg.src="img1.jpg";
            </script>
    </body>
    </html>
    Sur Firefox, Edge et Chrome, je n'ai ainsi pas de scintillement.
    Sur Internet Explorer, il m'avait semblé parfois avoir un scintillement, mais là en réessayant de nouveau, je n'en ai plus.

  10. #10
    Futur Membre du Club
    Homme Profil pro
    dessinateur
    Inscrit en
    avril 2019
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : dessinateur

    Informations forums :
    Inscription : avril 2019
    Messages : 25
    Points : 8
    Points
    8
    Par défaut
    Mais accroche-toi, c’est plutôt velu
    Effectivement..enfin je vais tenter de comprendre ..mais t'ai je tout expliqué?? sur chaque cadre il faut une image différente..je vais regarder ton code et merci pour ton implication !

    Bonjour,
    il y aurait une autre approche possible.

    Mettre sur l'élément <html> le même background que celui du <body>.
    Au survol du « cadre » on modifie le background du <body> ce qui laisse apparaître celui du <html> le temps du téléchargement.
    Je vais également regarder le tien..plus facile, ça me plait

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 779
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 779
    Points : 40 083
    Points
    40 083
    Par défaut
    Citation Envoyé par Loralina
    mais il reste tout de même intéressant d'avoir une solution sans devoir doubler l'image
    cela a été fait un peu rapidement, pas optimisé, car en fait il n'y a pas à disposer d'un double background, il suffit de ne pas en mettre sur le <body> au départ.

    Le nouveau CSS
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    html, body {
      margin: 0;
      padding: 1px;
      min-height: calc(100vh - 4px);
      background-size: cover;  
    }
    html{
      background-image: url(https://cyberzoide.developpez.com/misc/background12-1600x1200.jpg);
    }
    body.cadre-over {
      background-image: url(https://cyberzoide.developpez.com/misc/background12b-1600x1200.jpg);
    }
    .cadre {
      width: 10em;
      height: 10em;
      margin: 5em;
      background-color: #ABC;
    }

  12. #12
    Futur Membre du Club
    Homme Profil pro
    dessinateur
    Inscrit en
    avril 2019
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : dessinateur

    Informations forums :
    Inscription : avril 2019
    Messages : 25
    Points : 8
    Points
    8
    Par défaut
    Sur Firefox, Edge et Chrome, je n'ai ainsi pas de scintillement.
    Sur Internet Explorer, il m'avait semblé parfois avoir un scintillement, mais là en réessayant de nouveau, je n'en ai plus.
    Je n'en ai pas non plus.

    Merci à tous les 2: vos solutions fonctionnent impec ! plus de scintillement.
    La suite: c'est de différencier les body.hover en fonction du cadre que l'on survole..

  13. #13
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 090
    Points : 6 741
    Points
    6 741
    Par défaut
    Citation Envoyé par Loralina Voir le message
    Si je teste le code de Watilin avec canvas, j'ai quand même un scintillement, mais peut-être ai-je mal testé.
    Je ne pense pas que tu aies mal testé… Mon hypothèse sur la décompression des images est probablement incorrecte.

    Citation Envoyé par Loralina Voir le message
    Malgré tout, je vois une solution toute simple avec canvas : faire simplement un drawImage et rester sur les urls initiales.
    Eh bien c’est comique, quand je teste ta solution chez moi, j’ai un scintillement
    Nos différents résultats montrent que l’apparition du problème est fortement dépendante de la plateforme (puissance de la machine, etc.) et du navigateur, il faut donc qu’on se concentre sur une solution qui ne fait pas de supposition sur la mécanique interne des navigateurs (pas comme j’ai fait quoi).

    Parce que le cœur du problème en fait, c’est que : lorsque les navigateurs chargent / décodent / je-sais-pas-quoi les images, ils ne laissent pas l’image précédente visible… Du coup c’est à nous de le faire.

    Il y a une demi-solution assez simple : ajouter au body une règle background-color avec la « couleur moyenne » de l’image de survol. Si l’image est à peu près uniforme, ça rend le scintillement moins violent.
    Mais dans l’essence, la proposition de NoSmoking, à savoir superposer les images, est la plus fiable à mon avis.

    Citation Envoyé par Charal72 Voir le message
    ..mais t'ai je tout expliqué?? sur chaque cadre il faut une image différente..
    Ne t’inquiète pas, je n’avais pas oublié Mais ne brûlons pas les étapes. Une fois qu’on aura réglé de problème du scintillement, le reste sera plus facile !
    Edit : je n’avais pas vu ta réponse de 16h58.
    Je te propose une solution à base d’attribut data- :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <div class="cadre" data-page-background="img/img1.jpg"></div>
    <div class="cadre" data-page-backrgound="img/img2.jpg"></div>
    En reprenant mon code qui délègue mouseover et mouseout, il est facile d’accéder au chemin d’image voulu en utilisant event.target et en consultant sa propriété dataset.pageBackground :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    document.addEventListener("mouseover", (event) => {
      if (event.target.matches(".cadre")) {
        if (!isDescendant(event.relatedTarget, event.target)) {
          const imageUrl = event.target.dataset.pageBackground;
          over(imageUrl);
        }
      }
    });
    La fonction qui gère "mouseout" ne change pas, ni ma fonction isDescendant(). Les fonctions over() et out() sont à présent comme suit :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    const over = (imageUrl) => {
      document.body.style.backgroundImage = `url(${imageUrl})`;
    };
     
    const out = () => {
      document.body.style.backgroundImage = "";
    };
    J’ai repris, à peu de choses près, les styles de NoSmoking :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
      html, body {
        margin: 0;
        padding: 1px;
        background-size: cover;
        min-height: calc(100vh - 4px);
      }
     
      html {
        background-image: url('img/img0.jpg');
      }
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  14. #14
    Membre éclairé
    Femme Profil pro
    Autre
    Inscrit en
    janvier 2017
    Messages
    327
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : janvier 2017
    Messages : 327
    Points : 687
    Points
    687
    Par défaut
    Bonjour,
    Citation Envoyé par Watilin Voir le message
    Eh bien c’est comique, quand je teste ta solution chez moi, j’ai un scintillement
    Merci pour ce retour.

    Mais dans l’essence, la proposition de NoSmoking, à savoir superposer les images, est la plus fiable à mon avis.
    Oui, quand c'est applicable.
    Il reste qu'en cas de survol, on a deux images l'une sur l'autre : là où ce peut être gênant par exemple, c'est si on utilise des png avec alpha.

    Un autre piste à confirmer :
    Quand l'image du survol est présente dans la page, je n'ai pas de scintillement.
    Une solution pourrait être d'intégrer cette image dans l'arborescence en la cachant au mieux, sachant que display:none n'est, si je me souviens bien, pas applicable. A voir avec visibility, ou en essayant une taille à 0...

  15. #15
    Futur Membre du Club
    Homme Profil pro
    dessinateur
    Inscrit en
    avril 2019
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : dessinateur

    Informations forums :
    Inscription : avril 2019
    Messages : 25
    Points : 8
    Points
    8
    Par défaut
    le temps que j'assimile tout ça..Je vous remercie à tous !

  16. #16
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 779
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 779
    Points : 40 083
    Points
    40 083
    Par défaut
    Citation Envoyé par Loralina
    Il reste qu'en cas de survol, on a deux images l'une sur l'autre : là où ce peut être gênant par exemple, c'est si on utilise des png avec alpha.
    C'est une remarque judicieuse, même si cela ne doit pas arrivé souvent avec un background sur le <body>, mais effectivement oui !

    Citation Envoyé par Loralina
    Quand l'image du survol est présente dans la page, je n'ai pas de scintillement.
    L'effet de « flash » est bien dû au temps nécessaire à la récupération et préparation de l'image en mémoire pour l'affichage et ce d'autant, comme dit par Watilin, que l'image précédente est supprimée de l'affichage.
    Il faut donc bien que celle-ci soit présente ou liée au document, c'est pour cela que souvent on se sert du préchargement d'image.

    Citation Envoyé par Loralina
    Une solution pourrait être d'intégrer cette image dans l'arborescence en la cachant au mieux...
    C'est Le principe de la création de multiples plans que l'on fait apparaître à la demande en simulant un changement d'image.

    Voici un exemple, un peu plus abouti, qui utilise ce principe sur base de <div>, qui sont dimensionnées comme le <body>, qui possèdent chacune leur propre background-image.
    J'ai repris la solution proposée par Watilin pour « accrocher » les background-image, à savoir l'utilisation d’attribut data-img.

    Le code :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Changement de fond au survol</title>
    <meta name="Author" content="NoSmoking">
    <meta name="description" content="Simuler le changement de background-image sur le &lt;body&gt; au survol d'éléments.">
    <meta name="DVP-discussion" content="d1982863-2">
    <style>
    html, body {
      margin: 0;
      padding: 1px 0;
      min-height: calc(100vh - 4px);
      font: 1em/1.5 Verdana,sans-serif;  
      background-size: cover;
    }
    body {
      position: relative;
      background-image: url(https://cyberzoide.developpez.com/misc/background12-1600x1200.jpg);
    }
    .cadre {
      display: inline-block;
      width: 10em;
      height: 10em;
      margin: 2.5em;
      background-color: #ABC;
    }
    .fond-masque {
      z-index: -1;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0;
      background-size: cover;
      transition: opacity .3s;  
    }
    .fond-masque.visible {
      opacity: 1;
    }
    </style>
    </head>
    <body>
      <h1>Changement de fond au survol</h1>
      <div class="cadre" data-img="background12e-1600x1200.jpg">Fond #1</div>
      <div class="cadre" data-img="background12b-1600x1200.jpg">Fond #2</div>
      <div class="cadre" data-img="background12h-1600x1200.jpg">Fond #3</div>
      <div class="cadre" data-img="background12d-1600x1200.jpg">Fond #4</div>
    <script>
    "use strict";
    const oBody = document.querySelector("body");
    const oCadres = document.querySelectorAll(".cadre");
    const tabFond = [];
     
    function changeFond(ev) {
      const objEncours = ev.target;
      // récup. position
      const actif = objEncours.dataset.index;
      // supprime classe visible
      tabFond.forEach(function(el){
        el.classList.remove("visible");
      });
      if ("mouseenter" === ev.type) {
        tabFond[actif].classList.add("visible");
      }
      else {
        tabFond[0].classList.add("visible");
      }
    }
     
    function createFond( obj){
      const chemin = "https://cyberzoide.developpez.com/misc/";
      const urlImage = chemin + obj.dataset.img;
      const oFond = document.createElement("DIV");
      oFond.className = "fond-masque";
      oFond.style.backgroundImage = "url("+ urlImage +")";
      oBody.insertBefore( oFond, oBody.firstElementChild);
      return oFond;
    }
     
    // récup. image de fond du body
    const bg = window.getComputedStyle(oBody).backgroundImage;
    // création du faux fond
    const oFond = document.createElement("DIV");
    oFond.className = "fond-masque visible";
    // transfert image de fond
    oFond.style.backgroundImage = bg;
    oBody.insertBefore(oFond, oBody.firstElementChild);
    // annule le fond du body
    oBody.style.backgroundImage = "none";
    // on garde la réf.
    tabFond.push(oFond);
     
    // if need IE -> Array.prototype.forEach.call(oCadres,function(el) {
    oCadres.forEach(function(el) {
      el.dataset.index = tabFond.length;
      tabFond.push(createFond( el));
      el.addEventListener("mouseenter", changeFond, false);
      el.addEventListener("mouseleave", changeFond, false);
    });
    </script>
    </body>
    </html>
    Le fichier test en ligne :
    Changement de fond au survol.

    Quelques remarques :
    • On aurait pu faire cela en modifiant la classe de l'élément <body>, mais quoiqu'il arrive autant se servir des éléments utilisés pour préchargements des images.
    • Il faudrait également être sûr que les téléchargements soient effectifs pour autoriser l'événement au survol si l'on ne veut pas de surprises.
    • Il faut cependant rester prudent quant au poids du chargement selon le nombre de fonds à gérer.
    • On peut même se permettre un effet de transition en jouant avec l'opacity
    • Et surement autre chose ...

  17. #17
    Membre éclairé
    Femme Profil pro
    Autre
    Inscrit en
    janvier 2017
    Messages
    327
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : janvier 2017
    Messages : 327
    Points : 687
    Points
    687
    Par défaut
    Bonjour,
    Citation Envoyé par NoSmoking Voir le message
    C'est une remarque judicieuse, même si cela ne doit pas arrivé souvent avec un background sur le <body>, mais effectivement oui !
    Sur <body> rarement, après sur un bouton, c'est tout à fait envisageable.
    Je me demande si le scintillement se verrait sur un petit bouton ou en utilisant une petite image (j'ai déjà fait ce genre de choses, je ne me souviens pas qu'il y avait des scintillements).

    Citation Envoyé par NoSmoking Voir le message
    Il faut donc bien que celle-ci soit présente ou liée au document, c'est pour cela que souvent on se sert du préchargement d'image.
    Les deux pistes dont je parlais (drawImage et image intégrée dans le DOM) concernent uniquement l'étape qui suit : du cache où elle est, à l'affichage effectif de l'image (j'ajoute, 26/6 9h42 : ou du moins la mise en mémoire du rendu de l'image). Cette étape n'est pas faite si on fait un simple chargement de l'image en js.

    Citation Envoyé par NoSmoking Voir le message
    Citation Envoyé par Loralina Voir le message
    Une solution pourrait être d'intégrer cette image dans l'arborescence en la cachant au mieux...
    C'est Le principe de la création de multiples plans que l'on fait apparaître à la demande en simulant un changement d'image.
    Je parlais de la cacher et de la laisser cachée.
    L'idée étant toujours d'effectuer un changement d'image dans la même balise, ce qui marchera même avec des png avec transparence, l'image cachée servant juste à concrétiser et fixer le rendu dans la page/mémoire.

    Citation Envoyé par Watilin Voir le message
    Eh bien c’est comique, quand je teste ta solution chez moi, j’ai un scintillement
    Je viens de retester mon code :
    Au début, rien à faire, il y avait un scintillement systématiquement, mais impossible de voir une différence dans ma manière de procéder par rapport à la dernière fois.
    Un peu plus tard, je réessaie : plus de scintillement.
    Je laisse la page ouverte, je reviens un peu après: un scintillement se produit alors que les images sont déjà chargées et ont déjà été rendues dans la page.

    Je réalise que j'ai un logiciel très gourmand ouvert.
    Cela implique peut-être que l'image (ou son rendu bitmap) est plus vite retirée de la mémoire...
    Il faut sans doute laisser en permanence l'image dans la page pour qu'elle ne soit pas retirée.
    Je viens de tester en plaçant l'image du survol dans la page avec visibility:hidden (j'ajoute, 26/6 9h42 : et en la laissant toujours cachée), et là ça fonctionne bien sur Firefox, plus de scintillement (mais bon, je me méfie quand même).

    Pour finir, j'ai configuré le cache de Firefox pour le mettre dans la mémoire vive, mais ça ne semble pas jouer sur le scintillement... Peut-être que ce qui compte c'est d'avoir dans la mémoire le rendu bitmap de l'image et non simplement l'image elle-même.

  18. #18
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 779
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 779
    Points : 40 083
    Points
    40 083
    Par défaut Quelques précisions
    Citation Envoyé par Loralina
    Je me demande si le scintillement se verrait sur un petit bouton ou en utilisant une petite image (j'ai déjà fait ce genre de choses, je ne me souviens pas qu'il y avait des scintillements).
    Une bonne solution pour les images de petites taille est d'utiliser une image « sprite », de la mettre en background et de modifier sa position au survol. Normalement aucun scintillement n'est à observer.

    Citation Envoyé par Loralina
    ...et image intégrée dans le DOM...
    Il faut effectivement que l'image chargée soit référencée dans le document sinon le ramasse-miettes la supprimera de la mémoire pour absence de « liaison ».

    Citation Envoyé par Loralina
    Je parlais de la cacher et de la laisser cachée.
    Dans ce cas pourquoi ne pas l'utiliser plutôt que de faire un transfert qui risque d'engendrer des « repaint » inutiles sur la page.
    On peut se servir des outils disponibles des navigateurs pour observer cela, c'est parfois édifiant le travail réalisé que l'on ne voit pas à l'oeil.

    On pourrait utiliser d'autres approches comme la méthode Image.decode(), normalement mieux qu'un image.onload(), mais pas encore supportée par tous les navigateurs et le peux d'essais que j'ai réalisé avec Chrome ne sont pas meilleurs, voire pire.
    On pourrait également creuser du côté de la propriété Image.decoding.

    Il reste un point important qui est la façon de se « réveiller » d'un navigateur après une absence d'activité et là je dois dire que FireFox n'est pas le best, scintillement assuré quelque soit la manière de gérer l'image !


    PS : toutes mes excuses à Charal72 !

  19. #19
    Membre éclairé
    Femme Profil pro
    Autre
    Inscrit en
    janvier 2017
    Messages
    327
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : janvier 2017
    Messages : 327
    Points : 687
    Points
    687
    Par défaut
    Bonjour,
    Citation Envoyé par NoSmoking Voir le message
    Une bonne solution pour les images de petites taille est d'utiliser une image « sprite », de la mettre en background et de modifier sa position au survol. Normalement aucun scintillement n'est à observer.
    Oui je connais, je ne pense pas non plus qu'il y aurait de scintillement ainsi.
    Le tout c'est de préparer l'image (on peut certes le faire à la volée...).
    Après, je n'ai jamais vu de scintillement sur de petites images (sous réserve qu'elles soient chargées), mais cela offre sans doute une garantie supplémentaire.

    Citation Envoyé par NoSmoking Voir le message
    Il faut effectivement que l'image chargée soit référencée dans le document sinon le ramasse-miettes la supprimera de la mémoire pour absence de « liaison ».
    Pour préciser en fonction de ce que j'ai compris/supposé :
    - A priori ce n'est pas l'image chargée (le fichier) qui va être supprimée de la mémoire, mais son rendu.
    - Si on crée en js un élément image qui charge l'image, alors même si la variable est persistante, le rendu ne sera pas fait si on ne le force pas.
    Quand on ajoute l'élément image dans le document, le rendu est fait et sans doute mis en mémoire, mais si on retire l'image du document, le rendu peut être supprimé de la mémoire (pas nécessairement tout de suite), même si on garde une référence persistante à l'élément image et que le fichier est toujours dans le cache.

    Citation Envoyé par NoSmoking Voir le message
    Dans ce cas pourquoi ne pas l'utiliser
    Comme j'ai dit, pour gérer les images avec alpha et ne pas avoir deux images l'une sur l'autre.
    Après on doit pouvoir alterner l'affichage de deux images présentes dans le document, selon les cas (pas avec les balises html/body, à moins de pouvoir jouer sur l'opacité des images sans toucher au contenu).

    Mais c'est aussi une question de structure :
    On peut préférer faire sa page normalement, faire un changement dans la même balise comme s'il n'y avait pas de problème de scintillement et ajouter une solution qui va permettre de fixer dans la mémoire les rendus des images d'une manière ou d'une autre.


    Citation Envoyé par NoSmoking Voir le message
    plutôt que de faire un transfert qui risque d'engendrer des « repaint » inutiles sur la page.
    Quelle que soit la solution, on affiche au survol une image qui ne l'était pas avant, le travail sera probablement le même qu'on fasse apparaître la balise cachée ou qu'on remette l'image dans une autre balise (on se réfère au même rendu qui est déjà prêt dans la mémoire).

    Citation Envoyé par NoSmoking Voir le message
    On pourrait utiliser d'autres approches comme la méthode Image.decode(), normalement mieux qu'un image.onload(), mais pas encore supportée par tous les navigateurs
    Effectivement, ça pourrait régler le problème.
    Ca ne semble malheureusement pas supporté par plusieurs des navigateurs sujets au scintillement.

    Je me demande, cependant, si cela va fixer le rendu dans la mémoire.
    A voir s'il n'est pas requis de relancer le décodage avant chaque changement d'image de fond (je parle du cas où on gère le changement avec une seule balise et que l'image du survol n'est pas présente dans la page par ailleurs).

    L'impression que j'ai par rapport à decode c'est que cela force le rendu. Par contre, si on attend juste la fin du chargement, sans faire ce décodage explicite, il n'y aura pas de décodage qui s'ensuivra automatiquement derrière (pour cela il faut intégrer l'image dans la page ou faire un drawImage ou équivalent).

    Citation Envoyé par NoSmoking Voir le message
    et le peux d'essais que j'ai réalisé avec Chrome ne sont pas meilleurs, voire pire.
    Pour ma part, comme Charal72, je n'ai jamais de scintillement avec Chrome.

    Citation Envoyé par NoSmoking Voir le message
    Il reste un point important qui est la façon de se « réveiller » d'un navigateur après une absence d'activité et là je dois dire que FireFox n'est pas le best, scintillement assuré quelque soit la manière de gérer l'image !
    Ah ça oui !
    J'avais justement retiré une remarque à mon précédent message à ce propos :
    J'étais en train de rédiger le message, puis en retournant à ma page de test : l'image de fond par défaut disparaissait une fraction de seconde avant de revenir (alors que ma souris n'était même pas encore sur la page). J'avais refait plusieurs fois l'expérience.

    Malgré tout, avec la solution du fond fixe, il ne devrait pas y avoir de scintillement au survol dans ce genre de situations ? A moins que l'image fixe sursaute au survol (un peu comme moi, mais moi c'était sans rien faire).

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. pourquoi le programme html &css change selon le navigateur
    Par razily dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 04/06/2010, 14h17
  2. Navigateur : Google Chrome change de moteur de rendu 3D
    Par Gordon Fowler dans le forum Actualités
    Réponses: 10
    Dernier message: 15/10/2009, 19h03
  3. change textcolor or background color
    Par Namson dans le forum C
    Réponses: 3
    Dernier message: 08/01/2009, 00h31
  4. Background ligne change onclick
    Par poosh dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 25/07/2007, 13h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo