...

View Full Version : Images, ALT text, and printer stylesheets, oh my!



Skyzyx
09-24-2004, 11:13 PM
Hey all.

I'm working on my birthday/christmas wishlist (http://www.skyzyx.com/wishlist/) on my site, and I wanted to know if someone could help me.

Currently, I'm displaying (via media="screen") several lists that are positioned nicely on the screen, no problem. I'm wanting to alter the media="print" CSS to be more appropriate for the printer medium. Specifically what I'm wanting to do is see if there is a way to hide the images themselves, while still displaying their ALT attribute values.

Now, I could probably go back and use FIR (http://www.stopdesign.com/articles/replace_text/), LIR (http://www.kryogenix.org/code/browser/lir/), aFIR (http://phark.typepad.com/phark/2003/08/accessible_imag.html), or some other image replacement technique for the screen, while leaving the text to the printer, but I'd have to re-code everything, and that would suck.

Does anyone know a CSS method for hiding images but displaying the ALT text?

Thanks

Antoniohawk
09-25-2004, 12:15 AM
For the life of me, I can't think of a way to do this with css. I'm thinking that you're gonna have to go the route of javascript or php for this one. I'll give it some more thought and get back to ya, but I have my doubts.

brothercake
09-25-2004, 12:20 AM
Try this - I'm typing off the top of my head, but I think it's right:


img { display:none; }
img:after { display:inline; content:attr(alt); }

hemebond
09-25-2004, 12:29 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Alt Text</title>
<style type="text/css">
img {
content:attr(alt);
}
</style>
</head>
<body>
<p>
<img src="/images/1.jpeg" alt="alt_text">
</p>
</body>
</html>CSS3 method only supported my Opera. Mozilla doesn't even support :after on images.

Skyzyx
09-25-2004, 12:40 AM
Yeah, I was noticing that it didn't work in the latest Safari or the latest Firefox nightly on OSX. I appreciate the ideas though. Anyone else have anything?

gsnedders
09-25-2004, 01:36 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Alt Text</title>
<style type="text/css">
img {
content:attr(alt);
}
</style>
</head>
<body>
<p>
<img src="/images/1.jpeg" alt="alt_text">
</p>
</body>
</html>CSS3 method only supported my Opera. Mozilla doesn't even support :after on images.

CSS3 is still a working draft, so the Gecko engine doesn't support it...

mindlessLemming
09-25-2004, 02:11 AM
CSS3 method only supported my Opera. Mozilla doesn't even support :after on images.

That's not true. I had :after on <img> working fine in Mozilla for an example of 'hot thumbnails' in a thread a while ago... Maybe Seth still has a copy of that example?

I use generated content in my print stylesheet and it works fine... :confused:

//does some quick tests.

Weird... This works in Mozilla:


a:after {
content:".."attr(href);
colour:#666;
font-family:"Courier New", Courier, mono;
}


But this doesn't

img:after {
content:attr(alt);
}

Why would they allow it on <a> but not <img>??

canadianjameson
09-25-2004, 03:53 AM
because they're out to get you mindless :D

hemebond
09-25-2004, 04:16 AM
Why would they allow it on <a> but not <img>??Because, believe it or not, the :after and :before content is actually inserted inside the element, as child elements, before or after any existing child elements. The image element is empty, it can't have any child elements. It's the same with any empty element.

]|V|[agnus
09-25-2004, 10:37 AM
Indeed, hemebond, good point. That's a bummer, because that's the first thing that came to my mind as well.

JS perhaps?

And Andrew... I didn't save everybody's examples! I had intended to make a comprehensive page of all the methods in that thread, but never finished that thought. Is the thread dead??

P.S. You sure want a lot of stuff, Skyz..

Skyzyx
09-26-2004, 08:30 PM
Apparently!

One of the reasons that CSS3 has been developed in modules is so that browser makers can implement the module without having to wait for the entire spec to be completed.

Unfortunately, it appears that Mozilla (at least) is waiting for the spec to be done. :(

Does anyone have any other non-image-replacement suggestions?

gohankid77
09-26-2004, 09:12 PM
--CSS--
a:hover img {
display: none;
}

a span {
display: none;
}

a:hover span {
display: inline;
}

--HTML--
<a href=""><img src="" alt=""><span>Alt text</span></a>


Untested, and I'm very unsure about this. What have you got to lose? (only test it on one section so you don't break your page!)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum