I want to change an image when the user hovers over a certain text. I found this question on stackoverflow (Change Image On Hover Javascript), but here the image is changed when the user hovers the image not the text. So I tried to adapt the code of the answer, so that the image is cahnged on texthover (I just put the "onmouseover" and "onmouseout" into the h1 instead of the img).

This is the code of the answer which changes the image when the user hovers the image:

<img
    onm ouseover="this.src='images/Logo white transparent.png'"
    onm ouseout="this.src='images/Logo black transparent.png'"
    height="100px"
    src="images/Logo black transparent.png"
/>

And this is the code I tried in order to change the image when the text is hovered:

<img
    height="100px"
    src="images/Logo black transparent.png"
/>
        
        
<h1
    onm ouseover="this.src='images/Logo white transparent.png'"
    onm ouseout="this.src='images/Logo black transparent.png'"
>
    Hello
</h1>

CodePudding user response：

your h1 is not an image tag so src will not work there

<img
    height="100px"
    src="https://www.littlethings.info/wp-content/uploads/2014/04/dummy-image-green-e1398449160839.jpg"

/>
        
        
<h1
    onm ouseover="change()"
    onm ouseout="changeBack()"
>
    Hello
</h1>

add extra js:

let img = document.querySelector("img")

function change() {
img.src = "https://picsum.photos/200/301" 
}

function changeBack() {
img.src = "https://www.littlethings.info/wp-content/uploads/2014/04/dummy-image-green-e1398449160839.jpg"
}

CodePudding user response：

maybe this website can be refference : https://www.tutorialrepublic.com/faq/how-to-change-image-on-hover-with-css.php

good luck

CodePudding user response：

Solution 1

Create a function with two different events:

const toggleImg = () => {
    // Get the target elements
    let el = document.getElementById('el');
    let img = document.getElementById('img');
    
    // On mouseover:
    el.addEventListener("mouseover", () => { 
       img.src = 'https://www.w3schools.com/images/lamp.jpg';
    });
    
    // On mouseout:
    el.addEventListener("mouseout", () => { 
       img.src = 'https://www.w3schools.com/images/stickman.gif';
    });
};

// Call the function
toggleImg();

h1 {
  width: fit-content;
}

<h1 id="el">Hover</h1>
<img id="img" src="https://www.w3schools.com/images/stickman.gif" />

Solution 2

Create a function and check the event (condition):

const toggleImg = (e) => {
    // Get the target elements
    let el = document.getElementById('el');
    let img = document.getElementById('img');
    
    // Save the images in variables
    isOver = 'https://www.w3schools.com/images/lamp.jpg';
    isOut = 'https://www.w3schools.com/images/stickman.gif';
    
    // Toggle
    e.type == 'mouseover' ? img.src = isOver : e.type == 'mouseout' ? img.src = isOut : '';
};

// Add the event
el.onmouseover = el.onmouseout = toggleImg;

h1 {
  width: fit-content;
}

<h1 id="el">Hover</h1>
<img id="img" src="https://www.w3schools.com/images/stickman.gif" />