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:

**print.css**

```
<style type="text/css" media="print">
    .img{
        padding:5%;
        height:100%;
        width:40%;
    }
    #img1{
        left:0px;
    }
</style>

```

**js**

```
$("#printBtn").click(function() {
    $("link[media='screen']").attr("href", "print.css");
    window.print();
});

```

**Updated:**

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?

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

```
<img id="img_34" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
<img id="img_35" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">

```