phototaker
Technical User
I want to place a button on a page and when it is clicked a picture on that page is printed without anything else on that page being printed. Any help would be apperciated. Thanks Richard ![[poke]](/data/assets/smilies/poke.gif "[poke] [poke]")
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Print picture code
- Thread starter phototaker
- Start date
- Status
dwarfthrower
Programmer
Two ways of going about it.
1) Javascript:
Open up a new window with the URL being just that of the image you want to print. Call the new window's print() method.
2) CSS:
Set the print display attributes for everything on the page - except the image you want printed - to display:none
2.a) As per 2, but dynamically using Javascript when you press the button, so that users can still print out the whole page if they wanted to.
1) Javascript:
Open up a new window with the URL being just that of the image you want to print. Call the new window's print() method.
2) CSS:
Set the print display attributes for everything on the page - except the image you want printed - to display:none
2.a) As per 2, but dynamically using Javascript when you press the button, so that users can still print out the whole page if they wanted to.
The CSS method (above) is probably the best way, but another way is available if you like to use frames. Most browsers support frames now. In the end, this is like dwarfthrower's method 1, but done invisibly.
If your web page is currently myPage.html, you can change the pointer to myPageFrame.html. This new page might be like this:
Then, back in your myPage.html, do something like the following:
To see what the code is doing, change the ROWS in the frameset to be '50%,50%' and you will see the picture appear in the otherwise-invisible frame.
--Dave
If your web page is currently myPage.html, you can change the pointer to myPageFrame.html. This new page might be like this:
Code:
<HTML>
<FRAMESET ROWS='100%,0%' COLS='100%'>
<FRAME SRC='myPage.html'>
<FRAME SRC='' NAME=INVISIBLE_FRAME>
</FRAMESET>
</HTML>Then, back in your myPage.html, do something like the following:
Code:
<HTML>
<HEAD>
<SCRIPT>
function printPic(pic)
{
frameForPic = parent.INVISIBLE_FRAME.document;
frameForPic.open('text/html','replace');
frameForPic.write("<HTML><BODY onLoad='window.print()'><IMG SRC='"+pic+"'></BODY></HTML>");
frameForPic.close();
}
</SCRIPT>
</HEAD>
<BODY>
<H1>LOOK AT MY PIC!</H1>
<IMG SRC='testPic.jpg' ONCLICK=printPic(this.SRC)>
</BODY>
</HTML>To see what the code is doing, change the ROWS in the frameset to be '50%,50%' and you will see the picture appear in the otherwise-invisible frame.
--Dave
NOTE: Oops! You need to place focus on the invisible frame or else the parent frame will print.
Use the following line of code in place of the counterpart above:
--Dave
Use the following line of code in place of the counterpart above:
Code:
frameForPic.write("<HTML><BODY onLoad='this.focus();window.print()'><IMG SRC='"+pic+"'></BODY></HTML>");--Dave
- Thread starter
- #5
phototaker
Technical User
I DO NOT WANT TO DO FRAMES BUT CAN'T FIND "PRINT DISPLAY ATTRIBUTES" IN THE css ![[atom]](/data/assets/smilies/atom.gif "[atom] [atom]")
dwarfthrower
Programmer
Ahem... Typing in all caps is rarely the best way to get what you want. Especially since it's before 8am on a Monday morning here.
- Thread starter
- #7
phototaker
Technical User
Sorry, for the CAPS, nothing intended. I checked our the link and found this.
Google
Error
Not Found
The requested URL /search?num=100&hl=en&ie=UTF-8&oe=UTF-8&q=CSS+Print+Display+Attributes&meta was not found on this server.
Thanks for any info.
Richard![[3eyes]](/data/assets/smilies/3eyes.gif "[3eyes] [3eyes]")
Error
Not Found
The requested URL /search?num=100&hl=en&ie=UTF-8&oe=UTF-8&q=CSS+Print+Display+Attributes&meta was not found on this server.
Thanks for any info.
Richard
How about this...
Put this in the HEAD:
<link href="image.jpg" media="print" rel="alternate" type="text/css">
Put this on the page:
<input type="button" onclick="window.print()" value="Print">
Works if they choose File > Print too.
Adam
Put this in the HEAD:
<link href="image.jpg" media="print" rel="alternate" type="text/css">
Put this on the page:
<input type="button" onclick="window.print()" value="Print">
Works if they choose File > Print too.
Adam
- Status
Similar threads
- Locked
- Question