Friday, August 18, 2006

Invisible Titles

Here's a simple technique for web developers wanting alternate text for background images. Why would you want this? Well background images often disappear, for example when stylesheets fail to load, or are over ridden by a user with poor eyesight. To make sure the page still makes sense in these situations, put the following CSS in the sheet that contains the linked background image urls;

    .invisibletitle {display: none;}
@media print {
    .invisibletitle {display:block;}
}
@media aural {
    .invisibletitle {display:block;}
}

Then class="invisibletitle" can be applied to tags around alternate text in the html, making the text invisible whenever background images are visible, yet visible/readable when background images are missing or ignored. I said it was simple!

Example: www.destiny-dubai.co.uk/holdingpage.htm
Do a print preview, or turn off stylesheets, to see the invisible titles appear.

4 comments:

bouncysteve said...

slight typo "invisisbletitles"

Kelvin said...

Ta. You are "Super Proof Reading Man!"

bouncysteve said...

Surely a superhero as ineffectual as Python's "Bicycle repair man"

Apologies also for going straight for the juggler, instead of congratulating you on another nugget of helpfulness.

(PS Feel free to correct the error and blat all this before someone proper comes along)

Kelvin said...

Well your super powers are very useful. It's just that they only impress the few, not the many.