How to: text invisible but image with hotlink visible with CSS?

HTML & CSS
1

Hello,

I want to make text invisible but the image with the hotlink visible in the div.

  • I want to keep the text for usability without css
  • I have tried indenting the text -999 but that also indents the image

Do I just indent the text a little just so the image shows? Seems a fiddly way to do it.

Basically, I want a nav bar with images linked to the pages instead of boring text.

There must be a better way – please help.

Thanks! Magda

2

Hi,

If the images are non transparent then a more accessible way is to place the images on top of the text to hide them. That means that if css is turned off or images are turned off then you still get the text unlike the text-indent method that fails if css is on and images are off and you get a blank screen.

Here is an example. (and here is a [URL=“http://www.pmob.co.uk/temp/sculleynav.htm”]real example from a question posed in the forums yesterday)

3

HI,

I can help you,
if you are building nav bar you should use list with links. Basically what you have done with text indent will help you now. You need to create list of items for nav bar, Each list item will contain link. Link will have background with image so you can create rollover with css that works in every browser and you can hide your text.

Example:

<ul class="menu">
 <li><a href="#" class="one">One</a></li>
 <li><a href="#" class="two">Two</a></li>
 <li><a href="#" class="three">Three</a></li>
</ul>

css:


a.one
{
 display: block;
 text-indent: -99999px;
 background: url(/location__of_image/) no-repeat 0px 0px scroll transparent;
}
a.one:HOVER
{
 background: url(/location__of_image/) no-repeat 0px 30px scroll transparent;
}

that is it.