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



Relevant Pages

  • Re: SeO help!
    ... Use the attributes [alt] and for the images that are the menu in the horizontal bar in the top of the page. ... If we are talking strictly Google SEO here then yes to the alt ... this is also what people 'see' if they're using an aural or braille browser or a screen reader. ...
    (alt.internet.search-engines)
  • Re: required attribute "ALT" not specified .
    ... They need different alt texts of course, since they contain contain different texts in image format or otherwise different symbols. ... since it was not handled when the images were created. ... But the real culprit is the use of images for linking. ...
    (alt.html)
  • Re: why a different tag for SVG images?
    ... |>|>So we have 2 tags and one allows alt content. ... |>changed by tags being present or absent. ... things like images should not be done in HTML tags at all. ... | decorative, they should be inserted as generated content by CSS, then ...
    (comp.infosystems.www.authoring.html)
  • Using ALT And TITLE Attributes
    ... One way to do this is to use ALT and TITLE ... all) in the major browsers and instead of the image in text-based ... ALT is a required element for images and can only ... Primer and find out if you've used your keywords too little - or too ...
    (alt.html)
  • Re: SeO help!
    ... If we are talking strictly Google SEO here then yes to the alt ... Images that are not part of the content are preferably given an empty ... You could try Opera for simulating a text browser too, ...
    (alt.internet.search-engines)