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);
});