Use styles to hide graphics online, but display in print

See About this website for notes about tips and links provided.

Date created: ~2005

Many thanks to Rob Cavicchio, a member of the HATT list, for sharing this tip.

"You can very easily use [styles] to completely hide the screen shots online, then have them magically appear when the user prints the Help topic." Here's how:

<html>
  <head>
    <style media="screen" type="text/css">
       img.screenshot { display: none; }
    </style>
  </head>
  <body>
    <p>Choose File > Open.</p>
    <p><img class="screenshot" src="open.gif" /></p>
  </body>
</html>

In this example, the open.gif image will not be displayed on screen, but when you print the topic the image will be printed.