Comments on: Animated navigation items using jQuery

By: Jim

Jim — Mon, 28 Sep 2009 02:38:53 +0000

thanx John
I’ve tried that but i still see the *text* over the image. What i’m trying to do is show the button image with its hover effect now working but also have the text “submit” behind the image so when images are turned off the user can see the text “submit”

I’m sure there has to be some work around this…

By: John Faulds

John Faulds — Mon, 28 Sep 2009 02:34:16 +0000

Hi Jim, I tend to use input type=”image” or images inside

By: Jim

Jim — Mon, 28 Sep 2009 02:23:35 +0000

oops this is my mark up
input name=”submit” value=” ” type=”submit” class=”JoinBtn” onmouseover=”this.className=’JoinBtnHover’” onmouseout=”this.className=’JoinBtn’”

By: Jim

Jim — Mon, 28 Sep 2009 02:22:14 +0000

Hi John
Thank-you for your articles. I’ve been bookmarking them all! I’m a bit of a noob and i have problems with Rollover form buttons. They work except i cannot get them to show the text *when images are off* I’ve searched high and low and haven’t been able to find a solution.

Here is my CSS
.JoinBtn {
height:24px;
width:82px;
background:url(../styleImages/buttons/joinnow1.gif) no-repeat;
margin-left:19px;
cursor:pointer;
}
.JoinBtnHover {
height:24px;
width:82px;
background:url(../styleImages/buttons/joinnow2.gif) no-repeat;
cursor:pointer;
margin-left:19px;
border:none; }

and this is my mark up

I have tried everything! i want to make the site accessible for readers who wish to have their images off.

Your help would be much appreciated.

Thank-you and keep up the good work!!!
Jim.

By: Menu background animé jQuery | WebCssDesign

Menu background animé jQuery | WebCssDesign — Mon, 17 Aug 2009 17:20:40 +0000

[…] Animated navigation items using jQuery [tyssendesign.com.au] […]

By: Animated Navigation w/ jQuery & CSS

Animated Navigation w/ jQuery & CSS — Tue, 28 Jul 2009 09:25:48 +0000

[…] Animated navigation items using jQuery […]

By: John Faulds

John Faulds — Sun, 07 Jun 2009 21:46:52 +0000

It’s because it should actually be #n-home a:active em. The ID is applied to the list item, not the anchor and there is no active state for list items, although there are hover and focus states. Normally, creating a hover effect on non-anchor elements would mean this wouldn’t work in IE6, but jQuery is providing that added level of support which means for the purposes of this demonstration it does.

By: c

Sun, 07 Jun 2009 12:46:04 +0000

Hi John,

Thanks for your response and great article! I did manage to get the (Current) state to work as you intended and just had to isolate the BG position to trigger a third image.

like so…
#home #n-home em { background-position: 0 -78px; cursor: default; }

As for the (Active) state I haven’t had as much luck.

Here is what I am trying to use:
#n-home:active em { background-position: 0 -117px }

but this does not seam to work when clicked. What am I missing?

Much Appreciated.

By: John Faulds

John Faulds — Sun, 07 Jun 2009 06:21:03 +0000

Hi Stuart, sorry for the late reply. I’ve only just had a closer look at what you were talking about and it seems like it might be a bug with Firefox. Replacing #xxxx with a real URL also shows similar behaviour except that you do eventually get to the destination of the link. I haven’t quite worked out what the trigger is though as it involves clicking more than once and moving the mouse away from the link and I haven’t narrowed it down to the exact combination. But as you say, it works fine in other browsers, and it also works in Firefox if you tab into the link with the keyboard, which makes me inclined to believe it’s a Firefox bug.

It would require someone with more experience with jQuery and javascript to drop by to provide the solution though.

@c - the current link is set with an ID on the body which matches up against the ID of each list item. And for the active state, it would be the same process as Dave has used - create an image that includes an extra state and move it into position on :active.

By: c

Sun, 07 Jun 2009 04:18:11 +0000

I know this is an old post but is there anyway to get a current state and active (click) state to trigger similar to Dave Shea’s original article?

Much Thanks..