情况:我创建了一个图像库。缩略图被显示,当鼠标悬停时,特定的图像会在另一个容器中以大图形式显示。每个图像都有一个描述,可以通过简单的函数检索。当悬停在一个图像上时,我想设置特定的图像并获取其描述。
问题:鼠标悬停事件调用函数“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。