Grow your CSS skills. Land your dream job.

preload hover state, re-set orig if othe button is hovered

  • # March 11, 2009 at 11:47 am

    Hey guys, I’m trying to do something that I haven’t done before. I want to preload a buttons hover state, when loading a page for the first time. That’s the part I can do… I was hoping that when you hover over one of the other buttons the original button that loaded in the hover state would load back to the regular link state.

    Is this possible.

    # March 11, 2009 at 12:27 pm

    CSS Sprites will accomplish this.

    http://css-tricks.com/css-sprites-what- … -use-them/

    # March 11, 2009 at 1:26 pm

    Thank you for the quick response. I appreciate it. I have set-up the buttons using this sprite technique and it works perfectly. The only thing that I’m having trouble with is the idea of having one highlighted btn load. I can do this… but the problem is when I go to another button, I would like the highlighted button (button in hover on load) to go to the down state once the new button is in the hover state. I hope this make sense. I’m starting to confuse myself.

    # March 11, 2009 at 1:51 pm

    It should do that automatically. Do you have a link to what you’re working on?

    # March 11, 2009 at 4:35 pm

    The following is a link to the working site http://www.simsadvertising.com/testSites/pdsV2/index.php. As you can see the insurance Professionals tab is highlighted at the bottom. I would like to be able to hover over the tabs and the insurance professionals tab instantly snaps to the down state. I just want to have it temporarily highlighted on load, to show that their is additional info when you hover over all of the tabs.

    Thanks for your help.

    # March 11, 2009 at 5:06 pm

    Aaahhhh, I see your problem now.

    Though, I don’t see an easy solution. I will have to think about this one. Anyone else have any suggestions?

    # March 11, 2009 at 5:34 pm

    a temporary solution is to have a different colour for the hover effect and have that colour for the selected state.

    I am not that knowledgeable on JavaScript at the moment, I have lost my mojo with it, but I believe JavaScript will be your buddy in this instance.

    why not have an onmouse over event and in that event, make the element that your hovering have the new image and turn off the other image at the same time;

    Code:
    function imageOnOff()
    {
    getElementById(‘PropOwner’).src=”new hover image”;
    getElementById(‘InsProf’).src=”white image”;
    }

    Prop owner
    Insurance

    this is only an idea, not tested and don’t know if it is entirely correct coding wise.

    here is a very quick test: use your own image called 1.jpg, 2.jpg, 3.jpg

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">









    //disclaimer, I have been playing with teh code, this has been changed 3 times now, and I think it now shows what it is suppossed to do

    not perfect but you will get ideas from this

    # March 11, 2009 at 9:01 pm

    Thanks guys, I really appreciate your efforts. i’m going to give the javascript example a try tomorrow during the day. I will post how things worked out.

    Thanks again.

    # March 12, 2009 at 3:47 am
    "dodgson" wrote:
    Thanks guys, I really appreciate your efforts. i’m going to give the javascript example a try tomorrow during the day. I will post how things worked out.

    Thanks again.

    you may want to try a function for each link on hover state, a function for each link for non hover state and one function for selected state.

    it sounds like a lot of functions, but I tried if statements and it never worked, i think because it is generated by the event.

    it may work with if statements and call one function / you may even get a switch to cut it all down, but not entirely sure, and was just wanting a working model last night….. on the javascript people….

    # March 12, 2009 at 5:20 am

    I think you guys are over complicating this. I think the simplest solution is jQuery, create a class for the hover state in your CSS, add the class to the element on page load with jQuery and remove it as soon as you mouseover anything else.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".