onmouseover, show large version of image

Question

I'm trying to show a large version of an image when you mouse over the smaller version of the image. I currently have 4 functions to do this, but was wondering if it could be accomplished by using one. The problem is, I'm not sure how to change the source path if I only have one function to do so. My code is below.

HTML: (I only have the first image with the showImage() on mouse over for testing purposes)

<section>
        <article>
            <header>Mouse Over and Mouse Out Events</header>
            <img onmouseover="showImage()" onmouseout="hideImage()" id="one" src="images/small/catbread1.jpg" title="catbread1" alt="Cat with bread on face 1" /> <img onmouseover="bigImage2()" onmouseout="hideImage()" id="two" src="images/small/catbread2.jpg" alt="Cat with bread on face 2" />
            <img onmouseover="bigImage3()" onmouseout="hideImage()" id="three" src="images/small/catbread3.jpg" alt="Cat with bread on face 3" /> <img onmouseover="bigImage4()" onmouseout="hideImage()" id="four" src="images/small/catbread4.jpg" alt="Cat with bread on face 4" />
        </article>
        <article>
            <header>Cat Photos</header>
            <img id="full" src="" />
        </article>

Javascript:

function hideImage() {
    document.getElementById("full").src = "";
}

function bigImage1() {
    document.getElementById("full").src = "images/large/catbread1.jpg";
}

function bigImage2() {
    document.getElementById("full").src = "images/large/catbread2.jpg";
}

function bigImage3() {
    document.getElementById("full").src = "images/large/catbread3.jpg";
}

function bigImage4() {
    document.getElementById("full").src = "images/large/catbread4.jpg";
}

function showImage() {
    document.getElementById("full").src = "images/large/" + this.title + ".jpg";
}

Answer 1

It looks like you've arranged your images into a parallel hierarchy of large/ and small/ - that's great, it'll make this easy, and you're almost doing it already in showImage. I'm going to build this example using some stock photos so it visibly works.

Basically what you want to do is:

• Grab the image that's been moused over
• Replace the small/ part of its path with large/
• Assign it to the full element

To get the image that's been moused over, pass it to showImage during the onmouseover event. The element firing the event is available as this.

<img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/9413/animal-cute-kitten-cat-small.jpg" />

showImage accepts the parameter, and you can use replace() to do the path conversion, then assign it to full the way you already are.

function showImage(img) {
  var src = img.src;
  var largeSrc = src.replace('small', 'large');
  document.getElementById('full').src = largeSrc;
}

Pop this snippet open for a working demo:

function hideImage() {
  document.getElementById("full").src = "";
}

function showImage(img) {
  var src = img.src;
  var largeSrc = src.replace('small', 'large');
  document.getElementById('full').src = largeSrc;
}

<article>
  <header>Mouse Over and Mouse Out Events</header>
  <img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/9413/animal-cute-kitten-cat-small.jpg" />
  <img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/13937/pexels-photo-13937-small.jpeg" />
  <img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/7517/animal-sitting-animals-inside-small.jpg" alt="Cat with bread on face 3" />
  <img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/254/pet-kitten-cat-lying-small.jpg" />
</article>
<article>
  <header>Cat Photos</header>
  <img id="full" />
</article>