I want to be able to be able to print my web page:
www.ottawalivemusic.com/map
and the map contained therein.
When I Print Preview or Ctrl+P from the browser (both Mozilla and MacIE), the image of the map dissappears. What am I doing wrong?
can not print image from browser
The map is a huge png image embedded in Javascript - you're asking for trouble there in so many ways, although it works okay on FF_Mac
can not print image from browser
The default setting in these browsers is to not print background images. Users will have to go into the Page Setup section within Print Preview to allow for these images to print.
- Antibland
RE: can not print image from browser
Thank you, AntiBland! That was confusing me for a long time. I had no idea what to tell people when they said they can not print the map.
The default setting in these browsers is to not print background images.
To work around this common browser default, it seems like I should try to redesign my CSS-only / non-
embedded in Javascript
Users will have to go into the Page Setup section within Print Preview to allow for these images to print.
Alternatively, I could explain to users (just as you did) how to go into Page Setup and allow background images to print. However, it would be best if my CSS and XHTML code made it more automatic for the user.
Re: RE: can not print image from browser
Thank you, AntiBland! That was confusing me for a long time. I had no idea what to tell people when they said they can not print the map.
The default setting in these browsers is to not print background images.
To work around this common browser default, it seems like I should try to redesign my CSS-only / non-
embedded in Javascript
Users will have to go into the Page Setup section within Print Preview to allow for these images to print.
Alternatively, I could explain to users (just as you did) how to go into Page Setup and allow background images to print. However, it would be best if my CSS and XHTML code made it more automatic for the user.
Everything you've said makes sense. I restrict my background images to those not intended to survive in the print realm.
- Antibland
can not print image from browser
Styling is eye candy - content is the meat in the sandwich. Don't treat content as though it was styling.
RE: can not print image from browser
As previously noted, the content of this webpage is a cartographical map.
Styling is eye candy - content is the meat in the sandwich.
Cartographical information can only be conveyed to the user visually.
Don't treat content as though it was styling.
I look forward to more practical advice on separating style from content in this case.
Re: RE: can not print image from browser
I look forward to more practical advice on separating style from content in this case.
The map is 100% content and should therefore be placed on the page as an image element in its own right - not as a background image that is subject to the user having javascript enabled (which is what you might do for styling graphics). Is that any clearer?

Edit: Oh, and by the way: at a stagering 670kb the graphic is waaaaaaaaaay too big for the web. You're trying to be too clever for your own good!
RE: can not print image from browser
placed on the page as an image element in its own right - not as a background image that is
My redesign will focus on making the map an image element. Any recommendations on how to get there?
subject to the user having javascript enabled
What JavaScript? There is no JavaScript on that page. Turn scripting off and see how the image rolls over.
at a stagering 670kb the graphic is waaaaaaaaaay too big
Alas, it is. Once the more important coding is complete, it is a simple matter to reduce the final resolution of the graphic to speed up loading.
can not print image from browser
I was doing too many things at once when I glanced at your page, and then confused it in my mind with another site - sorry :oops:
I actually don't like the overall effect of the map and it's rollovers - it's too fussy and difficult to make out. If it was me, I'd stick to a basic but clearly readable map and if you must have rollovers, you could try a good old-fashioned image map I think, although I haven't a clue if such things validate nowadays! I'm sure some others will chip in with ideas involving absolutely positioned divs that 'unhide' in response to curser co-ordinates.
As for the image size: your current methodology is not exactly helping with the file-size!
RE: can not print image from browser
I think I have done it!
1) I have added the plain map image as a separate element as was suggested. The same CSS image rollover now occurs directly on top of the plain map image.
Thus, if a browser is set by default to NOT PRINT background images (the rollover is the background image), the user will print the map image element.
If the browser is set automatically to PRINT background images, the portion of the rolloever which lies over top of the plain map is transparent anyway.
2) I have severely reduced the size of the image files to speed up loading.
Everything still validates.