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 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 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:34 pm
a temporary solution is to have a different colour for the hover effect and have that colour for the selected state.
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:
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
//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
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.
This reply has been reported for inappropriate content.
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.
You must be logged in to reply to this topic.