www.webdeveloper.com
Results 1 to 2 of 2

Thread: horizontal menu with rollover images - can it be done?

Hybrid View

  1. #1
    Join Date
    Dec 2005
    Location
    Austin, TX
    Posts
    25

    Unhappy 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.

  2. #2
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    You can change the background image by using the :hover and :active selectors like so:

    Code:
     
    a{
    	background-image: url(/images/stateB.png);
    }
     a:active{
    	background-image: url(/images/stateA.png);
    }
     a:hover{
    	background-image: url(/images/stateC.png);
    }

    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.

    if you want that sort of effect typically a little javascript has to be brought into the mix ( i prefer using the jquery library for this sort of thing myself)

    heres a few tutorials on doing so:

    http://www.seo-expert-blog.com/blog/...ks-with-jquery

    http://www.csskarma.com/blog/active-...n-with-jquery/

    http://www.cssnewbie.com/using-javas...tion-elements/
    Last edited by DanInMA; 09-10-2010 at 02:48 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles