title: Print function not to print the whole page using jquery and css
body: <p>Currently I have a web application that contains a lot of div , menu and many others layout staff. However, What I would like to have when the user click print is only two image or one image in some case. Assume I have already get the two image url, how to remove the css of entire page and perform the print as i expected ?  Here is some code I tried , it seems it will change the whole page from the web app layout to only 2 image? Can I prevent that? thanks:</p>
  
  <p><strong>print.css</strong></p>
  
  <pre><code>&lt;style type="text/css" media="print"&gt;
      .img{
          padding:5%;
          height:100%;
          width:40%;
      }
      #img1{
          left:0px;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>$("#printBtn").click(function() {
      $("link[media='screen']").attr("href", "print.css");
      window.print();
  });
  </code></pre>
  
  <p><strong>Updated:</strong></p>
  
  <p>To be more precise, what i will do is to get the image number(s) of the current page , and only this two image will be printed. How to perform such function?</p>
  
  <p>Assuming I get the id of the two img already. First of all, I need to add the class = 'img' dynamically in this two item ? What is the next step untill the print finish ?  thanks</p>
  
  <pre><code>&lt;img id="img_34" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book"&gt;
  &lt;img id="img_35" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book"&gt;
  </code></pre>