鼠标悬停图片-使用JavaScript更改图片和文本

Question

情况：我创建了一个图像库。缩略图被显示，当鼠标悬停时，特定的图像会在另一个容器中以大图形式显示。每个图像都有一个描述，可以通过简单的函数检索。当悬停在一个图像上时，我想设置特定的图像并获取其描述。

问题：鼠标悬停事件调用函数“hover()”。在此函数内，将大图像的源更改为所选的图像。我无法使描述div容器的值发生变化。到目前为止，我尝试将文本更改为任何内容，最终应该接收存储在“getDescription()”函数中的真实描述值。

我尝试过的：我尝试了不同版本和组合来访问描述div容器的文本。使用“document.getElementById('description').innerHTML="+i+"”更改了值，但它将值固定为最后/最高的i。

代码：

<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>

注意：非常感谢您的帮助，但是我不能使用jquery。

- the_chimp

---

这是一个非常好的问题。 - Derek 朕會功夫

你尝试过更改描述而不更改图像src，看看会发生什么吗？ - abagshaw

Answer 1

你似乎走了一条错误的路。

你在脚本中保留描述，但是基于计数生成图像链接，然后尝试使用一些内联事件处理程序和其他内容将其组合在一起。

使用对象数组将图像链接和描述保持在一起，然后只需对其进行迭代，并插入元素而无需任何内联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);
});

- adeneo

---

非常感谢！你的解决方案非常完美，而且将图像源和描述放在一起更加简单！ - the_chimp

Answer 2

不要使用迭代，

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

先声明一个全局变量var i（你将使用它作为数组索引），然后在鼠标悬停时将其递增++i，接着使用模除法来限制上限（在你的情况下是++count % 5）。

希望这能对你有所帮助。

- Alexander Bell

Answer 3

你的鼠标悬停事件无法正常工作的原因是因为你在onmouseover中返回了一个字符串值，它看起来像这样：<img onmouseover="preview.src=imgx.src">。

如果你想使用内联方式，你的onmouseover需要是被调用的函数。

使用你的代码，一个快速修复方法可能是：

// 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": ''
}

虽然考虑的不仅仅是五张图片，但这应该被重构为更具动态性。我也会完全避免使用内联事件处理程序。

您可以在W3Schools上查看一些示例

- Noel