Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Images, ALT text, and printer stylesheets, oh my!

    Hey all.

    I'm working on my birthday/christmas 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, LIR, aFIR, 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

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this - I'm typing off the top of my head, but I think it's right:
    Code:
    img { display:none; }
    img:after { display:inline; content:attr(alt); }
    Last edited by brothercake; 09-24-2004 at 11:25 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!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.

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by hemebond
    Code:
    <!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...

  • #7
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by hemebond
    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...

    //does some quick tests.

    Weird... This works in Mozilla:
    Code:
    a:after {
    content:".."attr(href);
    colour:#666;
    font-family:"Courier New", Courier, mono;
    }
    But this doesn't
    Code:
    img:after {
    content:attr(alt);
    }
    Why would they allow it on <a> but not <img>??
    Last edited by mindlessLemming; 09-25-2004 at 01:20 AM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    because they're out to get you mindless
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by mindlessLemming
    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.

  • #10
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..
    Last edited by ]|V|[agnus; 09-25-2004 at 09:40 AM.

  • #11
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #12
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    --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!)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •