Forum Moderators: open
I'm working on a site's navigation mechanism. I have a horizontal bar of images, and an empty div below that. When you mouseover one of the images in the top bar, it's supposed to use innerHTML to insert links in the bottom bar.
I have a seperate function for each image of the top bar (there are only about 7). Each function sets the innerHTML of the bottom bar to a different set of links.
But it doesn't work. Why? I'm sure it's some silly error on my part.
EXAMPLE<script language="JavaScript">
function firstimage() {
document.getElementById("linkbar").innerHTML="First Set of Links";
}
function secondimage() {
document.getElementById("linkbar").innerHTML="Second Set of Links";
}function thirdimage() {
document.getElementById("linkbar").innerHTML="Third Set of Links";
}</script>
CODE IN TOP BAR:
<img src="firstimage.gif" onMouseOver="firstimage();" />
<img src="secondimage.gif" onMouseOver="secondimage();" />
<img src="thirdimage.gif" onMouseOver="thirdimage();" />
<div id="linkbar">This is where the links should go.</div>
<a href="some-valid-link" onMouseOver="firstimage();"><img src="firstimage.gif"></a>
The anchor will react "naturally" to a mouseover while an image won't always do so.
For the reccord, the final code used was:
<html>
<head>
<script language="JavaScript">function firstimage() {
document.getElementById("linkbar").innerHTML="First Set of Links";
}
function secondimage() {
document.getElementById("linkbar").innerHTML="Second Set of Links";
}function thirdimage() {
document.getElementById("linkbar").innerHTML="Third Set of Links";
}</script>
</head>
<body><a href="page1.html" onMouseOver="firstimage();"><img src="firstimage.gif" /></a>
<a href="page2.html" onMouseOver="secondimage();"><img src="secondimage.gif" /></a>
<a href="page3.html" onMouseOver="thirdimage();"><img src="thirdimage.gif" /></a><div id="linkbar">This is where the links should go.</div>
