horizontal menu with rollover images - can it be done?
Grrr. I'm beginning to wonder if I should just abandon my grand plans for a cool website and try something like Wordpress ... I'm just not sure that would be any easier or allow me the freedom to do everything I want to do. Disclaimer: I'm teaching myself CSS, and I'm not any sort of scripter. I'm only touching web dev because I want to redesign my website.
Okay. I know how to make a simple horizontal menu using HTML and CSS. But instead of using text, I would like to use images. Each link on the menu is represented by one of three images. Image1A for the active page, Image1B for a link, and Image1C for hover. When the user looks at the menu, there will only be one Image in the "A" state (and that is the page they are currently on). The other image links will be in the "B" state unless hovered over, in which case they go to the "C" state.
I've tried a ton of tutorials, and not a single one works for what I'm trying to do ... which should be simple and easy, but apparently it's not. I've checked out source code from other websites, but it looks either too complicated or too different from what I'm doing.
I'd link to my site, but I don't want to make this page live yet, since it looks like crap.
Suggestions and advice would be much appreciated.
You can change the background image by using the :hover and :active selectors like so:
the problem with :active is it only is "active" once the link has already been clicked and you can't set one link as already being active with css, to my knowledge.
heres a few tutorials on doing so:
Last edited by DanInMA; 09-10-2010 at 02:48 PM.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread