On mouse over: show sublinks

[Michiel]

Hi,

I'm not very good at javascript, but for a project of mine I need a script. Is there anyone that can show me how it is done?

What I've got is this: 6 images which represent the main buttons. When someone moves his mouse over one of these buttons, sublinks (text links) should appear. And onmouseout they must be hidden. The thing is that the groups of sublinks all apear on the same spot. When someone clicks a button the sublinks need to stay visible, so one can click them. Off course when the mouse is then moved over an otherbutton, the sublinks that were visible should be hidden as well.

Ho do I achieve this in a cross-browser way? The script *absolutely* has to be compatible with Netscape 4.x as well, for I know a large portion of my visitors use this browser.

If someone has a ready made script available I would be very happy to receive it. If not can someone please point me in the right direction?

Thanx a lot!

Michiel

[smeagol]

I think I might have something like this, but I won't be able to get to it until I get into work tomorrow (Thursday). I'll check it out and let you know.

[Michiel]

That would be great! I'm looking forward to it!

Thanx, Michiel

[smeagol]

Michiel,

Unfortunately, the script I wrote doesn't do what you are looking for. My script is a popup tool-tip type script. When you mouseover a link, a box popups up and exits on mouseout.

Sorry.

[Michiel]

Nevermind,

I've been working on it in the mean time and got this so far:


var cat;

function buttonover(button) {
document.images[button].src = 'menu/'+button+'_over.jpg';
document.section.src = 'sections/'+button+'.jpg';
window.status = button;
return true;
}

function buttonout(button) {
if(cat != button) {
document.images[button].src = 'menu/'+button+'.jpg';
}
document.section.src = 'sections/'+cat+'.jpg';
window.status = '';
return true;
}

function buttonclick(button) {
if(cat != button) {
document.images[cat].src = 'menu/'+cat+'.jpg';
}
cat = button;
document.section.src = 'sections/'+button+'.jpg';
window.status = button;
return true;
}

Is there someone who could check this on cross-browser compatibility?

All I have to do now is write a function that show the sublinks. I guess I'll use InnerHTML for that.

Michiel