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