Click to See Complete Forum and Search --> : Click image link on one page to print another page?


RMIGHTY1
06-02-2006, 07:51 AM
Am adding directions to home on website with map. I need printer image on web page #1 with big map to onclick print the "printer friendly" web page #2 containing the smaller map image. What is code to do so?

I am NOT a professional but a hobbyist, so, please be gentle. I do know some basic HTML (with help from reference books). :eek:

I want to display the accurate page #1 (link below) and use an icon of a printer on page #1 to print web page #2 containing the same map but without the page borders (a clean map version).

My second reason for having to do it this way is because the printed page is NOT a WYSIWYG of the page displayed on the monitor. An image component shifts (a red square image outlining the target area near my home) when printing the map page. So I need to use two (2) separate and different map pages, one that will look accurate on the monitor and the other that will print out accurately (but does not appear accurately on the monitor).

I use Front Page 2002. Here is URL: http://bsnarski.com/directions/wadsworthentryredarea.htm

Currently it has a text link to print but I plan to use a printer icon.

I know, someday I must learn how to keep images from jumping around on me but that is a larger task than what I am attempting here. It is especially annoying for me that ½ dozen images do that on my other site home page and I must reset all those images each time I make any change and republish my home page, Sheeeeesh!!! (http://fwoggie.com)

Thank you for your patience and your help.

nataliemac
06-02-2006, 12:55 PM
Make your "printer button" open the printable page in a new window. Set a javascript print command to fire onLoad of your printable page.

--Natalie

RMIGHTY1
06-02-2006, 01:50 PM
Thank you NatalieMac for your response. That is an excellent idea and in fact I tried just that using the following script on Page #2:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function varitext(text){
text=document
print(text)
}
// End -->
</script>
</HEAD>

<BODY>
<DIV ALIGN="CENTER">
<FORM>
<INPUT NAME="print" TYPE="button" VALUE="Print this Document!"
ONCLICK="varitext()">
</FORM>
</DIV>

I do not know how to incorporate the printer icon (ico_print.gif) into the input.

That does not work for me however because then the Page #2 map which has the red area outline shifted is displayed on the monitor. Even though it will print out accurately, it is displayed on the monitor inaccurately, e.g., with the red area outline shifted. Not only does it look bad, but I am afraid that folks will not even bother printing the map once they see that it is askew on the monitor. My need is to place the onclick print icon on the monitor friendly page (Page #1) such that it prints out the non-friendly monitor page (Page #2) without the viewer ever seeing the Page #2 (which has the red area outline shifted) on the monitor but displays accurately when printed out on printer. The Page #2 looks perfect once printed out. It is just when displayed on the monitor that it is askew and I do not want folks to see it that way.

This seems like such a simple thing to do but I have been unable to come across a solution in my HTML book or online so far. Again, I know I need to learn how to keep the shape image from jumping like that but for right now I just want to place the printer image icon on Page #1 and have it print the unseen Page #2. Perhaps what I am asking is not even possible, or at least not simple. If anyone knows a code that would do that, please let me know. Thank you kindly. And thank you again NatalieMac for your kind thoughtfulness. :)

RMIGHTY1
06-02-2006, 01:57 PM
Ohhh NatalieMac, I think I understand what you are saying now. That does indeed sound like it will work. I do not know how to do that though. All I have thusfar been able to do is print the page that has the above script. What is the code that would accomplish what you suggested above? :)