Re: image rollover



On Jun 24, 12:19 am, Helpful person <rrl...@xxxxxxxxx> wrote:
On Jun 19, 3:55 pm, Helpful person <rrl...@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?

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

I've read through the answers and am most grateful for the
information. However, I am still concerned about the case where
images are switched off in the browser. I believe that in this case
the user sees nothing.

Does it make more sense to use an image instead of the text toucan
where I can set alt text? Does this display the alt text instead of
the images or is it also subject to text-indent -999.em?

You could possibly use a single pixel transparent GIF that has the
width 1x1 and stretch it to be the size you require (200x63) and give
this the ALT value of the text you need (eg. alt="Toucan"). Put this
img in the a. Then, apply background properties to the img (rather
than the a? not sure??). This way, when the user prefers to have
their images off, the alt of the transparent GIF img will be shown.

Now, I have not tested this, but it may just work.
.