Printing a single image
Some time ago I got the question whether it was possible to provide a way to print a single image that was a part of the webpage. The rest of the contents of the page should not be printed, only the image. Of course a visitor can manually display the image in a separate window, or download it first, but there’s a more user friendly way, which I’ll explain in this article.
<iframe frameborder="0" marginwidth="0" marginheight="0" id="printFrame" name="printFrame" style="position:absolute;top:-900px;"></iframe>
Notice the id as well as the name attribute display the value "printFrame" for cross-browser compatibility.
Next, let’s display the actual image:
<img src="epcot.jpg" id="image1" alt="Epcot at night, by Martijn Reemst" width="300" height="400"/>
This image has a unique id "image1". We’ll need this later on.
That’s it! Try it below, and feel free to use it on your own site.
Epcot at night – Print this image