Re: image rollover

On 2008-06-19, Helpful person <rrllff@xxxxxxxxx> wrote:
I'm fairly new to html but learning fast. I am presently trying to
find the best way to perform an image rollover for a link. In

http://www.htmldog.com/articles/rollovers/

they suggest putting both images in the same jpg file and adjusting
the alignment. This is shown in

http://www.htmldog.com/examples/rollovers1.html

The source code is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>

<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en">
<head>
<title>Rollovers 1</title>
<style type="text/css" media="all">

body {
font: 12px arial, helvetica, sans-serif;
}

a {
display: block;
width: 200px;
height: 63px;
background-image: url(images/toucancombo.jpg);
text-indent: -999em;
}

a:hover {
background-position: bottom;
}


</style>
</head>

<body>

<p><a href="#">Toucan</a></p>

</body>
</html>

I am having trouble understanding the line text-indent -999em

Can someone please explain this to me?

It's just meant to make the actual text "Toucan" disappear since the
idea is you see the image toucancombo.jpg instead.

If the user has CSS disabled for some reason they won't get the
background image toucancombo.jpg. But neither will the text disappear.
So they will just see a boring old link saying "Toucan" probably
underlined in blue, which is ideal.

The text doesn't really disappear, it just takes a long walk off a short
pier. If browsers supported left scrolling (which they should-- will
someone PLEEEASE think of the Arabs) you would be able to scroll
999ems to the left and find the word "Toucan" there.

A more logical choice than text-indent: -999em would be visibility:
hidden. But some article somewhere about how broken most screen-readers
are suggested that text-indent: something-large-and-negative worked
better in practice in the variously borked crop of browsers of the time,
and memes get around.

I like this method because no JavaScript is used for the rollover.
What is the general opinion of using this method?

I agree this is a much neater way to do rollovers than JS. It might not
work in some versions of IE, so aim to keep the page basically usable
without the effect.
.