Logo Replacement

There are so many image replacement techniques out there I’ve lost count. Some using negative margins, super-small fonts or display:none, the reports are that some of them aren’t accessible.

But why replace images at all? Isn’t the alt attribute meant to replace images with text, rather than a contortion of CSS techniques?

For the MOE Website we used negative margins to do the image replacement for the MOE crest on the top left. However, under it is a black-and-white version of the crest. This is used in the printer styles, and will also be printed by browsers that aren’t CSS-enabled. The black-and-white crest has alt text to make it accessible should images be turned off.

I’m sure there are many ways to skin this particular cat.

Advertisements

One response to “Logo Replacement

  1. These are some of the techniques for css image replacement i had used in the past

    http://css-tricks.com/nine-techniques-for-css-image-replacement/

    I personally prefer #8, as it passes css ON and images OFF test. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s