3

I have an ad placement system that randomly selects an ad image to display. The user can click on it to get to the respective website, and it has a border that appears when it is hovered over.

However, when customers hover over the ad, I want an option to appear (perhaps in the corner of the image) to print it out (the ads are coupons that may be used at brick and mortar establishments).

Or perhaps, if usability dictates, I would like a link right underneath the ad to start a print dialog.

How would I do this?

AKor
  • 8,550
  • 27
  • 82
  • 136
  • On second thought, if I wanted just a small link underneath the image to print, what would I have to do? – AKor Jan 11 '11 at 03:28

3 Answers3

1

You can use the mouseover event to determine when the user has hovered over the element, the click event to be notified when the user clicks the print link, and window.open(...) to open another page that'd have the ad just by itself, and then window.print() in the new window to print the page.

Ideally you'd want to just print without opening a new window, but I'm not aware of any cross-browser way to do this.

Brian Donovan
  • 8,274
  • 1
  • 26
  • 25
  • One alternative to opening another window is to switch the active `media="print"` stylesheet to one that only shows the ad, before calling `window.print()`. – David Tang Jan 11 '11 at 02:26
  • Ah, good idea. Though it may have to be a dynamic CSS file to target the right ad, it's definitely doable. – Brian Donovan Jan 11 '11 at 02:35
0

use js: have an element at an absolute position on the page so onmouseover = change opacity of print icon

tekknolagi
  • 10,663
  • 24
  • 75
  • 119
0

If you've got the ad in an iFrame you can put the javascript functions inside the iFrame to show the print button on hover (or below) and do like described here to print ad from an iFrame without having to open a new window.

Community
  • 1
  • 1
nedk
  • 673
  • 3
  • 8