Print Button in iWebiWeb Tip #24  is on how to add a print page button in iWeb.  There are times when you create a page on your website that viewers might want or need to print frequently, so this tip will help you add an easy “Print Page” button to your site.  This tip makes it quick and easy!  Simply paste the code below in an html snippet and that’s it! So here we go:

You can see a demo of both Print page button as a form button and a graphic button in action created in iWeb by clicking the button below:

View Demo »

There are two versions of the code below.  One is to use your own button, the other is to use a form button.  We’ll first start with a form button.

Print Page Form Button

The print page form button doesn’t require any extra graphics or anything, simply paste the code below in an HTML Snippet in iWeb and you’ll have a print page button.  It’s as simple as that!  Here’s the code:

<script Language="Javascript">

function printit(){

if (parent.window.print) {

parent.window.print() ;

} else {

var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';

document.body.insertAdjacentHTML('beforeEnd', WebBrowser);

WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = "";

}

}

</script>

<SCRIPT Language="Javascript">

var NS = (navigator.appName == "Netscape");

var VERSION = parseInt(navigator.appVersion);

if (VERSION > 3) {

document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()"></form>');

}

</script>


Print Page Button with your own Graphic

This one does the same thing but lets you use your own graphic for the print button.  Much better if you’re trying to match a similar style to your custom iWeb design.  It just takes a few steps:

1) First make a graphic in photoshop or whatever else to be your print button and upload it to your server (i.e. MobileMe, Your Host Server, etc).

2) Paste the code below, but replace the code in red with the URL link to your image.

<a href="javascript:parent.window.print()"><IMG SRC="http://www.mysite.com/imagefolder/mybtnimage.png"; width="127" height="31" alt="Print this page" border="0"></a>

3) Hit apply and presto!

If you don’t know how to make a button here are some free print buttons you can use for your own sites.

Download Print Buttons

Or you can find some great print icons by going here: http://findicons.com/search/print

That should be it.  If you have any questions or comments post them below.