Hey Mark!
Thanks for taking the time to respond! That is a great way to do it. I
am learning jquery so I wanted to see how to do it in jquery. As you
can see im having a tough time with it lol.
thanks for the feedback though
Glen
On Jan 7, 9:53 pm, Mark Kelly <wastedti...@gmail.com> wrote:
> 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
