CODEWITHSUNDEEP
javascripthtmlcss
nickelodeon
nickelodeon

Reputation: 3

Changing img source onmouseover using only javascript and 'this'

Trying to change img src attribute to src matching another picture on site which user hovered over. I have 1 (main) picture and I have 3 below it (sub), acting as a gallery. When user hovers over one of those 3, I want src attribute of main to change to src of sub image. All resolutions I found so far, use either 1 image whose source is changed in code or only specific sources declared but I don't want to add sources in code every time a new image is added, instead, using i.e. gallery(this) for each sub-image should resolve it but I'm having no luck so far. Apologies if there is same question, I just couldn't find it. If this explanation is too complicated, feel free to ask, I'm looking forward resolving this, if possible.

Tried to use function name(this) to exploit source of image and add it to main picture. I'm really just starting with all of this so this what I tried so far probably isn't even close enough, hope you will understand.

  <img class="hover" src="imgs/mountain.jpg" id="hover" alt="">
      <div class="imgs">
        <img onmouseover="gallery(this)" src="imgs/castle.jpg" alt="">
        <img onmouseover="gallery(this)" src="imgs/mountain.jpg" alt="">
        <img onmouseover="gallery(this)" src="imgs/tree.jpg" alt="">
      </div>

    <script>
        function gallery(element) {
            x = document.getElementById('hover');
            x.src.element;
        }
    </script>

Upvotes: 0

Views: 67

Answers (2)

frobinsonj
frobinsonj

Reputation: 1167

As Kobe states in their answer, to set the src you can use img.src = {source}.

I would recommend that you add event listeners to each image, rather than using attributes to call the function. This provides a much cleaner solution. I have added the .gallery class to each image, then, it loops through these elements adding the event listener.

function displayImage() {
  x.src = this.src;
}

// Pull this out of the function to avoid the lookup every time
var x = document.getElementById('hover');

// Loop through each element with the gallery class and add the event listener
document.querySelectorAll(".gallery").forEach(function(img) {
  img.addEventListener("mouseover", displayImage);
});
<div class="imgs">
  <img class="gallery" src="https://picsum.photos/100?random=1" alt="">
  <img class="gallery" src="https://picsum.photos/100?random=2" alt="">
  <img class="gallery" src="https://picsum.photos/100?random=3" alt="">
</div>
<img id="hover" alt="hover">

Upvotes: 0

Kobe
Kobe

Reputation: 6456

You aren't actually changing the src. You can do so by setting x.src to element.src:

function gallery(element) {
  x = document.getElementById('hover');
  x.src = element.src;
}
<div class="imgs">
  <img onmouseover="gallery(this)" src="https://picsum.photos/100?random=1" alt="">
  <img onmouseover="gallery(this)" src="https://picsum.photos/100?random=2" alt="">
  <img onmouseover="gallery(this)" src="https://picsum.photos/100?random=3" alt="">
</div>
<img id="hover" alt="hover">

Upvotes: 5

Related Questions