Forum Moderators: not2easy
I use the word "theoretically" because, at least in my experience, the :active state doesn't seem to work reliably across browsers. To really get three different images to swap appropriately, I've found it necessary to use JavaScript.
Use one image for all three states (three images on top of eahc other) and jsut shift the image up and down. Preloading built in and fewer images to messa round with.
SN
Background images obviously don't load on browsers with images off - and don't offer alt text. And (to the best of my knowledge) they don't print.
If the image is important , this might be a consideration.
In other words, while it's true background images have no alt attribute, it isn't necessary, since an unstyled browser or screen reader will simply display/read the text contained in the button itself.
In such cases, the viewer will have no idea that stuff is missing.
Before IE's latest "feature" rolled out and scared everyone off javascript I had a site which used javascript and CSS in combination to do amongst other things give me navigation that had 4 button states ..
link = not yet been clicked
hover = hover
veiwed = been there done that
selected = ( highlighted button = "page where we are now" )
Now due to the number of people dropping IE's javascript facility like they picked up a cobra in the fruit aisle at the mall ...I would like to do this all in CSS ..But I can only get the first 3 states ...there seems to be no way to have the current page link "highlighted" in a different way from the others ( wether it has been clicked or not I would like the current page link status to be different ..you follow?)...
Previously my CSS was dependant on page <body> ID built into the javascript ...
I dont want to use images for the button states via cell background ( which I had before as ... I need to reduce the download time ) if I can avoid it ..even tho each gif was gotten down to only 1ko...( 4ko in all )
Here is a sample of what I had ( yes I know it doesnt "validate" but it works with my javascript (which doesnt "just" do what javascript is meant to ) in IE5 and up )..it shows you how it worked
...now without the javascript to do my page ID's ..I'm apparently a "state" short ..or maybe just tired and can't see it ...any ideas how to acheive what I had with this ..
CSS starts here ...
.None
{
DISPLAY: none;
}
.Unhilited
{
ALIGN: middle;
BORDER: #306050 1px solid;
CURSOR: hand;
}
.Hilited
{
ALIGN: middle;
BORDER: #609080 1px solid;
CURSOR: hand;
}
.Unhilited_Ld
{
ALIGN: middle;
BORDER: #808040 1px solid;
CURSOR: hand;
}
.Hilited_Ld
{
ALIGN: middle;
BORDER: #b0b070 1px solid;
CURSOR: hand;
}
.Selected
{
ALIGN: middle;
BORDER: #ffffff 1px solid;
CURSOR: default;
}
.Btn_On
{
HEIGHT: 25;
WIDTH: 100;
BORDER: 0px solid;
BACKGROUND: url('********/_Btn_On.gif');
}
.Btn_Off
{
HEIGHT: 25;
WIDTH: 100;
BORDER: 0px solid;
BACKGROUND: url('*********/_Btn_Off.gif');
}
.Btn_Hil
{
HEIGHT: 25;
WIDTH: 100;
BORDER: 0px solid;
BACKGROUND: url('*********/_Btn_Hil.gif');
}
.Btn_On
{
HEIGHT: 25;
WIDTH: 100;
BORDER: 0px solid;
BACKGROUND: url('*********/_Btn_On.gif');
}
.Btn_Off
{
HEIGHT: 25;
WIDTH: 100;
BORDER: 0px solid;
BACKGROUND: url('*********/_Btn_Off.gif');
}
.Btn_Hil
{
HEIGHT: 25;
WIDTH: 100;
BORDER: 0px solid;
BACKGROUND: url('*********/_Btn_Hil.gif');
}
CSS ends here ..BTW ...I've "widgetized" ( **** ) the urls to avoid giving 2 many pointers to the site ....
The "js" I dont think I can post as most systems consider it to be a hack and the boards here might disrupt if I place it ...
I'd like to be able to acheive the "selected" state with a more classical CSS sheet ...
Musings appreciated ...;)
"Mes Excuses" for the page space but I couldn't "wrap it"
In such cases, the viewer will have no idea that stuff is missing.
I figure if a user has images turned off in their browser (or is using a device that does not display them) there is an assumption on the USERS part that they will be missing out on some aspects of a sights appearance. If they don't assume that, then they'd better start, because I have yet to see a page that isn't missing something when the images are...well, MISSING.
Using css rollovers, a user with images off will not see the buttons, but they wouldn't see them if you used JS rollovers either, or ANY kind of button for that matter, since all buttons (save form input buttons) are images. The nice thing about a css button, though, is that even with images off the text (with the link) is still there. It maynot look pretty, but the navigation system is still present.
Leosghost;
To set a "current page" button, you can create a descendant selector id in your stylesheet (#current) that mimics the styles in your :hover rule dec. Then, on each page, add the id="whatever" to the appropriate link.
I don't know of any way to automate this process without JS on the client-side (which you've already reviewed the problems of) or PHP on the server-side. There's an article on A List Apart about doing it with PHP you might want to check out.
Having made the point, I'll turn off the email notify and bow out of this thread.
>a user has images turned off in their browser (or is using a device that does not display them) there is an assumption on the USERS part that they will be missing out ...
Absolutely. Agreed. And it's still good practice to not unreasonably impair by having essential elements as images only.
>Using css rollovers, a user with images off will not see the buttons, but they wouldn't see them if you used JS rollovers either.
With CSS background swaps, they won't see images nor any alt text.
With js swaps, the alt text is visible.
Perhaps it would be best to just let the issue die here, but I feel compelled (as, I suppose, you did) to make one last point, lest someone unfamiliar with css rollovers, images and alt tags get the wrong impression about these items.
The point that substituting an image for a text link requires that image to have an ALT attribute is entirely valid. It must. If you use an image to deliver any information in your site (including link names) there must be a text-only way for image-disabled browsers, or sight disabled-users (using screen readers) to know what information the image was delivering.
If you were to use an image as a button, in which the button text was PART OF THE IMAGE, you could not use such a button for a CSS rollover and still maintain accessibility. WHy? Because, as gulliver said, background images do not have an ALT attribute, so there would be no text substitute for the image.
However, most CSS rollover menus do not use images where the button text is part of theimage. Rather, the image comprises merely the appearance of the button (colors, bevels, etc) and the TEXT of the button is actually the link text (contained between <a> and </a>) IN THE HTML SOURCE CODE.
This being the case, there is no need for an ALT attribute on these images (which they cannot have anyway), since the text itself is the text version for users who need it.
Nuff said.
An alternative that's used by some is to have a normal 'in page' (not background) image and use css to swap the background color.
This needs careful color choice for anti-aliasing, and with a word either the background or the word itself can change color.
i wonder if it's possible to create 3 states through CSS. so far, i've only sucessfully create 2 states, mouseover (creating a hover effect) and mouseout (original state). the real problem lies in IE, as they don't support it. even with a htc hack by Peter [xs4all.nl] didn't quite do the trick.
oh well. i hope CSS3 brings in more flexibility than now. :D
