Hey folks,
Sorry if this topic has already been covered, I did a brief look around before posting, and it’s too early in the morning for me. :D
I am developing a website with your typical horizontal navigation bar. The menu consists of text links with sufficient padding, etc. Each anchor element has a different icon (that is a background image, not a standard image) left-aligned associated with the link. My menu structure is a unordered list wrapped in a div element. The div element has a subtle gradient background.
Here’s what I would like to achieve, and I have absolutely no idea how to do it.
When onMouseOver event is reached on the anchor, I want to fade in a different background image on the list-item, so I’m guessing I need a way to initially set the background image’s opacity to 0 on page load, and fade in the image via opacity.
And I want to reverse the process onMouseOut.
I’ve searched and searched and searched. I haven’t found anything that uses a background image, only fading colors. Colors aren’t an option for me, as the hover background image has a subtle gradient to it as well, it’s just brighter.
I’ve been slamming my head into the table for a while now, so any help you could offer would be spectacular and greatly appreciated.
I’m using the latest version of jQuery by the way.
*EDIT* A good example is the jQuery UI website’s "launch pad" (near the footer). http://ui.jquery.com/home
I’ve looked at the JS and CSS, and it looks like a beast :(
