Hello everyone, it's time to make a printed version of the site, a question has appeared. In the html code of the page, the images that are hidden outside the browser are located, when viewing the printed version of the page, all the images appear on the printed page, and occupy the entire page, thereby making 8 pages, the question is this.

Is it possible to do either, maybe through @media print { } Or via js, so that when opening the printed version of the page, some html code with images is not displayed? Thank. Here is the code

 <div class="container"> <div id="content-slider"> <div id="slider"> <div id="mask"> <ul> <li id="first" class="firstanimation"> <a href="#"> <img src="images/img_1.jpg" alt="Cougar" width="100%" height="100%"/> </a> <div class="tooltip"> <h1>Cougar</h1> </div> </li> <li id="second" class="secondanimation"> <a href="#"> <img src="images/img_2.jpg" alt="Lions" width="100%" height="100%"/> </a> <div class="tooltip"> <h1>Lions</h1> </div> </li> <li id="third" class="thirdanimation"> <a href="#"> <img src="images/img_3.jpg" alt="Snowalker" width="100%" height="100%"/> </a> <div class="tooltip"> <h1>Snowalker</h1> </div> </li> <li id="fourth" class="fourthanimation"> <a href="#"> <img src="images/img_4.jpg" alt="Howling" width="100%" height="100%"/> </a> <div class="tooltip"> <h1>Howling</h1> </div> </li> <li id="fifth" class="fifthanimation"> <a href="#"> <img src="images/img_5.jpg" alt="Sunbathing" width="100%" height="100%"/> </a> <div class="tooltip"> <h1>Sunbathing</h1> </div> </li> </ul> </div> <div class="progress-bar"></div> </div> </div> </div>

    3 answers 3

    The elements you want to hide in @media print { } assigned to display:none;

    • The fact is that the code that I dropped this css slider, and I need to, the first image of the slider is displayed on the print page, and all the others are not. - hovdev
    • Well, in this case, the solution of the problem is similar. Just hide all the other images. Moreover, as I see from the code, each <li> tag has its own id, which means they can be accessed without affecting other elements. - Vladlen Vozhzhayev September

    In the print version, set the common styles in head for img or some class of your choice with display:none or set this style for each img , for example: style=display:none

      Try setting styles like this: <link rel="stylesheet" type="text/css" href="css/print.css" media="print" />

      Example.

      index.html:

       <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>TITLE</title> <link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> </head> <body> <div class="container"> <div id="content-slider"> <div id="slider"> <div id="mask"> <ul> <li id="first" class="firstanimation"> <a href="#"> <img src="images/img_1.jpg" alt="Cougar" width="100%" height="100%"/> </a> <div class="tooltip"> <h1>Cougar</h1> </div> </li> <li id="second" class="secondanimation"> <a href="#"> <img src="images/img_2.jpg" alt="Lions" width="100%" height="100%"/> </a> <div class="tooltip"> <h1>Lions</h1> </div> </li> <li id="third" class="thirdanimation"> <a href="#"> <img src="images/img_3.jpg" alt="Snowalker" width="100%" height="100%"/> </a> <div class="tooltip"> <h1>Snowalker</h1> </div> </li> <li id="fourth" class="fourthanimation"> <a href="#"> <img src="images/img_4.jpg" alt="Howling" width="100%" height="100%"/> </a> <div class="tooltip"> <h1>Howling</h1> </div> </li> <li id="fifth" class="fifthanimation"> <a href="#"> <img src="images/img_5.jpg" alt="Sunbathing" width="100%" height="100%"/> </a> <div class="tooltip"> <h1>Sunbathing</h1> </div> </li> </ul> </div> <div class="progress-bar"></div> </div> </div> </div> </body> </html>

      css / print.css:

       @media print { img { display: none !important; } li#first img { display: block !important; } }
      • I tried, does not work, tested? - hovdev pm
      • corrected the answer. - HamSter
      • Solved the problem, thanks from above prompted, assigned to the desired image display: block; and unnecessary display: none; - hovdev
      • one
        this is img { display: none !important; } li#first img { display: block !important; } img { display: none !important; } li#first img { display: block !important; } img { display: none !important; } li#first img { display: block !important; } not it written? - HamSter
      • so, but why assign! important if you can just do with display: none?) - hovdev