image rollover

H

Helpful person

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?
 
H

Helpful person

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 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.- Hide quoted text -

- Show quoted text -

Thanks. I expect to have more questions on this method after I've
implemented an example myself. (I need to understand small bits at a
time before I'm wise enough to know which questions to ask.)
 
D

dorayme

Ben C said:
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.

Fair enough in one way. But in another way, it seems a bit rich to make
the consequence of a disabling of style be an disabling of a perhaps
relevant image too - which in this limited case it sort of is.

Authors might well consider putting in a normal image in the link
(something to match the image that appears as background, probably the
same one as the non-faded one used as bg).

If styles are on, it goes for a long walk off your pier too - as is
wanted.

Sort of thing I mean is at:

<http://dorayme.890m.com/alt/rollover.html>

One might or might not want to put in the word/caption.
 
B

BootNic

Fair enough in one way. But in another way, it seems a bit rich to
make the consequence of a disabling of style be an disabling of a
perhaps relevant image too - which in this limited case it sort of
is.

Authors might well consider putting in a normal image in the link
(something to match the image that appears as background, probably
the same one as the non-faded one used as bg).

If styles are on, it goes for a long walk off your pier too - as is
wanted.

Sort of thing I mean is at:

<http://dorayme.890m.com/alt/rollover.html>

One might or might not want to put in the word/caption.

What IF images are disabled or the image does not load for what ever
reason?

--
BootNic Thursday June 19, 2008 11:09 PM
You can discover what your enemy fears most by observing the means
he uses to frighten you.
*Eric Hoffer*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.9 (GNU/Linux)

iEYEARECAAYFAkhbH2AACgkQylMUzZO6jeLNtQCgjKHeQHpHr8uhFL2y0E4qOjcX
XfcAnA1gjNyRMi/0lB8iKQB3OlP/wYGq
=Td/q
-----END PGP SIGNATURE-----
 
B

Bergamot

Repositioning a background image on :hover is a good way to do
rollovers. That text-indent is not such a good idea, though.
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.

IE is not the problem. The bigger problem with this method of image
replacement is when CSS is enabled, but image loading disabled. In that
case the user sees nothing at all. It's a problem with most other image
replacement methods, as well. Better accessibility is not to use them at
all, though I've heard some JavaScript or Flash-based methods are less
harmful.

http://www.mezzoblue.com/tests/revised-image-replacement/
 
J

Jonathan N. Little

Ben said:
Maybe, although I never did when I had dialup. The images don't take
that long and browsers always display the text first so you have
something to read.

Only when idiots take mega-pixel digital camera images and then use HTML
attributes to "reduce" them in their webpages... As one frustratingly
stuck on dialup, <curse>A pox on Verizon</curse>, Flash seems to the
biggest offender. [Loading..................0%]
 
H

Helpful person

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?
 
B

Bergamot

Helpful said:
Does it make more sense to use an image instead of the text toucan
where I can set alt text?

Most likely, but since you haven't posted a URL so we can see things in
context it's just a WAG.
Does this display the alt text instead of
the images or is it also subject to text-indent -999.em?

A foreground <img> gets alt text, backgrounds do not. Drop the
text-indent rule if you use foreground images. Or use a different image
replacement (IR) method that doesn't suffer the problems associated with
text-indent.

BTW, if your desire is maintaining accessibility, IR should be avoided.
Just stick with foreground images and appropriate alt text. IR was
designed to benefit search engines more than regular visitors anyway.
 
D

dorayme

Helpful person said:
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.

If you supply a realistic case (it need not be real) where it would be
appropriate and cool to use rollovers, I will supply you with sensible
strategies to cope with your concerns.

From past experience, people do not take up offers like this, prefering
to have some fun with abstractions.

Which is ok by me. In fact, lets visit Mr. More Fun. In response to a
good objection by Bootnic to an earlier effort of mine, I notice that
the following bit of play at solving the artificial contextless problem
works on my Safari, iCab, Opera (latest) and even Mac IE 5 but not quite
on Firefox 2, I have not got FF3 yet.

See

<http://dorayme.890m.com/alt/rollover.html>

and

<http://dorayme.890m.com/alt/rollover_noSuchImages.html>

These show how you can supply text to appear if the images do not
appear. I am not claiming it is practical.
 
B

BootNic

On Tue, 24 Jun 2008 21:07:14 +1000
Helpful person said:
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.
[snip]
Which is ok by me. In fact, lets visit Mr. More Fun. In response to a
good objection by Bootnic to an earlier effort of mine, I notice that
the following bit of play at solving the artificial contextless
problem works on my Safari, iCab, Opera (latest) and even Mac IE 5
but not quite on Firefox 2, I have not got FF3 yet.

See

<http://dorayme.890m.com/alt/rollover.html>

and

<http://dorayme.890m.com/alt/rollover_noSuchImages.html>
[snip]

Just one possible way:

http://snurl.com/2o93u

Is it accessible? I do NOT know.




--
BootNic Tue Jun 24, 2008 4:47 PM
"The POP3 server service depends on the SMTP server service, which
failed to start because of the following error: The operation
completed successfully."
*Windows NT Server v3.51*


-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.9 (GNU/Linux)

iEYEARECAAYFAkhhXXYACgkQylMUzZO6jeIC8gCdE/MWU6tn8dora8jDn0HgGfyK
97QAoKnESDs9lgU0rcXofP3tFs2MVeMF
=T3L1
-----END PGP SIGNATURE-----
 
B

BootNic

On Wed, 25 Jun 2008 09:09:44 +1000
I get

<http://www.000webhost.com/admin-review>

with your url. You are having trouble with "Tiny-type" urls (you
mentioned the problem before and it seems that snurl too is finding
an obstacle).

Well is that nice, only works in the browser I requested it in, and only for the session lol so I guess something has changed.

http://bootnic.net46.net/ImageHover.php




--
BootNic Tue Jun 24, 2008 7:37 PM
Our earth is degenerate in these latter days; bribery and corruption
are common; children no longer obey their parents; and the end of the
world is evidently approaching.
*Assyrian clay tablet 2800 B.C.*


-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.9 (GNU/Linux)

iEYEARECAAYFAkhhhTwACgkQylMUzZO6jeJv7ACfVCEGqe27Dhe/6NkkQqT5QtoP
gkgAoLgarvekinhTCZKYvF9GO5ny3WkD
=4ibq
-----END PGP SIGNATURE-----
 
D

Disco Octopus

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.
 
B

BootNic

On Tue, 24 Jun 2008 19:37:27 -0400
<[email protected]>

[snip]
Well is that nice, only works in the browser I requested it in, and
only for the session lol so I guess something has changed.

http://bootnic.net46.net/ImageHover.php

I should have read the link instead of thinking the redirect was broken.

You see this page, because the system administrator of 000webhost.com
is currently checking this website for malicious content. This redirect
will be removed once we will finish manually checking all files on this
account. As far we check over 100 websites, it can take about 2-4 hours
to complete. If you are the owner of this website, you will get email
confirmation once it's done. If you are a visitor - please come back
later.


--
BootNic Tue Jun 24, 2008 7:44 PM
Thirty-five is when you finally get your head together and your body
starts falling apart.
*Caryn Leschen*


-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.9 (GNU/Linux)

iEYEARECAAYFAkhhhv0ACgkQylMUzZO6jeKsmACguNa4f7SKh7z6GnIXGnTzNZZi
8foAn3wacaAGyvuzkBMhfA28rrBp0mHR
=4nnz
-----END PGP SIGNATURE-----
 
B

BootNic

On Wed, 25 Jun 2008 09:09:44 +1000
[snip]
Is it accessible? I do NOT know.

I get [snip]
with your url. You are having trouble with "Tiny-type" urls (you
mentioned the problem before and it seems that snurl too is finding an
obstacle).

Well that's enough of that host.

http://tinyurl.com/6l7zbt




--
BootNic Tue Jun 24, 2008 8:37 PM
You can turn painful situations around through laughter. If you can
find humor in anything - even poverty - you can survive it.
*Bill Cosby*


-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.9 (GNU/Linux)

iEYEARECAAYFAkhhkzYACgkQylMUzZO6jeLuQQCgqoBxPHYP/00rRmC1EivlG8Eb
sssAn06dMDU42qbqCa1YbA3b5c7JCTS3
=Ap8Q
-----END PGP SIGNATURE-----
 
D

dorayme

BootNic said:
Well that's enough of that host.

http://tinyurl.com/6l7zbt

Nice, within limits! Until one enlarges the text when the "google
search" text comes out like a number of coalescing bears from a den.

I notice on cursory test that changing your

div.img-hover {
...
position: relative;

to

div.img-hover {
...
float: left;

with a mind to a useful thumbnail application, seems to work too. With
the same limitation as above.
 
D

dorayme

dorayme said:
Nice, within limits! Until one enlarges the text when the "google
search" text comes out like a number of coalescing bears from a den.

I should add that my

<http://dorayme.890m.com/alt/rollover.html>

suffers the same fault. Plus mine has the minor blemish of not working
in one of the best browsers around, FF. <g>

I am telling the OP again. In a real context there are vays and means of
avoiding all this trouble.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top