Change image on hover in JSX

Question

How do I change an image on hover in JSX

I'm trying something like this:

<img src={require('../../../common/assets/network-inactive.png')}
onMouseOver={this.src = require('../../../common/assets/network.png')}
onMouseOut={this.src = require('../../../common/assets/network-inactive.png')} />

score 46 · Accepted Answer · answered Feb 09 '18 at 10:46

I will assume you are writing this code in a React component. Such as:

class Welcome extends React.Component {
  render() {
    return (
       <img src={require('../../../common/assets/network-inactive.png')}
       onMouseOver={this.src = require('../../../common/assets/network.png')}
       onMouseOut={this.src = require('../../../common/assets/network-inactive.png')} 
       />
    );
  }
}

Targeting this.src will not work in this case as you are essentially looking for something named src in your class. For instance this.src could find something like this:

src = () => (alert("a source"))

But that is not what you want to do. You want to target the image itself.

Therfore you need to enter the <img /> context. You can do that easily like this:

 <img
    onMouseOver={e => console.log(e)}
  />

From there you can target the currentTarget property, among others. This will enter the context of your element. So now you can do something like this:

  <img
    src="img1"
    onMouseOver={e => (e.currentTarget.src = "img2")}
  />

The same can be done for onMouseOut.

You can use this same method on your other elements, as you will certainly need to do this again. But be careful as this is a not the only solution. On bigger projects you may want to consider using a store (Redux), and passing props rather than mutating elements.

Thank you, this is exactly what I realized later. I rather went with the CSS way to tackle the problem. Yes I am using redux in the project and I will implement your suggestion. — Shahaji, Feb 13 '18 at 06:27
You're welcome @new-boy-in-web-dev-business :) I'm happy for you. — typekev, Feb 14 '18 at 09:23
@TypeKev So in which case `this.src` will work ? Looking for your comment forward. — hardy, May 23 '19 at 07:38
@hardy, sorry I just saw your reply now. I'm a bit late, but in this case, to accomplish the mutation of props within the img context, you would need to write a function called src that basically does what @ new-boy-in-web-dev-business is doing inline. i.e have a function named `src` whithin your class: `src = ({ currentTarget: { src } }) => src = "img2"`. This will accomplish the same thing - set the src of currentTarget (which is the `img` element) to 'img2' :) — typekev, Sep 04 '19 at 13:53

score 13 · Answer 2 · answered Feb 09 '18 at 10:49

Best is to manage this in the state:

class App extends Component {
  state = {
    img: "https://i.vimeocdn.com/portrait/58832_300x300"
  }

  render() {
    return (
      <div style={styles}>
        <img
          src={this.state.img}
          onMouseEnter={() => {
            this.setState({
              img: "http://www.toptipsclub.com/Images/page-img/keep-calm-and-prepare-for-a-test.png"
            })
          }}

          onMouseOut={() => {
            this.setState({
              img: "https://i.vimeocdn.com/portrait/58832_300x300"
            })
          }}
        />
      </div>
    )
  }
};

https://codesandbox.io/s/5437qm907l

Mine is a stateless component (Functional Component). – Shahaji Feb 13 '18 at 06:28 — Shahaji, Feb 13 '18 at 06:28

score 4 · Answer 3 · answered Dec 07 '21 at 16:06

Another non-class approach:

import arrow from "../images/arrow.svg";
import arrowHover from "../images/arrowHover.svg";

function Arrow() {
  const [over, setOver] = useState(false);
  return (
    <div
      onMouseOver={() => setOver(true)}
      onMouseOut={() => setOver(false)}
    >
         <img
          src={over ? arrowHover : arrow}
          alt="arrow"
          width="50"
          height="50"
        />
    </div>   
  )
}

score 2 · Answer 4 · answered Jul 30 '20 at 08:01

Here's a non-class approach using a functional component and typescript:

interface IconProps {
  src?: string;
  srcOnHover?: string;
  alt?: string;
}

const Icon: React.FC<IconProps> = ({ src, srcOnHover, alt }) => (
  <img
    src={src}
    alt={alt}
    onMouseOver={(e): void => {
      srcOnHover && (e.currentTarget.src = srcOnHover);
    }}
    onMouseOut={(e): void => {
      srcOnHover && (e.currentTarget.src = src || '');
    }}
  />
);

It can be used like that:

<Icon src="path/to/image.png" srcOnHover="path/to/hover-image.png" alt="Description" />

score -2 · Answer 5 · answered Mar 12 '21 at 07:07

-2

simple way to do this:

class Home extends React.Component { state = { icon: ICON_ONE }

render(){ return( <img src={this.state.icon} onMouseOver={()=>this.setState({icon:ICON_TWO})}
onMouseOut={() => this.setState({ icon: ICON_ONE })} /> ) }

answered Mar 12 '21 at 07:07

Ahmed Raza

401
4
6

Change image on hover in JSX

5 Answers5

Linked