CSS/HTML/Javascript tricks to print a web page without images

I'm trying to put a print button on开发者_如何学C a web page that will print the page's contents except images. Any ideas?

You can use CSS to disable all images on your website only when printing.

@media print {
  img {
    display: none !important;
  }

  * {
    background-image: none !important;
  }
}

No need to use a button, unless you want to give people the option to print images or no images.

If you just want people to print without images (which is preferred most of the time), you can just use a print stylesheet.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Then add

img {display: none;}

You need a print style sheet. There are two options for that:

1. Reference a separate stylesheet with the following code: <link rel="stylesheet" type="text/css" href="printstylesheet.css" media="print"/>

   In that stylesheet, put the following:

   img {
       display: none;
   }
   

2. Put the following in your main stylesheet:

   @media print {
       img {
         display: none;
   }
   

You could use a stylesheet for print media and make a rule like below..

img { visibility:hidden; }

...

<link rel="stylesheet" type="text/css" href="myprintstyles.css" media="print">

You could also use display:none as the image rule but this will not preserve the spacing and could completely change the layout of the printed page.