[css-d] Print stylesheet/alt text
The 'problem' with your solution is that you now have duplicate content on a page and as far as I know there is no way to completely hide the span for all browsers (even text browsers) using CSS. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Print stylesheet/alt text
Shelly,
Design Groups schreef:
What I want to do is display the alt text for my images, instead of the
images themselves, in the printed page. I don't want any images to
print out at all - just the text.
Interesting problem. Have you considered image replacement? If you want
it to be pure CSS, you'd have to create a seperate class for every
image, but using Javascript you don't have to.
E.g. (CSS):
span class=image1ALT for Image 1/span
span class=image2ALT for Image 2/span
style
@media all {
.image1 { /* image replacement for Image 1 */ }
.image2 { /* image replacement for Image 2 */ }
}
@media print {
.image1 { /* undo image replacement for Image 1 */ }
.image2 { /* undo image replacement for Image 2 */ }
}
/style
E.g. (CSS + JS):
span class=image rel=image1.jpgALT for Image 1/span
span class=image rel=image2.jpgALT for Image 2/span
style
.replacedImage { /* image replacement without actual image source */ }
/style
script
/* WINDOW.ONLOAD */
// 1: get all spans with class image (using getElementsByClassName
[1])
// 2: find the image source in the rel attribute of the spans you
just found in step 1 (or in whatever other attribute you put them)
// 3: set the className of the span to replacedImage
// 4: add the image source in a style attribute to finish the image
replacement
/script
That should do the trick.
HTH,
Rick
[1]:
http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Print stylesheet/alt text
Never rely on Javascript for such specific things. Try to only use it for extra features on a website, not for essential things like image replacement. A good site should function under all circumstances. It should work even when one item of the trinity (HTML, CSS and JS, but in fact HTML is never missing) is missing. If you use image replacement, the page doesn't function anymore when JS is disabled. Instead, put the image in the source code, fetch its alt text and put that in a span using JS. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Print stylesheet/alt text
Bart Feenstra wrote: [EMAIL PROTECTED]:] The 'problem' with your solution is that you now have duplicate content on a page and as far as I know there is no way to completely hide the span for all browsers (even text browsers) using CSS. That's a disadvantage indeed. To avoid double content the alt-content can be omitted. Testpage-b is here http://home.tiscali.nl/developerscorner/css-discuss/test-no-print-images-b.htm. Then the effect is: * if styles are disabled: image and hidden image-description are both visible. * disadvantage: if styles are enabled and images disabled: image and image-description are both invisible. * if styles and images are both disabled: image not visible, image-description visible. * if visited by text-viewer: the same; see: Lynx http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fhome.tiscali.nl%2Fdeveloperscorner%2Fcss-discuss%2Ftest-no-print-images-b.htm. * if visited by text-reader: again description only once; see Fangs http://home.tiscali.nl/developerscorner/css-discuss/images/no-print-fangs.gif. So there is a choice (in what disadvantage you like the most). :-) Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Print stylesheet/alt text
Design Groups wrote:
I've seen a lot of requests (in my searches for this answer) for people
who want to display background images with CSS. It seems I want
something different, and I can't seem to find the answer to this. I'm
hoping you all can help :)
What I want to do is display the alt text for my images, instead of the
images themselves, in the printed page. I don't want any images to
print out at all - just the text. However, if I put img
{display:none;} in my print stylesheet, the images disappear - but so
does the alt text.
Is there a way to tell the print stylesheet img {display:none - but
show the alt text;}? Or will I just need to find a script or something
that'll do this for me? (I'd much rather just use CSS if I can!)
Thanks :)
~Shelly
Hi Shelly,
If you are willing to copy the alt-text and paste it in a span in the
html, just after the /img, you don't need a script.
This span can be hidden at screen, and the image can be hidden on print.
Screen and paper happy. ;-)
See testpage printed texts instead of images
http://home.tiscali.nl/developerscorner/css-discuss/test-no-print-images.htm.
Greetings,
francky
PS
I don't understand why Opera is showing the body-background (color and
img) while turned off in css at print (in FF and IE no problems here).
Maybe an Opera-specialist in the list can tell?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Print stylesheet/alt text
francky wrote: http://home.tiscali.nl/developerscorner/css-discuss/test-no-print-images.htm. PS I don't understand why Opera is showing the body-background (color and img) while turned off in css at print (in FF and IE no problems here). Maybe an Opera-specialist in the list can tell? It's an Opera8 bug without a good workaround. http://archivist.incutio.com/viewlist/css-discuss/64553 Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Print stylesheet/alt text
francky wrote: I don't understand why Opera is showing the body-background (color and img) while turned off in css at print (in FF and IE no problems here). Maybe an Opera-specialist in the list can tell? Depending on Opera version..? Older versions did print screen-style background, unless a deliberate overriding print-background were added to another element - covering body. Ingo linked to another optional fix. Opera 9 should work flawless in this respect, but I haven't checked since all my work has a fix for the old bug implemented in the print-styles. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Print stylesheet/alt text
Thanks Andrew :)
I need something more cross-browser compatible though :(
I did do something that's a bit ugly but it works great - thought I
would share in case anyone else needed the idea for future reference (or
can improve upon it!)
Basically, I created a print class in my stylesheet - in the global
stylesheet (for screen media) it's set as .print {display:none;} and
in the print stylesheet, it's set as .print { display:inline;} Above
the images (where I wanted ALT text to appear for print) I created a
small area with the alt text in it - something like so:
div id=header
img src=headerimg.jpg width=100 height=100 alt=header image alt
text here /
p class=printheader image alt text here/p
/div
So that way, when you're viewing the site through a browser, you see the
image, but the text is not displayed - but when you print, the text is
displayed and not the image.
Like I said, not the *prettiest* way around the issue, but it works.
Good thing I'm doing this on a site I'm currently working on - and not
one I've already completed or all this extra coding would be a royal PITA!
Thanks anyway, though :) I'll file your tidbit away for future reference :)
~Shelly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Print stylesheet/alt text
I've seen a lot of requests (in my searches for this answer) for people
who want to display background images with CSS. It seems I want
something different, and I can't seem to find the answer to this. I'm
hoping you all can help :)
What I want to do is display the alt text for my images, instead of the
images themselves, in the printed page. I don't want any images to
print out at all - just the text. However, if I put img
{display:none;} in my print stylesheet, the images disappear - but so
does the alt text.
Is there a way to tell the print stylesheet img {display:none - but
show the alt text;}? Or will I just need to find a script or something
that'll do this for me? (I'd much rather just use CSS if I can!)
Thanks :)
~Shelly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Print stylesheet/alt text
On Fri, 30 Jun 2006 10:38:42 +0800, Design Groups
[EMAIL PROTECTED] wrote:
What I want to do is display the alt text for my images, instead of the
images themselves, in the printed page.
The CSS way of doing that is to add something like the following to your
print styles:
img {
content: attr(alt);
/* optional, but may help alt text from being chopped off: */
width: auto !important;
height: auto !important;
}
However, AFAIK only Opera supports that. For everything else, you'll need
scripting of some sort.
HTH,
--
Andrew Gregory, URL: mailto:[EMAIL PROTECTED]
URL: http://www.scss.com.au/family/andrew/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
