I've seen some pretty cool stuff in CSS since looking at Prince, and I got to thinking.... I have two pngs(or tiff,whatever) for a given image: one is optimized for the web (72dpi) and the other is optimized for print (300dpi monochrome). These images might be called img001_web.png and img001_pdf.png. Is there any way I could program the CSS to add the suffix for me depending on the context? I know I can do it with visibility:hidden; etc., but I thought I might be able to do something like:

<img class="dual" src="" websrc="img001_web.png" pdfsrc="img001_pdf.png" />

and in the css something like:
@media screen img.dual { attr src= content(websrc)}
@media print img.dual {attr src= content(pdfsrc)}

Possible? Advisable?

John Clarke
Cornerstone Systems Northwest Inc.

Not sure whether it is advisable, but it is possible to do using CSS3 content property

@media screen {img.dual {content:attr(websrc,url)} }
@media print {img.dual {content:attr(pdfsrc,url)} }

Lynx, Thanks. That should do it. -John

John Clarke
Cornerstone Systems Northwest Inc.