72dpi.net.au

Image Replacement for H1 headings

// May 24th, 2007 // General

Ok, so you’ve seen it all before, this tutorial is nothing new, but it does bring a new way of making your site look dynamic, whilst still being accessible.

Whilst working on a recent job, I was stuck with the dilemma of needing header images to replace the < h1> tag, which were still accessible. No probs i thought, there’s plenty of tutorials online. I came across the perfect solution to handle this, but i still had an inherent problem of my heading images taking a while to load.

This is a very neat solution, that overcomes this problem, very simply.

The simple method for Image replacement for H1 tags, is by using CSS. For accessibility purposes, the css tag display:none; cannot be used, as screen-readers will ignore this altogether, therefore making the page harder to understand.

We can, however, push the text to the left of the page, using text-indent, like: text-indent:-9999px;

Let’s get straight to it.

Ok, so, in your page, you have the following:

<h1 class="about_us">About Us </h1>

In our CSS we have:

.about_us {
    width:460px;
    height:250px;
    overflow:hidden;
    background:transparent url(../images/about_us.jpg) 0 0 no-repeat;
    text-indent:-9999px;
    margin-bottom:15px;
    }

This method, will replace the h1 heading, with our image (located in the images folder). We use the numbers 0 0 to position the image top & left, and set it to no-repeat so we only see the image once.Our text-indent:-9999px will push our text way to the left out of visual site, and still allow the text to be read by screen-readers.Now, if your image is big, this will take a few seconds to load (unless you use Javascript to pre-load), so we will wrap our H1 tag in a div, and apply some css, so, now our code looks like this:

<div class="h1_bg"><h1 class="about_us">About Us </h1></div>

and we add another class to our CSS:

.h1_bg {
    background: transparent url(../images/loading.gif) no-repeat 180px 100px;
    }
    

Since I wanted the loading image to be set in the middle of my larger image, i set it’s position to 180px 100px (left & top)

Even if you use a CMS with dynamic headers as I have where some sections don’t have a background image for a heading, the loading image won’t show, as it is set to 100px from the top position.The look & feel of using this site, makes it accessible & look dynamic, and it’s so simple!

Want to get your own "Ajax-Loading" style animated gif?, why not make one at: http://www.ajaxload.info/ Have fun!