...

View Full Version : CSS Rollovers & Alt Tags w/ background-image



pinkshiro
01-22-2008, 12:43 AM
I have recently managed to avoid using javascript for navigation rollovers by using the simple method of making the on/out states one joined image, and using css code like this:


div#navigation ul li div {
display:block;
background-position:bottom;
}
div#navigation ul li div a {
display:block;
overflow:hidden;
background-position:top;
}
div#navigation ul li div a:hover {
background-image:none;
}
div.navbg-home, div.navbg-home a {
background-image:url(images/nav1.gif);
width:72px;
height:27px;
}

So both the a tag and it's containing div has the same image set as their background-image, just set at different positions - and when the a tag is rolled over, it's background-image is changed to none, revealing the "on" state situated on the div below.

Works a treat.

But how do I get the alt attribute into this equasion, since my html looks like this:


<div class="navbg-home"><a href="index.html" title="Home"></a></div>

There's nothing to put the alt tag on here, as all the imagery is handled via css. I'm not to worried about SEO as I have text links sitting on the bottom of the page, but I do want some text to appear if a user have show images turned off on their browsers.

So, any ideas how I would incorporate the alt attribute here?

abduraooft
01-22-2008, 07:18 AM
Why do you need an alt there?

<a href="index.html" title="Home">Your link text here</a>

Majoracle
01-22-2008, 08:15 AM
They explained why...just in case the visitor has images or CSS disabled.

Unfortunately, there is no way to add alternative (alt) text. The only way you could do it is by inserting it inside the anchor like:


<div class="navbg-home"><a href="index.html" title="Home">Home</a></div>

But of course that would show over the background image. There's a way to fix it for people that have CSS disabled, but this wont work if they just have images disabled:


div.navbg-home a span {
display: none;
}

<div class="navbg-home"><a href="index.html" title="Home"><span>Home</span></a></div>

I don't have a solution for people that have images disabled. To be honest, the way you have it set up, I don't think there is one.

sobrien79
01-22-2008, 02:04 PM
There is no need to even have alt text if you are using this method. The "alt" text is the text in the A tag. Just make sure when you put text in there and replace with images, you give your A tag this style:



text-indent: -9999px;

VIPStephan
01-22-2008, 03:52 PM
There is no need to even have alt text if you are using this method. The "alt" text is the text in the A tag. Just make sure when you put text in there and replace with images, you give your A tag this style:



text-indent: -9999px;

You should read the question(s) properly before replying as the OP wants text to show up when images are disabled (that includes background images) and this questions has been answered before with a result that yours canít satisfy either.

However, pinkshiro, you are really encouraged to put text into your links as having empty elements is semantically questionable (i.e. thereís nothing to see/click on if styles in general are disabled). Also, there are numerous CSS image replacement methods compared on http://www.mezzoblue.com/tests/revised-image-replacement/ which arenít directly tested on links (I know some wonít work in IE) but you might find one that satisfies you.
However, none of them is 100% satisfying in one or another way, you always have to make compromises.

sobrien79
01-22-2008, 08:37 PM
my mistake...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum