Hide the text of a link and show a CSS image

8 May, 2008

I was playing around with a CSS rollover method which uses the one image, and just shifts it around to simulate a rollover. There are posts for a bunch of different approaches to this around the place ->

The Problem

The problem I had was that to make the technique accessible, it needed content inside the anchor tag (which most of the examples above neglected to add in). This can be solved by hiding the text away somehow, but I soon found a bit of a deal-breaker.

Take this example:

<a class=”abc” href=”http://www.abc.net.au”>ABC</a&gt;

And in the CSS:

a.abc {
display:block;
height: 18px;
width:200px;
background-image: url(abc.gif) no-repeat;
text-indent: -1999px
overflow: hidden;
}

a.abc:hover {
background-position: -300px
}

Now in this example and most other examples out there this works great! Until you start turning things off…

Turn off CSS – it works. The images disappear and the old text link remains, great.

Turn off CSS and images – also fine. The CSS never has a chance to load the images or move the text off to the left of screen.

Turn off images only – uh-oh.

Turning off images but still having the CSS working means that the text is still being hidden off to the left of screen. While this is fine for screen readers, it’s no good at all for people running around with their images turned off leaving them without even a hint that there is supposed to be a link there!

This was a bit of a problem… how do you get the CSS to show the text when images are turned off, but hide the text when the images are turned on?

The Solution

My solution probably breaks a few rules, but it seems to work so far. Insert your old pal spacer.gif in to an img tag. (For the n00bs out there – spacer.gif is just a 1px x 1px transparent gif)

Expanding on the earlier example:

<a class=”abc” href=”http://www.abc.net.au”&gt;<img alt=”ABC” src=”spacer.gif”/></a>

And in the CSS, we can get rid of the old styles that were being used to remove the text off to the left of screen:

a.abc {
display:block;
height: 18px;
width:200px;
background-image: url(abc.gif) no-repeat;
text-indent: -1999px
overflow: hidden;
}

a.abc:hover {
background-position: -300px
}

So now if no images are being loaded, the image’s alt tag shows up. But if images are being loaded, the alt tag is hidden because the image is loading fine, there is no ‘normal’ text any more and the CSS background images load in as expected.

The downside to this method is that as far as I know you can’t change the appearance of the alt text, but if the users are used to viewing sites with images turned off they’re probably used to it!

About these ads

5 Responses to “Hide the text of a link and show a CSS image”

  1. Nick said

    In that case why not just have the background images instead of the spacer gif! and not bother with the css at all.

    Might be more seo friendly no? since 1px 1px spacer gifs are infact evil.

    ignore me, you want the -300 for the hover effect. Hmm if you didnt thou…

    • marblegravy said

      Hey Nick,
      I think you understood what I’m trying to do by the end of your comment!
      The problem is that if you are using background images, and have text in place for screen readers but are happily bumping that off the screen because you figure everyone who can see will have images turned on, if a sighted user comes to your site with images turned off for whatever reason, the css is still ditching the text content and therefore, they don’t see anything.
      I’m sure there is a neater solution for this. Maybe a javascript widget that checks the user settings and changes the CSS approriately or something like that.

  2. thank you , i try to make this idea along time ago..

  3. Hello there! I know this is somewhat off topic but I was wondering
    if you knew where I could find a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having difficulty finding one?
    Thanks a lot!

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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: