0

i am trying to do it simple and will be happy to see / hear, examples / ideas for the right approach :

suppose i have an jpg image: width of 780px and height of 2546px that contains coupons.

my goal is to click on a coupon and print it...

my question is what is the best way to implement it

i thought about image map the will trigger a java script call when ever specific "coupon" is clicked and through the image map specification it would load an image(of the specific) coupon for printing.

i think that maybe there is a better solution..

keep in mind that my only option is one large image that contains coupons for printing.

E.Meir
  • 2,146
  • 7
  • 34
  • 52

2 Answers2

1

Wrap your coupon image in a div

<div id="coupon_viewer" onClick="this.style.display='none'">
  <img src="coupon.jpg">
</div>

With this CSS

div#coupon_viewer { z-index:100; width:200px; height:300px; overflow:hidden; }
div#coupon_viewer>img { position:relative; left:0px; top:0px; }

When you click on the main coupon, simply display the viewer div and set the left and top properties to the appropriate coordinates for that coupon. You can also set the div width and height as needed. Then window.print().

If your window is initiating the print dialog before rendering the coupon_viewer layer here's how you can delay the print command, long enough for any slow browser to render the coupon layer.

setTimeout(function () { window.print(); }, 800);

After a quick search, here is a thread I found about how you can pull the coordinates when you click on the coupon. You can then multiply the coordinates by whatever factor you reduced the first image size. jQuery get mouse position within an element

Here is a link to the overflow property spec hidden just means your div will act as a view-port while you move your image around inside it using the left and top properties: http://www.w3schools.com/cssref/pr_pos_overflow.asp

Good luck

Community
  • 1
  • 1
Bryan Allo
  • 696
  • 3
  • 9
  • Won't the print command yield the result of the page before you applied the dimensions sizing via javascript? – Stefan Oct 17 '12 at 16:27
  • 1
    I've had situations where that happened. Some browsers are just slow enough to render so that the print dialog appears before the page is ready. Safari is notorious for this. I just added a 500ms-800ms time delay to the print command. Works fine. – Bryan Allo Oct 17 '12 at 16:30
  • i didnt understand this solution can u explain it a little bit more ? when i click the "large" image how do i set the appropriate coordinate and then send these coordinate to print? and for what purpose is the hidden property and div#coupon_viewer>img ? – E.Meir Oct 18 '12 at 08:47
  • Updated my answer above. hope that helps. – Bryan Allo Oct 18 '12 at 16:13
0

i did it eventually with the use of image maps:

coordinated the 'send to print button' and send to javascript 'print()' method that accept parameter

the parameter is a number of a picture(coupon)

i have a folder that contains all the coupons images: 1.jpg, 2.jpg ..... etc'

the print method retrieve the string (1.jpg)

and then print it.

E.Meir
  • 2,146
  • 7
  • 34
  • 52