Hi Glen.
I'm late to the thread (and this is probably a bit off-topic for this list)
but up until the point where you asked for the cross-fade, everything you need
can be done with vanilla CSS, no need to involve jquery at all.
In the page:
<a class="available-button" href="whatever.php">
Currently accepting new jobs
</a>
In the CSS:
div#availibilty a.available-button {
display: block;
float: right;
width: 169px;
height: 222px;
border: none;
background: url('images/avail.png) top left no-repeat;
text-indent: -3000px;
}
div#availibilty a.available-button:hover {
background: url('images/availhover.png) top left no-repeat;
}
I put up the example above using your images:
http://b.ite.me.uk/css_demo.html
One advantage to this is that it works in browsers that have javascript turned
off, and also that screen readers etc. will still see the link as text (try
looking at it in Firefox with styles turned off to get an idea what a screen
reader sees). Improved accessibility is always a good thing.
Hope this helps, if not for this (CSS can't do you a cross-fade) then maybe
other projects,
Mark
