Re: FN-FORUM: CSS menu with images

date posted 12th November 2007 12:37

Yes that will work. Just to add a little to it...
If you're gonna add the hover effect 'include' the image on the page, as a
preloader:



It'll make it slicker.

Jomo
Web Design
www.DynamicDeveloper.co.uk

-----Original Message-----

Something like this would be your best bet. Quick and clean, seo
friendly, accessible and most importantly you'd be keeping the layout
and structure separate to the content.

Weddings

style:
a.weddingslink:link,
a.weddingslink:visited
{
text-indent: -9009px; width: 115px; height: 28px; display: block;
background: transparent url(images/link_weddings_off.gif) no-repeat;
}
a.weddingslink:hover,
a.weddingslink:active
{ background: transparent url(images/link_weddings_on.gif') no-repeat; }

Hope that makes sense. I use that method on my own website.
www.KieranBowler.co.uk but without the rollover state.

On 12 Nov 2007 12:22:27 -0000, Paul Cooper [EMAIL REMOVED] wrote:
>
> After doing a nice list item menu for a site my client has decided
> they want to use images for the text because they've used an unusual
> font that can't be the same in HTML as their design. The last time I
> did this I used to use something like this with a preloader:
>
> src="images/link_weddings_off.gif"
> onMouseOver="this.src='images/link_weddings_on.gif'"
> onMouseOut="this.src='images/link_weddings_off.gif'">
>
> Is there a newer way to do this so the image file names etc. are all
> in the CSS? IDs for the different links I guess. I'd just want to
> see something best practice so I know I'm doing it right.
>
> TIA
> Paul
>