Image onmouseover - change picture and text using JavaScript

Question

The situation: I created an image gallery. Thumbnails are showed and onmouseover, the certain image is displayed in another container in big. Each image has an description, which can be retrieved by the simple function. When an image is hovered (onmouseover) I would like to set the specific image and get its description.

The problem: The onmouseover-event calls the function "hover()". Within this function, the source for the big image is changed to the selected one. I cannot get it to work to change the value for the description div container. By now, I simply tried to change the text to anything, in the end, the real description value which is stored in the "getDescription()" function should be received.

What I tried: I tried different versions and combinations to access the text of the description div container. Using "document.getElementById('description').innerHTML="+i+" changes the value, but it sets the value fixed for the last/highest i.

The code:

<div id="thumbnails">
</div><br/>

<div id="description" style="width:100%; text-align:center;"> text </div>

<div  class="preview" align="center">
<img id="preview" name="preview" src="images/img1.jpg"/>
</div>

<script type="text/javascript">
    for (var i=1; i<=5; i++) {
        document.getElementById("thumbnails").innerHTML += "<img onmouseover="+hover(i)+" name='img"+i+"' src='images/img"+i+".jpg'/>";
}

function hover(i) { 
    return "'preview.src=img"+i+".src'"; //works, but does not include the change of the description
    return "'preview.src=img"+i+".src'; 'description.innerHTML="+i+"'"; //does not work
}

function getDescription(value)
{
    return value == '1' ? "description 1":
           value == '2' ? "description 2":
           value == '3' ? "description 3":
           value == '4' ? "description 4":
           value == '5' ? "description 5": '';
}
</script>

Note: Any help is appreciated, but I cannot use jquery.

Answer 1

You seem to be going about this the wrong way.

You're keeping descriptions in the script, but generating the image links based on a count, and then you try to put it all together with some inline event handlers and other stuff.

Use an array of objects to keep both image links and description together, and then just iterate over that, and insert the elements without any inline javascript.

var images = [{
  src: 'images/img1.jpg',
  des: 'description 1'
}, {
  src: 'images/img2.jpg',
  des: 'description 2'
}, {
  src: 'images/img3.jpg',
  des: 'description 3'
}, {
  src: 'images/img4.jpg',
  des: 'description 4'
}, {
  src: 'images/img5.jpg',
  des: 'description 5'
}];

images.forEach(function(image, i) {
  var img  = new Image();
  img.name = 'img' + i;
  img.src  = image.src;

  img.addEventListener('mouseover', function() {
    document.getElementById('preview').src = this.src;
    document.getElementById('description').textContent = image.des;
  }, false);

  document.getElementById("thumbnails").appendChild(img);
});

Answer 2

Instead of using iteration,

    for (var i=1; i<=5; i++) {
        document.getElementById("thumbnails").innerHTML += "<img onmouseover="+hover(i)+" name='img"+i+"' src='images/img"+i+".jpg'/>";
}

just declare global var i (you will use it as array index), then increment it on mouseover ++i , then apply modulo division to limit the upper boundary ( ++count % 5 in your case).

Hope this may help.

Answer 3

The reason your mouseover event isn't working is because you're returning a string value for onmouseover, which looks like <img onmouseover="preview.src=imgx.src"> in your HTML.

If you wanna go with inline, your onmouseover needs to be the function that gets called.

Using your code, a quick fix could be,

// Your elements
const thumbnails = document.getElementById("thumbnails");
const description = document.getElementById("description");
const preview = document.getElementById("preview");

// Setting up each image element with inline event handler
for(let i = 1; i <= 5; i++ ) {
  thumbnails.innerHTML += "<img id="+ i +" onmouseover='onHover(this)' src='images/img"+ i +".jpg' />"
}

// Event handler
function onHover(e) {
  const imageID = e.id;
  setPreview(imageID);
  setDescription(imageID);
}

function setPreview(id) {
  preview.innerHTML = "<img src='images/img" + id + ".jpg' />";
}

function setDescription(id) {
  description.innerHTML = getDescription(id);
}

function getDescription(value)
{
    return value == '1' ? "description 1":
          value == '2' ? "description 2":
          value == '3' ? "description 3":
          value == '4' ? "description 4":
          value == '5' ? "description 5": ''
}

Though to consider more than just five images, this should be refactored to be more dynamic. I'd also avoid inline event handlers altogether.

You can checkout some examples on W3Schools