基本上我要做的是让图像在鼠标悬停时更改为反转版本。到目前为止,我只用id“crew1”测试图像。这是代码:
<script type="text/javascript">
function imageChange(oldID) {
var a = "http://www.affiliateskeptic.com/wp-content/uploads/2010/06/face_placeholder_new.jpg";
var b = "http://www.affiliateskeptic.com/wp-content/uploads/2010/06/face_placeholder_new.jpg";
var c = "http://www.affiliateskeptic.com/wp-content/uploads/2010/06/face_placeholder_new.jpg";
var d = "http://www.affiliateskeptic.com/wp-content/uploads/2010/06/face_placeholder_new.jpg";
switch(oldID) {
case "crew1":
document.getElementById(oldID).src=a;
break;
case "crew2":
document.getElementById(oldID).src=b;
break;
case "crew3":
document.getElementById(oldID).src=c;
break;
case "crew4":
document.getElementById(oldID).src=d;
break;
}
}</script>
相关的HTML代码是:
<div>
<img onmouseover="imageChange("crew1")" id="crew1" src="http://www.affiliateskeptic.com/wp-content/uploads/2010/06/face_placeholder.jpg" alt="Picture of Crew 1" width="224" height="235">
<p>Crew 1 character description.</p></div>
很抱歉格式错误但由于某种原因,当我将它们放在新行上时,脚本和div的结束标记不会显示。
提前感谢您的帮助。
答案 0 :(得分:2)
您的HTML中存在嵌套引号问题。您可以通过切换您使用的引号样式来解决此问题,因为JavaScript和HTML可以互换地接受单引号和双引号。改变这个:
<img onmouseover="imageChange("crew1")" ...>
对此:
<img onmouseover="imageChange('crew1')" ...>