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

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

javascript html

JavaScript函数破坏了我的页面跳转？,javascript,html,Javascript,Html,我正在开发一个个人网站，遇到了一些问题。在我的页面顶部有一个水平表，其中包含6个不同的图像（按钮），链接到页面的不同部分我想用JavaScript增加按钮的趣味性，并在MouseOver和onMouseOut上更改按钮的图像，因此我找到了一种使用JavaScript在线操作的方法，但现在的问题是，当使用Google Chrome或Safari时，按钮不再跳转到页面的适当部分，但在IE 9中，它们仍然可以正常工作以下是我的旧代码，它工作正常： <html> ... <body

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

我想用JavaScript增加按钮的趣味性，并在MouseOver和onMouseOut上更改按钮的图像，因此我找到了一种使用JavaScript在线操作的方法，但现在的问题是，当使用Google 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>


...
var about_init=new Image（）；
about_init.src=“images/aboutMe.png”；
var_init=新映像（）；
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=新图像（）；
games_init.src=“images/gamesPlay.png”；
var contact_init=new Image（）；
联系_init.src=“images/contactMe.png”；
var about_new=新图像（）；
about_new.src=“images/aboutAlt.png”；
var courses_new=新图像（）；
courses\u new.src=“images/courseAlt.png”；
var work_new=新图像（）；
work_new.src=“images/workAlt.png”；
var places_new=新图像（）；
places_new.src=“images/placesAlt.png”；
var games_new=新图像（）；
games_new.src=“images/gamesAlt.png”；
var contact_new=新图像（）；
联系_new.src=“images/contactAlt.png”；
}
函数更改（名称）
{
if（document.images）
{
document.images[the_name].src=eval（the_name+“_new.src”）；
}
}
函数更改返回（函数名称）
{
if（document.images）
{
document.images[the_name].src=eval（the_name+“_init.src”）；
}
}
//-->
...
...

当鼠标移到图像上/离开图像时，图像会正确切换，但跳转到相应页面部分的操作似乎被打断，看起来它们现在都跳转到了“关于”部分。更奇怪的是，只有当我在运行Windows 7的笔记本电脑上使用Google Chrome或在使用iPhone 4的Safari时，才会出现这种情况，但当我在运行Windows 7的笔记本电脑上使用新的Internet Explorer 9时，所有按钮仍然正确链接

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

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

正如mellamokb所说，图像的id和名称会混淆浏览器。您可以简单地更改锚点名称或图像的ID和名称

<>但是我认为你应该考虑使用所有主要浏览器都支持的悬停CSS伪类：

谢谢！删除新代码中的id后，所有按钮现在都正确链接@马克：很乐意帮忙。当答案解决问题时，请将其标记为已接受（左上角投票计数器下方的复选框）。你要养成在所有问题上都这样做的习惯，因为它让别人知道正确答案是什么，并鼓励人们在将来回答你的其他问题。我同意。。。当你可以更容易地用CSSI更改图像时，为什么要使用内联javascript查看了你发布的链接，但是我没有看到关于使用：hover来更改图像的任何内容，只有文本属性。我在网上找到了另一个链接，展示了一个如何使用的示例：悬停来更改图像，但这让我有点困惑，因为通过删除图像的ID，我解决了这个问题，我想我会让它保持原样，因为它正在工作@我不熟悉网页开发/设计，我从未学过JavaScript或CSS，只学过很少的HTML，所以我不熟悉很多做简单事情的方法。