Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #24327
    dodgson
    Member

    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.

    #54869
    TheDoc
    Member
    #54870
    dodgson
    Member

    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.

    #54867
    TheDoc
    Member

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

    #54880
    dodgson
    Member

    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.

    #54881
    TheDoc
    Member

    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?

    #54884
    ikthius
    Member

    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:



    New Document








    //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

    #54890
    dodgson
    Member

    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.

    #54898
    ikthius
    Member
    "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….

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.