Cool roll over navigation idea... but how?

[colonel5]

I'm working on this idea for a navigation of the manufacturers we sell & service on our website. I made the images of the before and after which are below (1st is plain and 2nd has "Xerox" rolled over)

The idea is that the manufacturer logos just look like buttons, then when you roll over them below it appears a bar with text links on the left and an ad on the right.

Navigation Plain

http://iotinc.com/newsite/nav1.png


Navigation with roll over

http://iotinc.com/newsite/navrollover.png

I'm pretty sure this can be done with some css & javascript but I'm not totally sure the best place to start. Any ideas?

Let me know if I wasn't informative enough about what I'm trying to do above.

Thanks!

[Mynock]

Here's some links I have.
http://www.pmob.co.uk/
http://css.maxdesign.com.au/listamatic/index.htm

[dyers78]

I think some simple layers would do the trick. It would be even cooler if you can get it to do the yahoo thing where the rest of the page moves up and down as the roll-over is activated and deactivated. Cool concept!

[chris_bcn]

have a look at some javascripts libraries - moofx can do something similar to that

[tZ]

what you can do is create (x) seperate divs with the containing info and Then hid them. After use javascript to attach a listener to the buttons and make the desired one appear.

I'm sure this can also be done with css and psudo class selectors but, am not possitive. I would have to look it up.

[JPnyc]

Why register event listeners? You use those when you have a couple dozen or more elements that you need to have respond to an event, and you need to know which one it was. With a handful of elements like this, it would be remarkably bloated and inefficient coding.

You can give them an id if you want, and pass the ID to the function in the call like:

onmouseover="myFunction('myElId')"

or

If they're all the same element (i.e. all divs or all tds) then you can reference them like

document.getElementsByTagName('div')[i].style.display=

And then pass the value of 'i' as a number in the function call. onmouseover="myFunction(0)" would get you the 1st element of that type, passing 1 would get you the 2nd, and so on.

[JPnyc]

Here's how I would do it, colonel

function hideShow(id,state) {
document.getElementById(id).style.display=state;
}

Now in each tab put onmouseover="hideShow('elementID','block')"
onmouseout="hideShow('elementID','none')"

The element id will of course be different for each element, but the value of state will be block and none for mouse over and mouse out.