Display an image when the cursor hovers over a text

Question

Display an image when the cursor hovers over a text

I'm attempting to display an image when hovering over specific text. The image should not replace the text, but appear in a different location.

The concept is as follows: When hovering over the word "Google", the Google logo should appear in the red box, and when hovering over the word "OneNote", the OneNote logo should appear in the red box. Step 1

I attempted to achieve this with the following method:

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

While this approach works when replacing one image with another, it does not work when trying to replace an image with text.

If anyone can suggest a solution that aligns with my desired outcome, I would greatly appreciate it!

Thank You

Lucas

javascript html css

Answer 1

Answer №1

To enhance user experience, consider storing the img src in a data-attribute on the element that will be hovered. Upon hover, set the img.src to the data-logo value of the hovered element.

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://learn.microsoft.com/en-us/graph/images/onenotelogobgs.png">OneNote</li>
  </ul>
</div>

Answer 2

To enhance user experience, consider storing the img src in a data-attribute on the element that will be hovered. Upon hover, set the img.src to the data-logo value of the hovered element.

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://learn.microsoft.com/en-us/graph/images/onenotelogobgs.png">OneNote</li>
  </ul>
</div>

Answer 3

Answer №2

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

Answer 4

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

Display an image when the cursor hovers over a text

Answer №1

Answer №2

Similar questions

Is there a way to display an asterisk within a select2 dropdown to signify that a field is mandatory?

I'm struggling to convert this vertical navigation bar into a horizontal layout using CSS

The request for the URL (https://deno.land/std/encoding/csv.ts) could not be sent due to an operating system error with code 100

The looping function in JavaScript iterates 20 times successfully before unexpectedly producing NaN

How do you manage conditional formatting within HTML forms?

"Encountering a glitch with masterpage.cs in Aspx.net and C#

Firefox consistently reports ajax status as error

Is there a way to transform a callback into promises using async/await, and convert a prototype function into a standard

The contents of Ionic views are not stored in a cache, so the controller must

Exploring the capabilities of the Scripting.FileSystemObject within the Microsoft Edge browser

Assign an identifier to the HTML helper Html.EditorFor

Executing a NestJs cron job at precise intervals three times each day: a guide

Downloading multiple files concurrently in Flask

Resolve the issue of autofill data overlapping with field labels

Setting up AngularJS can be a pain

How to transfer data from PHP to JavaScript using Ajax in the webpage_BODY

What is the best way to center my navigation bar without interfering with the mobile version's JavaScript functionality?

Encountering the error message "Uncaught TypeError: $.ajax is undefined"

Grin schedule module JSON stream

The latest version of Material UI icons caused compatibility issues with React-Select