Image onmouseover - 使用 JavaScript 更改图片和文本

Question

情况： 我创建了一个图片库。显示缩略图并在鼠标悬停时，特定图像以大尺寸显示在另一个容器中。每个图像都有一个描述，可以通过 simple 函数检索。当图像悬停（onmouseover）时，我想设置特定图像并获取其描述。

问题： onmouseover-event 调用函数"hover()"。在此功能中，大图像的来源更改为所选图像。我无法让它改变描述 div 容器的值。到现在为止，我只是尝试将文本更改为任何内容，最后应该会收到存储在 "getDescription()" 函数中的真实描述值。

我尝试了什么： 我尝试了不同的版本和组合来访问描述 div 容器的文本。使用 "document.getElementById('description').innerHTML="+i+" 更改值，但它为 last/highest 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。

Answer 1

不使用迭代，

    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 in你的情况）。

希望这可能有所帮助。

Answer 2

你似乎用错了方法。

您在脚本中保留描述，但根据计数生成图像链接，然后您尝试将它们与一些内联事件处理程序和其他东西放在一起。

使用对象数组将图像链接和描述放在一起，然后对其进行迭代，并插入没有任何内联的元素 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 3

您的鼠标悬停事件不起作用的原因是您为 onmouseover 返回了一个字符串值，在你的 HTML.

中看起来像 <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": ''
}

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

您可以在 W3Schools

上查看一些示例

Image onmouseover - 使用 JavaScript 更改图片和文本

Image onmouseover - change picture and text using JavaScript

html

javascript

onmouseover