J'essaie de faire apparaître une image lorsque je survole un texte. L'image n'a pas à apparaître à la place du texte mais à un autre endroit.

L'idée est la suivante : lorsque je survole le mot "Google", le logo Google doit apparaître dans la case rouge, lorsque je survole le mot "OneNote", le logo OneNote doit apparaître dans la case rouge. Étape 1

J'ai essayé de le faire en suivant cette logique :

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <img id="img1" onmouseover="setImg()" onmouseout="unSetImg()" src="https://i1.wp.com/www.grapheine.com/wp-content/uploads/2015/09/nouveau-logo-google.gif?fit=1950%2C1200&quality=90&strip=all&ssl=1" width="300">
    </body>
    <script type="text/javascript">
        function setImg(){
            document.getElementById("img1").src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSU48ifXX9Kar3IFVrlfwx6UFLqaQno8rCebFvGtwk6yWky9_mz";
        }

        function unSetImg(){
            document.getElementById("img1").src="https://i1.wp.com/www.grapheine.com/wp-content/uploads/2015/09/nouveau-logo-google.gif?fit=1950%2C1200&quality=90&strip=all&ssl=1";
        }
    </script>
</html>

Alors ça marche mais seulement quand on remplace un img par un autre img mais si j'adapte mon code en remplaçant l'img google par un texte, ça ne marche pas !

Quelqu'un peut-il me dire quoi utiliser car je n'ai rien trouvé qui corresponde à ce que je veux !

Merci

Lucas

-1
Lucas1564 15 mars 2019 à 14:18

2 réponses

Meilleure réponse

Vous pouvez stocker le src img dans un attribut de données sur l'élément qui sera survolé. Ensuite, au survol, définissez img.src sur le data-logo de l'élément survolé.

var elems = document.querySelectorAll("#thing li");
var logo = document.querySelector("#thing .logo");
elems.forEach(function(elem) {
  elem.addEventListener("mouseover", function() {
    logo.src = elem.getAttribute("data-logo");
  });
  elem.addEventListener("mouseout", function() {
    logo.src = "";
  });
});
img.logo {
  border: 2px dotted red;
  height: 50px;
  min-height: 50px;
  min-width: 50px;
}
<div id="thing">
  <img class="logo" />
  <ul>
    <li data-logo="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">Google</li>
    <li data-logo="https://docs.microsoft.com/en-us/graph/images/onenotelogobgs.png">OneNote</li>
  </ul>
</div>
0
Moob 15 mars 2019 à 11:45
.hovercontainer {
            width: 500px;
            margin: 0 auto;
            position: relative;
            height: 170px;
        }
                  .hovercontainer p{
                    position:absolute;
                    top:50%;
                    text-align: center;
                    left:0;
                    right:0;
                    margin:0 auto;  
                    z-index:10;
                  }
        			.hovercontainer img{
        				width:90%;
        				-webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        opacity:0;
                  position: relative;}
        .hovercontainer p:hover ~ img{
        	opacity:1
        }
                  .hovercontainer p:hover{
                    opacity:0;
                  }
    <div class="hovercontainer">
                    <p>Text</p>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSU48ifXX9Kar3IFVrlfwx6UFLqaQno8rCebFvGtwk6yWky9_mz" alt="" />
                    </div>
0
Kevin 15 mars 2019 à 12:05