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 :

Apparition d'image au mouseenter


Sujet :

JavaScript

  1. #1
    Membre habitué Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    234
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 234
    Points : 135
    Points
    135
    Par défaut Apparition d'image au mouseenter
    Bonsoir


    Je réalise une apparition d images au survol d un élément ou plutôt un mot

    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
    <body>
      <div class="main">
     
    <div class="mouse"></div>
        <ul>
          <li>frame
            <img src="https://images.unsplash.com/photo-1711677371698-4496b754c4b1?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1MDN8&ixlib=rb-4.0.3&q=85" class="pic" alt="architecture">
          </li>
          <li>vertical
            <img src="https://images.unsplash.com/photo-1711098288630-30b69a86be92?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1MDN8&ixlib=rb-4.0.3&q=85" class="pic" alt="pieds">
          </li>
          <li>board
            <img src="https://images.unsplash.com/photo-1712187466004-c64b4571828b?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1MDN8&ixlib=rb-4.0.3&q=85" class="pic" alt="femme">
          </li>
          <li>popular
            <img src="https://images.unsplash.com/photo-1711109631427-f90f9d83364b?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1NzF8&ixlib=rb-4.0.3&q=85" class="pic" alt="couple">
          </li>
          <li>trends
            <img src="https://images.unsplash.com/photo-1711861399198-649bc0ddc33f?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1NzF8&ixlib=rb-4.0.3&q=85" class="pic" alt="architecture">
          </li>
          <li>brand
            <img src="https://images.unsplash.com/photo-1713623633904-a0a8dca6fafc?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1NzF8&ixlib=rb-4.0.3&q=85" class="pic" alt="paysage">
          </li>
          <li>almost
            <img src="https://images.unsplash.com/photo-1712181938400-a76d207d4fcb?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU2NzF8&ixlib=rb-4.0.3&q=85"  class="pic"  alt="femme africaine">
          </li>
        </ul>
     
      </div>
     
     
     
    </body>



    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
    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
    *,*::before,*::after{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
     
    *{
        font-size: 16px;
        font-family: verdana;
    }
    body{
        width: 100vw;
        height: 100vh;
        background-color: #151316;
        display: grid;
        place-items: center;
    }
     
    ::-webkit-scrollbar{
        display: none;
    }
     
     
    .main{
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
       overflow: hidden;
    }
     
    ul{
        height: 60vmin;
    }
     
     
    ul li{
        color: #3a3a3a;
        text-transform: capitalize;
        font-size: 6vw;
       font-weight: 600;
        list-style: none;
        text-align: center;
        letter-spacing: 3px;
     }
     
    img{
        display: block;
        width: 350px;
        height: 400px;
        object-fit: cover;
     
    }
     
    .pic{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        opacity:0;
        pointer-events: none;
    }
     
    .mouse{
        width: 60px;
        height: 60px;
        background-color: #d7d98d;
        border-radius: 100px;
        position: absolute;
        transition: transform  .3s;
    }
     
     
    .appear{
        opacity: 1;
    }


    et enfin


    Code javascript : 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
     const souris=document.querySelector('.mouse');
        const mots=document.querySelectorAll('li');
        const pic=document.querySelector('.pic');
        console.log(pic);
     
        window.addEventListener("mousemove",(e)=>{
         console.log(e);
         souris.style.left=e.pageX - souris.offsetWidth/2 + "px";
         souris.style.top=e.pageY - souris.offsetHeight/2 + "px";
        })
     
        mots.forEach(element => {
           element.addEventListener("mouseenter",()=>{
            pic.classList.toggle('appear')
           })
     
           element.addEventListener("mouseout",()=>{
           pic.classList.toggle('appear')
          })
    });

    je n'obtiens rien puis je avoir des pistes pour transcender cet aspect de problème ?

    Merci
    « Je ne perds jamais, soit je gagne, soit j'apprends. »
    Nelson Mandela

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 427
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 427
    Points : 4 905
    Points
    4 905
    Par défaut
    Bonjour,

    Rajoutes position: relative; aux <li> dans le code CSS ligne 37 ul li{ .....;position: relative;} puis remplaces pic par element.querySelector('.pic') dans le code JS lignes 14 et 18

  3. #3
    Membre habitué Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    234
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 234
    Points : 135
    Points
    135
    Par défaut
    Bonsoir

    je viens de modifier mon code:

    Code javascript : 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
     const souris=document.querySelector('.mouse');
        console.log(souris);
     
        window.addEventListener("mousemove",(e)=>{
         console.log(e);
         souris.style.left=e.pageX - souris.offsetWidth/2 + "px";
         souris.style.top=e.pageY - souris.offsetHeight/2 + "px";
        })
     
        mots.forEach(element => {
           element.addEventListener("mouseenter",()=>{
            element.querySelector('.pic').classList.toggle('appear')
           })
     
           element.addEventListener("mouseout",()=>{
            element.querySelector('.pic').classList.toggle('appear')
          })
    });



    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
    19
    20
    21
    22
    23
    24
    25
    26
    27
    ul li{
        position: relative;
        color: #3a3a3a;
        text-transform: capitalize;
        font-size: clamp(7.2rem, -13.2vw + 10.5rem, 2.25rem);
       font-weight: 600;
        list-style: none;
        text-align: center;
        letter-spacing: 3px;
     }
     
    img{
        display: block;
        width: 350px;
        height: 400px;
        object-fit: cover;
     
    }
     
    .pic{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        opacity: 0;
        pointer-events: none;
    }

    mais rien ne se passe
    « Je ne perds jamais, soit je gagne, soit j'apprends. »
    Nelson Mandela

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 427
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 427
    Points : 4 905
    Points
    4 905
    Par défaut
    Dans le dernier code JS tu n'as pas déclaré la variable mots, tu aurais dû voir l'erreur dans la console du navigateur...

  5. #5
    Membre habitué Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    234
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 234
    Points : 135
    Points
    135
    Par défaut
    j' ai pas remarqué mais meme a présent il se passe toujours rien
    « Je ne perds jamais, soit je gagne, soit j'apprends. »
    Nelson Mandela

  6. #6
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 427
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 427
    Points : 4 905
    Points
    4 905
    Par défaut
    Bonsoir,

    Voir le lien en ligne.

    Les codes JS et CSS doivent être comme ça :
    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
    const souris = document.querySelector('.mouse');
    const mots = document.querySelectorAll('li');
    // console.log(souris);
     
    window.addEventListener("mousemove", (e) => {
      // console.log(e);
      souris.style.left = e.pageX - souris.offsetWidth / 2 + "px";
      souris.style.top = e.pageY - souris.offsetHeight / 2 + "px";
    })
     
    mots.forEach(element => {
      element.addEventListener("mouseenter", () => {
        element.querySelector('.pic').classList.toggle('appear')
      })
     
      element.addEventListener("mouseout", () => {
        element.querySelector('.pic').classList.toggle('appear')
      })
    });

    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
    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
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
     
    * {
      font-size: 16px;
      font-family: verdana;
    }
     
    body {
      width: 100vw;
      height: 100vh;
      background-color: #151316;
      display: grid;
      place-items: center;
    }
     
    ::-webkit-scrollbar {
      display: none;
    }
     
     
    .main {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      overflow: hidden;
    }
     
    ul {
      height: 60vmin;
    }
     
     
    ul li {
      color: #3a3a3a;
      text-transform: capitalize;
      font-size: 6vw;
      font-weight: 600;
      list-style: none;
      text-align: center;
      letter-spacing: 3px;
      position: relative;
    }
     
    img {
      display: block;
      width: 350px;
      height: 400px;
      object-fit: cover;
     
    }
     
    .pic {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      pointer-events: none;
    }
     
    .mouse {
      width: 60px;
      height: 60px;
      background-color: #d7d98d;
      border-radius: 100px;
      position: absolute;
      transition: transform .3s;
    }
     
     
    .appear {
      opacity: 1;
    }

  7. #7
    Membre habitué Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    234
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 234
    Points : 135
    Points
    135
    Par défaut
    dans ton code tu as centre les images en position absolute moi en position fixed
    « Je ne perds jamais, soit je gagne, soit j'apprends. »
    Nelson Mandela

  8. #8
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 427
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 427
    Points : 4 905
    Points
    4 905
    Par défaut
    ça fonctionne même avec fixed, regardes le lien maintenant, je l'ai mis à jour.

  9. #9
    Membre habitué Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    234
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 234
    Points : 135
    Points
    135
    Par défaut
    mon code est identique mais je comprends pas j ai toujours rien
    de mon coté
    « Je ne perds jamais, soit je gagne, soit j'apprends. »
    Nelson Mandela

  10. #10
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 427
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 427
    Points : 4 905
    Points
    4 905
    Par défaut
    Bonjour,

    Si aucune erreur JS n'apparaît dans la console, ceci dit que le problème est au niveau CSS, vérifies bien ton code...

Discussions similaires

  1. [E-07] Apparition d'image VBA
    Par kokott34 dans le forum Macros et VBA Excel
    Réponses: 6
    Dernier message: 11/03/2009, 13h35
  2. apparition d'image VBA
    Par kokott34 dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 10/03/2009, 16h08
  3. Apparition d'image au hasard de la page
    Par mister_zang dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 01/03/2008, 05h29
  4. Apparition d'image par lien hypertexte ou autre ?
    Par nath35 dans le forum Powerpoint
    Réponses: 3
    Dernier message: 31/08/2007, 10h37
  5. [FLASH MX2004] Problème avec apparition d'images progressifs !
    Par °°° Zen-Spirit °°° dans le forum Flash
    Réponses: 6
    Dernier message: 18/05/2006, 08h58

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