Change src of image on hover with array property-CodePudding

I'm mapping through an array that contains properties such as image: link to image and hover_image: link to image

Is there a way to change an image on hover? Something sort of like this:

<img src={hover ? item.hover_image : item.image} />

If so, how can I define that the element is being hovered over, thank you!

Update: the onMouseHover or any other onMouse seems to not work on my image tag, here is the code:

{array.map((item, key) => {
  <div key={key}>
    <a target="_blank" href={item.link} >
      <img
        onm ouseEnter={(e) => console.log(e.currentTarget.src)}
        alt={item.name}
        src={item.image}
  
      />
    </a>
  </div>
})}

CodePudding user response：

React has two event handlers for that:

onMouseEnter
onMouseLeave

You could put those events on the component that you are hovering over and make them set a state variable, to track the hover state. e.g.:

function YourOuterComponent({item}) {
  const [hover, setHover] = useState(null);
  return (
    <>
      <div id='whatever' 
           onm ouseEnter={(e) => setHover(e.currentTarget.id)} 
           onm ouseLeave={() => setHover(null)}>
        hover over me
      </div>
      <img src={hover ? item.hover_image : item.image} />
    </>
  );
}

Edit based on coments:

  {array.map((item, key) => (
    <div key={key}>
      <a target="_blank" href={item.link}>
        <img
          alt={item.name}
          src={item.image}
          onm ouseEnter={(e) => {
            e.currentTarget.src = item.hover_image;
          }}
          onm ouseLeave={(e) => {
            e.currentTarget.src = item.image;
          }}
        />
      </a>
    </div>
  ))}

CodePudding user response：

Inline JavaScript version**

<img src="a.jpg" onm ouseover="this.src='b.jpg'" onm ouseout="this.src='a.jpg'" />

this refer to the current img tag

Example :

<img width="100" height="100" src="https://onlinejpgtools.com/images/examples-onlinejpgtools/coffee-resized.jpg" onm ouseover="this.src='https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg'" onm ouseout="this.src='https://onlinejpgtools.com/images/examples-onlinejpgtools/coffee-resized.jpg'" />

CodePudding user response：

You can achieve this behaviour by changing the src property of the target on which the event has occurred.

For an example:

function App() {
  const imgs = [
    {
      image:
        "https://images.unsplash.com/photo-1644982654072-0b42e6636821?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
      hover_image:
        "https://images.unsplash.com/photo-1648655514581-12808a5eb8c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60",
    },
  ];

  const elements = imgs.map((img, i) => {
    return (
      <img
        key={i}
        onm ouseOver={(e) => {
          e.target.src = img.hover_image;
        }}
        src={img.image}
        style={{ height: "200px", width: "200px" }}
      />
    );
  });

  return <div className="app">{elements}</div>;
}

CodePudding user response：

Try to use onMouseOver:

<img
    onm ouseOver={(e) => {e.currentTarget.src = item.hover_image; }}
/>