View Full Version : Roll over or animated navigator???? Can this be done!

06-03-2006, 03:25 AM
-First I am pretty new to web page making but I am used to working with complex programs so I am not to worried about doing higher level things. Yeah for tutorials and long hours on the computer
-Okay so this is what I am hoping I can find a sulotion for. I have the navigation bar on the site I am working on and it looks like smoke is behind all of the page names. What I would love to have happen is when you roll over a name the smoke behind the rest dissapears and is only behind the chosen page name. I am not sure if this will work but hey it would be cool. The ultimate would be the rest of the smoke dissolve or move into the selected region so more along the lines of flash animation. Again not sure if this is realistic.
-Then the second bit is I was wondering if it would be to confusing or not very proffessional looking to have the navigation slightly different on each page. I would like the nav link of the page you are on to be a diffent color.

Thanks a bunch.

06-03-2006, 03:51 PM
hi mnrtgirl and welcome to the forume!
Can you give a url with example of a navigation like this?

06-04-2006, 11:49 PM
nope that is one of the problems and one reason Iam not sure if it can be done! :D

If anyone can find one that would be great as well.

06-05-2006, 06:30 AM
sounds like to me an effect that could only be achived through designing a menu in flash using 'masking'. i still havnt got the 'knack' of masking as its quite tricky.

i really dont c any other way of doing it. unless there is some sort of way to start an animated gif on mouseover? Then you could have your static image, but when mouseover - the smoke desipitates. (to make a animated gif u need adobe illustrator)

anyone kno if this can be done ????

06-05-2006, 11:21 AM
My problem was I don't grasp the conecpt yet :-/ That's why I was looking for an example.

06-05-2006, 03:34 PM
Well This is cetainly a start! I have CS2 Creative suite so I have illustrator so I will have to start playing around and see what I can come up with.

Basically what I want is for multiple things to happen to the entire navigation bar when you go over it. so having your mouse on home for example, would make not only the home pic look brighter but make the rest of the navigation bar look different as well.

So with mine it starts with there being a cloud of smoke behind all the words on the nav bar. Then when you have your mouse on home (for example) the clould dissapears behind the rest of the words and is only a little cloud behind the word home.

What it sounds closest to in all the reading I have been doing is a multiple event image swap. But I haven't seen anything where all the multiple advents happen only on the navigator.

Like I said maybe this is unrealistic but hey thought I would see. I've been wondering if maybe this could be done with multiple layers. After reading some different articles and tutorials.

Thanks Hope this explained it a bit better. :)

06-05-2006, 05:27 PM
There are CSS navigation bars that change the background images using hover. Search Google for tutorials and examples.

I would prefer CSS to complex JavaScript if it works for current browsers, if not for Netscape 4.0.