JavaScript functions broke my page jumps?
Posted
by
Mark
on Stack Overflow
See other posts from Stack Overflow
or by Mark
Published on 2011-02-24T23:04:43Z
Indexed on
2011/02/24
23:25 UTC
Read the original article
Hit count: 201
Hi everybody, I'm trying to develop a personal website and running into some issues. At the top of my page I had a horizontal table that contained 6 different images (buttons) that linked to different sections of the page.
I wanted to spice up the buttons with JavaScript and make the image of the button change onMouseOver and onMouseOut so I found a way to do so online with some JavaScript but the problem now is that the buttons no longer jump to the appropriate section of the page when using Google Chrome or Safari, but in IE 9 they still do work correctly...
Here is my old code that worked properly:
<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>
Here is my new code that is now broken:
<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>
The images properly switch when the mouse is moved over/off them, but the jump to the corresponding page sections seems to be broken, it seems like they're all jumping to the #about section now. Once again, the weirder thing is that this is only the case when I'm using Google Chrome on my laptop running Windows 7 or Safari using my iPhone 4 but when I use the new Internet Explorer 9 on my laptop running Windows 7 all the buttons still link correctly.
Any idea what's breaking the links?
© Stack Overflow or respective owner
