Posts filed under 'Accessibility'

The Multipage Validator as an official Google button

Marc-Antoine Ross April 25th, 2006 Add comment

Mario and I are very happy to announce that the Multipage Validator button has been added to the Google Toolbar button gallery. This button works with our Multipage Validator which is a very powerful tool to validate your website’s HTML or xHTML code.

An immediate rollover… with no delay!

Mario Laflamme March 7th, 2006 Add comment

I am convinced that most of you have already faced the problem caused by the rollovers with the delay of downloading the images. Several scripts exist and some work better than the others but the following technique is my favorite with its lightness… and even its accessibility!

Demonstration

First of all, merge the image OUT and the image OVER in a single image by placing them the one above the other one as the following image:

Taxi

Then, insert the following HTML / XHTML code in your page:

<a href=”http://www.devtaxi.com/” class=”taxi”>Taxi</a>

Finally, insert the following CSS code in your style sheet.

a.taxi {
    display: block;
    text-indent: -10000px;
    text-decoration: none;
    width: 110px;
    height: 73px;
    background: url(taxi.gif) 0 -68px no-repeat;
}
a.taxi:hover {
    background: url(taxi.gif) 0 0 no-repeat;
}

Here is the result:

Taxi

Explanations

All the control is behind the background property which allows moving the image… which is half veiled with the height property which allows hiding a part of it. For its part, the text-indent property allows hiding the text, what turns out to be a better alternative than the image with its alt tag.

You can use this technique and simple modifications to achieve different results… among which a link like this one.

Schedule

July 2008
M T W T F S S
« May    
 123456
78910111213
14151617181920
21222324252627
28293031