How to Change Image Source on Hover Using Javascript, But Applies to Each Individual Photo

How to change image source on hover using javascript, but applies to each individual photo

You can do this relatively easily. You can find where .png is in the string and insert a 2 before it on mouseenter and remove the 2 on mouseout.

I'm not sure if you just want the image that is being hovered over to change or all images so I'll include an example of how to do both. First and probably what you are looking for I'll change only the image that is being hovered over:

const imgs = document.getElementsByTagName('img');
[...imgs].forEach(img => {  img.addEventListener('mouseenter', () => {    const newSrc = img.src.slice(0, img.src.indexOf('.png')) + 2 + img.src.slice(img.src.indexOf('.png'));    console.log(newSrc);    img.src = newSrc;  })  img.addEventListener('mouseout', () => {    const newSrc = img.src.slice(0, img.src.indexOf('.png') - 1) + img.src.slice(img.src.indexOf('.png'));    console.log(newSrc);    img.src = newSrc;  })});

img {  height: 100px;  width: 100px;}

<img src="pic.png"><img src="img.png">

How to Change Image on hover

My best attempt so far is the following. This works okay but it does distort images that are very tall. Can anyone suggest improvements?

JSFiddle: https://jsfiddle.net/4hrvxpe2/26/

.small{
    max-width: 10%;
    height: 100px;
    min-width: 10%!important;
}

.smallerImages{
margin: 0 auto;
}

#mainPicture{
width:  100%;
height: 600px;
display: table; margin: 0 auto;
}

How to change source of <img> tag on hover?

With only html and css, its not posible to change the src of image. If you do replace the img tag with div tag, then you might be able to change the image that is set as the background as like

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

And if you think you can use some javascript code then you should be able to change the src of the img tag as below

function hover(element) {  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');}
function unhover(element) {  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');}

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

Change src of image on hover with array property

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' 
           onMouseEnter={(e) => setHover(e.currentTarget.id)} 
           onMouseLeave={() => 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}
          onMouseEnter={(e) => {
            e.currentTarget.src = item.hover_image;
          }}
          onMouseLeave={(e) => {
            e.currentTarget.src = item.image;
          }}
        />
      </a>
    </div>
  ))}

On mouse hover, change picture in JavaScript

No <script> tag necessary. Use onmouseover and onmouseout to change the image source.

onmouseover will execute an action when your mouse goes over the image. In this case, we use this.src to set the image src to another image.

onmouseout will execute an action when your mouse goes out of the image. In this case, we use this.src again to set the image to the default image.

<img title="Hello" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681" onmouseover="this.src='https://www.ctvnews.ca/polopoly_fs/1.4037876!/httpImage/image.jpg_gen/derivatives/landscape_1020/image.jpg'" onmouseout="this.src='https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681'" />

Change image src from multiple image list using jquery

Now see updated code for multiple div

<div>
       <img class="parent " src="image.jpg"" data-pos = '0' />
       <div>
         <img class="img" style="display:none" src="image1.jpg"" />
         <img class="img" style="display:none" src="image2.jpg"" />
         <img class="img" style="display:none" src="image3.jpg"" />
         <img class="img" style="display:none" src="image4.jpg"" />
         <img class="img" style="display:none" src="image5.jpg"" />
      </div>
<div>

<hr>

<div>
       <img class="parent " src="image.jpg"" data-pos = '0' />
       <div>
         <img class="img" style="display:none" src="image1.jpg"" />
         <img class="img" style="display:none" src="image2.jpg"" />
         <img class="img" style="display:none" src="image3.jpg"" />
         <img class="img" style="display:none" src="image4.jpg"" />
         <img class="img" style="display:none" src="image5.jpg"" />
      </div>

<div>

and Jquery for it is

$(document).ready(function(){
    var pos = 0;
    $('.parent').bind('mouseover',function(){
        pos = $(this).data('pos');
        $(this).next('div').find('.img').eq(pos%5).show();
        $(this).hide();
        pos++;
        $(this).data('pos',pos);
    });
    $('.img').bind('mouseout',function(){
        $(this).hide();
        $('.parent').show();

    });
});

----------------------------- Below Was Old Answer --------------------

Use following HTML code

<div>
<img class="parent " src="image.jpg" />
  <img class="img" style="display:none" src="image1.jpg" />
  <img class="img" style="display:none" src="image2.jpg" />
  <img class="img" style="display:none" src="image3.jpg" />
  <img class="img" style="display:none" src="image4.jpg" />
  <img class="img" style="display:none" src="image5.jpg" />

</div>
<div>

And this jQuery stuff

$(document).ready(function(){
    var pos = 0;

    //hide parent image and show one of the child image
    $('.parent').bind('mouseover',function(){
        $('.img').eq(pos%5).show();
        $(this).hide();
        pos++;
    });

    //hide child images and show parent image
    $('.img').bind('mouseout',function(){
        $('.img').hide();
        $('.parent').show();
    });
});

here is fiddle

Changing image src on hover

That solution outlined in your question only works if it's a pseudo-element. You'll need to either make it a background-image on the a or td and change it that way, or use a jQuery function like this:

$('a').on('mouseover', function() {
  $(this).find('img').attr('src', 'path/to/my/image.png');
});

Or native JavaScript

document.querySelectorAll('a img[alt=Link1]').addEventListener('mouseover', function() {
  this.src = 'path/to/my/image.png';
});

Changing image on hover

Place this code just before the closing body tag,

<script  type='text/javascript'>
$(document).ready(function(){
    $(".home").hover(
        function() {$(this).attr("src","images/aboutR.png");},
        function() {$(this).attr("src","images/about.png");
    });
});
</script>

place the class home in the img tag. Done. Works perfectly.

How to Change Image Source on Hover Using Javascript, But Applies to Each Individual Photo