Question

我正在尝试开发个人网站并遇到一些问题。在我的页面顶部，我有一个水平表，其中包含6个不同的图像（按钮），链接到页面的不同部分。

我想用JavaScript调整按钮，并使按钮的图像更改onMouseOver和onMouseOut，所以我找到了一种方法在线使用一些JavaScript，但现在的问题是按钮不再跳转到相应的部分使用谷歌浏览器或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所有按钮时仍然正确链接。

知道是什么打破了链接吗？

Answer 1

新代码图片上的ID可能会混淆链接应跳转到的浏览器，因为它们与链接上的#id相同。

Answer 2

就像mellamokb所说，你的图像的ID和名称混淆了浏览器。您只需更改锚点名称或图像的ID和名称即可。

但我认为您应该考虑使用：hover css伪类，现在所有主流浏览器都支持：http://www.w3schools.com/CSS/sel_hover.asp

JavaScript函数打破了我的页面跳转？

2 个答案: