Animated Rollover Website Navigation

Pulse · 16 Feb 2007 at 16:04

I prob cant explain this as best i would like to, but i would like to make a small 'animated' navigation bar that when you scroll over an icon the icon highlights in some way (that bit doesnt matter that much), but... i would also like it to place corresponding text into a near by text box or layer.

im not sure thats exactly how it happens but as a sort of example:

so for instance when you scroll over the 2nd icon the 'About Me' bit changes to 'Home' or 'Links'...

hope you get the idea and can help.

roboffer · 16 Feb 2007 at 19:01

Easy with a little bit of Javascript, function fires onmouseover the menu items to either show an element or change the text of an element to whatever you want. Onmouseout resets it either by hiding the element(s) or resetting its text back to an empty string.

Alternatvely uses a few images if you need the font to be something a little more fancy.

Another option is Flash, all depends on your skillset.

Simple.

akakjs · 16 Feb 2007 at 20:42

roboffer said:
Easy with a little bit of Javascript, function fires onmouseover the menu items to either show an element or change the text of an element to whatever you want. Onmouseout resets it either by hiding the element(s) or resetting its text back to an empty string.

Alternatvely uses a few images if you need the font to be something a little more fancy.

Another option is Flash, all depends on your skillset.

Simple.

mmm it sounds like it *could* (read that as maybe) be done using just css...

akakjs

Pulse · 16 Feb 2007 at 20:55

would either of you be able to show examples of this, i have very little knowledge of java or flash, i mainly code in CSS and HTML

roboffer · 16 Feb 2007 at 20:56

Doesnt sound like it to me, hence the suggestions above.

roboffer · 16 Feb 2007 at 20:57

Pulse said:
would either of you be able to show examples of this, i have very little knowledge of java or flash, i mainly code in CSS and HTML

Im in the middle of scanning images in so I might be able to spare 10 mins. Keep an eye out.

roboffer · 16 Feb 2007 at 21:15

http://roboffer.co.uk/test.html

That what you mean? Obvisouly you can extend with some stlying etc, highlight the current item using CSS and add as many properties to the JavaScript as required.

akakjs · 16 Feb 2007 at 21:25

this was my approach. I cheated and used images rather than text, but as already stated images let you play with the fonts more :

All Css approach

akakjs

Pulse · 17 Feb 2007 at 16:53

omg, a big thanks to both of you

cheers for the help now i can get on with the website now i know how to do it

sorry akakajs but after looking at the codes think ill be going with JavaScript as it looks a lot neater in code

roboffer · 17 Feb 2007 at 17:22

JavaScript

Pulse · 17 Feb 2007 at 17:49

Script

roboffer · 17 Feb 2007 at 18:09

Post back if you have any issues, I purposely coded it simply so it could be easily manipulated.