0
我正在尝试开发个人网站并遇到一些问题。在我的页面顶部，我有一个水平表，其中包含6个不同的图像（按钮），链接到页面的不同部分。JavaScript函数打破了我的页面跳转？
我想用JavaScript调出按钮，并使按钮的图像在onMouseOver和onMouseOut上发生变化，所以我找到了一种方法在线使用一些JavaScript，但现在的问题是，按钮不再跳转到适当的位置使用页面的部分时，谷歌Chrome或Safari浏览器，但IE 9，他们仍然正常工作......
这里是我的旧代码工作正常：
<html>
...
<body>
<center>
<table border="1" style="color:#D80000;text-align:center">
<tr>
<td>
<a href="#about"><img src="images/aboutMe.png" alt="About Me"></a>
</td>
<td>
<a href="#courses"><img src="images/courseList.png" alt="Courses"></a>
</td>
<td>
<a href="#work"><img src="images/workHistory.png" alt="Work History"></a>
</td>
<td>
<a href="#places"><img src="images/placesBeen.png" alt="Places I've Been"></a>
</td>
<td>
<a href="#games"><img src="images/gamesPlay.png" alt="Games I Play"></a>
</td>
<td>
<a href="#contact"><img src="images/contactMe.png" alt="Contact"></a>
</td>
</tr>
</table>
</center>
...
</body>
</html>
这里是我的新代码，现在打破：
<html>
<head>
...
<script type="text/javascript">
<!--
if (document.images)
{
<!-- Preload original Images -->
var about_init= new Image();
about_init.src="images/aboutMe.png";
var courses_init= new Image();
courses_init.src="images/courseList.png";
var work_init= new Image();
work_init.src="images/workHistory.png";
var places_init= new Image();
places_init.src="images/placesBeen.png";
var games_init= new Image();
games_init.src="images/gamesPlay.png";
var contact_init= new Image();
contact_init.src="images/contactMe.png";
<!--Preload images for mouseover -->
var about_new= new Image();
about_new.src="images/aboutAlt.png";
var courses_new= new Image();
courses_new.src="images/courseAlt.png";
var work_new= new Image();
work_new.src="images/workAlt.png";
var places_new= new Image();
places_new.src="images/placesAlt.png";
var games_new= new Image();
games_new.src="images/gamesAlt.png";
var contact_new= new Image();
contact_new.src="images/contactAlt.png";
}
function change_it(the_name)
{
if (document.images)
{
document.images[the_name].src= eval(the_name+"_new.src");
}
}
function change_back(the_name)
{
if (document.images)
{
document.images[the_name].src= eval(the_name+"_init.src");
}
}
//-->
</script>
</head>
<body>
...
<center>
<table border="1" style="color:#D80000;text-align:center">
<tr>
<td>
<a href="#about" onMouseOver="change_it('about')" onMouseOut="change_back('about')"><img src="images/aboutMe.png" name="about" id="about" border="0" alt="About Me"></a>
</td>
<td>
<a href="#courses" onMouseOver="change_it('courses')" onMouseOut="change_back('courses')"><img src="images/courseList.png" name="courses" id="courses" border="0" alt="Courses"></a>
</td>
<td>
<a href="#work" onMouseOver="change_it('work')" onMouseOut="change_back('work')"><img src="images/workHistory.png" name="work" id="work" border="0" alt="Work History"></a>
</td>
<td>
<a href="#places" onMouseOver="change_it('places')" onMouseOut="change_back('places')"><img src="images/placesBeen.png" name="places" id="places" border="0" alt="Places I've Been"></a>
</td>
<td>
<a href="#games" onMouseOver="change_it('games')" onMouseOut="change_back('games')"><img src="images/gamesPlay.png" name="games" id="games" border="0" alt="Games I Play"></a>
</td>
<td>
<a href="#contact" onMouseOver="change_it('contact')" onMouseOut="change_back('contact')"><img src="images/contactMe.png" name="contact" id="contact" border="0" alt="Contact"></a>
</td>
</tr>
</table>
</center>
...
</body>
</html>
当鼠标移到/关闭它们时，图像可以正确切换，但跳到相应页面部分似乎已被打破，似乎他们现在都跳到了#about部分。再次，更奇怪的是，当我在使用我的iPhone 4运行Windows 7或Safari的笔记本电脑上使用Google Chrome时，仅当我在运行Windows 7的笔记本电脑上使用新的Internet Explorer 9时，所有按钮仍然正确链接。
任何想法是什么打破了链接？
谢谢！删除我的新代码中的编号后，按钮全部正确链接！ – Mark 2011-02-24 23:17:30
@Mark：很高兴帮助。当答案解决问题时，请将其标记为已接受（位于左上角的投票计数器下方的复选框）。你想在所有问题上养成这样的习惯，因为它可以让别人知道正确的答案，并鼓励人们在未来回答你的其他问题。 – mellamokb 2011-02-24 23:21:08