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.