Web Analytics Made Easy -
StatCounter Printing "only" the pic? - CodingForum

Announcement

Collapse
No announcement yet.

Printing "only" the pic?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Printing "only" the pic?

    Hi guys... I seen something on a web page & I was wondering if there was ny simple way to go about doing it that anyone knows?

    I seen this page that had like a photo gallery & under each of their pics they had a "Print Picture" link which if clicked would open the printer function in your browser & when you printed it would only print the picture & not the whole page.

    Any info on how to do something like this would be appreciated!

    Thanks!

  • #2
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function PrintPic(id){
     c=document.getElementById('Content').style;
     s=document.getElementById(id)
     t=document.getElementById('PrintPic')
     t.src=s.src;
     t.width=s.offsetWidth;
     t.height=s.offsetHeight;
     c.display='none';
     window.print();
     t.width=0;
     t.height=0;
     c.display='block';
    
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    <div id=Content >
    Put all your 'not to print' content in this div<br />
    <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"  /><br />
    <input type="button" value="PrintMe" onclick="PrintPic('Img1');"><br />
    <img id="Img2"  src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif"  /><br />
    <input type="button" value="PrintMe" onclick="PrintPic('Img2');"><br />
    </div>
    <img id="PrintPic" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="0" height="0" />
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

    Comment


    • #3
      Thank you! I'll give that a try!

      Comment


      • #4
        This may give you other idea.

        http://wsabstract.com/dhtmltutors/cssmedia2.shtml
        Glenn
        vBulletin Mods That Rock!

        Comment


        • #5
          Trouble with formatting web pages for printing ...

          Hi,

          I found the previous posts in a search, which has given me some ideas.

          However, what I would like to do is to extend this reasoning to have a page display in one way and print in another.

          What I did was to logically extend the tutorial at http://wsabstract.com/dhtmltutors/cssmedia2.shtml to try to include those styles that I wanted to change. It only half works! All that seems to happen is:

          1. Anything which I give the "not-printable" id to doesn't print (this is what I wanted!).

          2. Where I have specified alternative styles for things within "@media print { ... }", the print-preview seems to merrily ignore the print style and print as if no print style was specified! (i.e. the div still prints with a border, whereas the print style specifies that it should print with no border - see code example below).

          I would like to be able to specify alternative printable styles for individual styles because I only want to change a couple of the styles on my page, and I don't want to be faffing around with javascript! Being able to simply give a tag a particular style, and then to have the printable version of that style effectively "hidden" inside the style sheet would be very neat.

          Here is an example of what I am trying to do:

          In the style sheet:
          Code:
          @media print {
            #not-printable {
              display:none;
            }
          
            DIV.page-area {  //This seems to be ignored
              border:none;
              background:0xFFFFFF;
              color:0x000000;
              height:28cm;width:20cm;  //fits nicely onto A4 (If I can get it to work!)
            }
          
            DIV.page-item {  //And this also seems to be ignored.
              border:none;
              background:0xFFFFFF;
              color:0x000000;
            }
          }
          
          //How the tags should appear on screen (prettiness is not important for this example - its just an example).
            DIV.page-area {
              border:solid;
              border-width:2px;
              background:url(http://www.???.com/???.gif);
              color:0x00CCFF;
              margin:0 auto;
            }
          
            DIV.page-item {
              border:solid;
              border-width:1px;
              background:#FFFFFE;
              margin:5%;
            }
          In the HTML:
          Code:
          <img id="not-printable" src="http://www.???.com/???.gif">  //This doesn't print - exactly what I wanted. :)
          
          <div class="page-area">
            <div class="page-item">
               Rhubarb rhubarb rhubarb
            </div>
          
            <div class="page-item">
               Rhubarb rhubarb rhubarb
            </div>
          </div>
          Last edited by mlse; Aug 5, 2005, 06:47 AM. Reason: Pressed Enter by mistake
          Die Welt ist ein Irrenhaus und hier ist die Zentrale!

          Comment


          • #6
            Are the comments really there in the CSS when you were testing the print preview or you just put them when you posted the code? The CSS comments should be /* */ and not //
            Glenn
            vBulletin Mods That Rock!

            Comment


            • #7
              Sorry!

              The "//" comments are just there to illustrate the example; they're not there in the real code.
              Die Welt ist ein Irrenhaus und hier ist die Zentrale!

              Comment


              • #8
                You should define the other with screen media.
                Code:
                <style>
                @media print {
                  #not-printable {
                    display:none;
                  }
                
                  DIV.page-area {  
                    border:none;
                    background:0xFFFFFF;
                    color:0x000000;
                    height:28cm;width:20cm; 
                  }
                
                  DIV.page-item {  
                    border:none;
                    background:0xFFFFFF;
                    color:0x000000;
                  }
                }
                
                [COLOR=Red]@media screen {[/COLOR]
                  DIV.page-area {
                    border:solid;
                    border-width:2px;
                    background:url(http://www.???.com/???.gif);
                    color:0x00CCFF;
                    margin:0 auto;
                  }
                
                  DIV.page-item {
                    border:solid;
                    border-width:1px;
                    background:#FFFFFE;
                    margin:5%;
                  }
                [COLOR=Red]}[/COLOR]
                </style>
                Glenn
                vBulletin Mods That Rock!

                Comment


                • #9
                  Thanks! I'll try that ...
                  Die Welt ist ein Irrenhaus und hier ist die Zentrale!

                  Comment

                  Working...
                  X