Question

我有以下代码在大预览图像旁边被视为缩略图。

<img onmouseover="getElementById('preview').src=(this.src)" src="images/1.jpg" alt="TESTING 1">
<img onmouseover="getElementById('preview').src=(this.src)" src="images/2.jpg" alt="TESTING 2">
<img onmouseover="getElementById('preview').src=(this.src)" src="images/3.jpg" alt="TESTING 3">

然后我有了我的预览图片......

<div class="preview" align="center"><img id="preview" src="images/1.jpg" alt="TESTING 1" /></div>

将鼠标悬停在缩略图上时，会更新预览。我想将alt属性传递给预览。

我试过这个......

<img onmouseover="getElementById('preview').src=(this.src).setAttribute('alt',this.alt)" src="images/1.jpg" alt="TESTING 1">

这......

<img onmouseover="getElementById('preview').src=(this.src).alt(this.alt)" src="images/1.jpg" alt="TESTING 1">

两者都不起作用。我不是最好的提出我自己的JavaScript，但我显然做错了

Answer 1

如果yopu将你的js带入另一个函数，你总会有更好的结果。

我为你创建了changePreview函数。

希望这就是你要找的东西。如果需要，很乐意解释或帮助提供更好的解决方案。

＆＃13;

function changePreview(thumb){
var preview = document.getElementById('preview')
var title = document.getElementById('pre-title')
  preview.src=(thumb.src);
  preview.alt=(thumb.alt);
  title.innerHTML = preview.alt;
  console.log('New alt: '+preview.alt);
}

＆＃13;

<img onmouseover="changePreview(this)" src="images/1.jpg" alt="TESTING 1">
<img onmouseover="changePreview(this)" src="images/2.jpg" alt="TESTING 2">
<img onmouseover="changePreview(this)" src="images/3.jpg" alt="TESTING 3">

<div class="preview" align="center"><img id="preview" src="images/1.jpg" alt="TESTING 1" /></div>
<p id="pre-title"></p>

＆＃13;

Answer 2

要达到预期效果，请使用以下选项

选项-1：添加分配alt，半分号

<img onmouseover="getElementById('preview').src=(this.src);getElementById('preview').alt=(this.alt)" src="images/1.jpg" alt="TESTING 1">
<img onmouseover="getElementById('preview').src=(this.src);getElementById('preview').alt=(this.alt)" src="images/2.jpg" alt="TESTING 2">
<img onmouseover="getElementById('preview').src=(this.src);getElementById('preview').alt=(this.alt)" src="images/3.jpg" alt="TESTING 3">

代码示例 - https://codepen.io/nagasai/pen/GQVZxL?editors=1010

选项2：使用onmouseover事件函数

<img onmouseover="preview(this)" src="images/1.jpg" alt="TESTING 1">
<img onmouseover="preview(this)" src="images/2.jpg" alt="TESTING 2">
<img onmouseover="preview(this)" src="images/3.jpg" alt="TESTING 3">

<div class="preview" align="center"><img id="preview" src="images/1.jpg" alt="TESTING 1" /></div>

JS：

function preview(e){
   document.getElementById('preview').alt = e.alt;
   document.getElementById('preview').src = e.src;
}

代码示例 - https://codepen.io/nagasai/pen/OQKNZK?editors=1010

onmouseover - 使用带有图片标记的alt标记

2 个答案: