WEB STANDARDS CREATIVITY

For the purposes of building on the proof-of-concept stage and doing a like-for-like translation, I am going to show how you
do this using a combination of CSS background images and real text, rather than using img elements.
Important: The downside of this approach, I should warn you, is that when (or if) you scale text up on the page, the background
image for the button will not scale accordingly, and text may break out of the button area, as shown in Figure 8-11.
Writing out an img element gets around that problem, but I’ll leave that to you to experiment with (it’s really not a stretch
to adapt the script to do this, honest!).
Styling the print links
Figure 8-11. The effect of scaling up to maximum size in Internet
Explorer when text sits on top of a button
Regardless of the approach taken for the links, you’ll need to apply some CSS. In the proof of concept, I used a paragraph,
which contained the two links. This can be used to include a background image (the gray section in the images in
Figure 8-10 that includes a printer), while the links themselves need the backgrounds. Figure 8-12 shows the constituent
parts.
Figure 8-12. The background image and button used to style the print links
Before looking at the CSS, just to recap: the HTML for these buttons (once generated via the JavaScript and inserted into the
DOM) is exactly as per the proof of concept. The bold markup shown here is the part that will be dynamically generated:
print this section
print whole page
chapter 8 Print Magic: Using the DOM and CSS to Save the Planet
203