【发布时间】:2014-09-22 20:00:01
【问题描述】:
我正在尝试编写一个在鼠标悬停时更改图像的脚本。我有 6 张图片,但该功能仅适用于其中一张(第一张)
<div id="picture-container">
<img class="picture" id="360" src="360.jpg" onclick="enlarge(360);" onmouseover="pic_info(360);"
onmouseout="pic_ret(360);"/>
<img class="picture" id="bmx" src="bmx.jpg" onclick="enlarge(bmx);"/>
<img class="picture" id="buzludzha" src="buzludzha.jpg" onclick="enlarge(buzludzha);"
onmouseover="pic_info(buzludzha);"/>
<img class="picture" id="pirata" src="pirata.jpg" onclick="enlarge(pirata);"
onmouseover="pic_info(pirata);"/>
<img class="picture" id="snowboard" src="snowboard.jpg" onclick="enlarge(snowboard);"
onmouseover="pic_info(snowboard);"/>
<img class="picture" id="vitiskali" src="vitiskali.jpg" onclick="enlarge(vitiskali);"
onmouseover="pic_info(vitiskali);"/>
<img class="picture" id="ispolin" src="ispolin.jpg" onclick="enlarge(ispolin);"
onmouseover="pic_info(ispolin);"/>
</div>
还有脚本:
function pic_info(id) {
if (id == "360") {
var p = document.getElementById(id);
p.src = "360info.jpg";
}
if (id == "buzludzha") {
var p = document.getElementById(id);
p.src = "buzludzhainfo.jpg";
}
if (id == "pirata") {
var p = document.getElementById(id);
p.src = "piratainfo.jpg";
}
if (id == "snowboard") {
var p = document.getElementById(id);
p.src = "snowboardinfo.jpg";
}
if (id == "vitiskali") {
var p = document.getElementById(id);
p.src = "vitiskaliinfo.jpg";
}
if (id == "ispolin") {
var p = document.getElementById(id);
p.src = "ispolininfo.jpg";
}
正如我所说,该脚本仅适用于 id="360" 的图片,并且它被导入到 html 文档的 head 标记中。函数“enlarge();”也会发生同样的事情。为什么会这样,我该如何解决? 提前谢谢你!
【问题讨论】:
-
我可以建议重写你的代码吗?类似于:
function pic_info(id){var p = document.getElementById(id); var src = id + "info.jpg"; p.src = src; },更易于阅读和扩展到新功能。 -
不完全相关,但一个
var p = document.getElementById(id);就足够了,你不需要六个... -
删除那些 if 语句...改用 switch 语句:developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
标签: javascript html image src