Hello,
Has anyone ever seen a use of jQuery for an advanced button rollover
effect such as this:
The main target area is a 20x20 graphic. Upon mouseover, a 80x20
graphic appears in its place, with 60px hanging to the left over any
content that happens to be there. For example:
Main target area:
[]
Rollover state:
===[]
And then, to further complicate things, both parts of the rollover
state (the original 20x20 and the hanging 60x20) have their own
rollover states (just color changes).
I have to build this for a client and am looking for some guidance on
how to build this. What I've done so far is to bind a mouseover event
handler to the original 20x20 graphic and create an 80x20 div that's
relatively-positioned to hang over the left like that. Then, within
the 80x20 div are two separate <div>s for the other rollover states.
This, however, has failed miserably. And I'm going bald tearing my
hair out to solve this.
I know this sounds almost needlessly complicated for a button, but in
the context of this client's web application, it makes sense. (Though
they certainly could have found an easier way to design it. Sigh.)
Has anyone built something similar in the past?
Or would anyone be willing to sub-contract this work from me and build
it? I'm at my wit's end and am willing to pay someone a reasonable
rate to help me out.
Thanks!
- Mike
