Scaling Images

[tswaters1]

Ok. So here's the problem:

Screen shots from an application that RoboHelp is the user guide for. I dunno about you, but my screen runs at a resolution of 1280x1024, so the size of images for me is no problem at all. However, it's possible that there may be users running as low as 800x600 (i often have nightmares of users still running at 640x480)... So ideally the image should resize to show in the width of the screen, with the height scaled properly if the browser's width is shorter than the width of the image.

The only way I've found to do this, adhering to my insanely high standards, is with tricky javascript. See below for the final source code -- even includes code for annoting & resizing image maps, if there should happen to be any.

[tswaters1]

... see below for final code ...

[tswaters1]

... see below for final code ...

[tswaters1 · Accepted solution]

Allright, I've taken another stab at this code. One of the major flaws with the version I posted before was that it didn't take into account any image maps you may have associated with the image. I've resolved this and even added in a image map annotation -- sure I may have righteously ripped the annotation code because the effect was cool, and really has nothing to do with resizing -- but it's a nice touch to add. If there's no image maps, no problem it will do nothing

Instructions:
- Add a baggage file with the contents below to the root directory, call it "imgresize.js"
- Add an ID to the image, "sshot"
- Add in a reference to imgresize to the HEAD section of the page

[Captiv8r]

HI tswaters1

What you are describing would seem to cause horrible issues, as you are allowing the browser (or to be more technically correct, using JavaScript to adjust the size) to rescale the images. This would seem to be the same thing that would happen if you popped an image into RoboHelp, then used the sizing handles to make it smaller or larger.

This method of "resizing" normally results in awful looking images, because the browser routines that handle this aren't very good. This is why an image editing application does so much better of a job of rescaling.

So my question to you is this: You don't observe any really odd or icky looking images using this approach?

Mind you, I'm not trying to slam your approach. I'm just mentally struggling to cope with what I know about the way these things work and what you have provided.

Cheers... Rick

[tswaters1]

Yes, you're right about images looking bad when they get really small. The reason I'm doing the re-size with JS is to, if at all possible, use the full image size and avoid horizontal scrollbars at all costs.

In the project I'm doing this for, the screen shots in question are full-size captures of an application-screen that was designed for 800x600 -- Ideally the user is farmiliar with the screen so they can probably see through the crappiness. Usually one can get the jist of what the image looks like as long as the width stays around 70% or greater. So for a user with the dreaded 800x600, if they open up the help window (I think it goes to about 600 width in my setup), it looks fine...

If I'm scaling with RoboHelp, it has the same effect as doing it with JavaScript -- each modifies the underlying CSS, one dynamically the other when the screen loads... both call the browser's compression algorithm. Actually I started out scaling the images with RoboHelp, but I found that if I specified percentages, the height wouldn't change and the image would lose the height/width ratio and look real bad. If I were to scale them down using an image-scaling program, sure they may look better for the handful of users with 800x600, but if the user DOES has a decent resolution (which 80% of the people im dealing with do), I'd like them to see the full-size.

Yes I'm guilty of using extravagant JavaScript to fix, when it really comes down to it, a non-issue. I think this has been more of a "see if JavaScript plays nice with RoboHelp" exercise -- to see if I could do something dynamic using a single script file, hooked up to RoboHelp with minimal effort.

[Chet Zeshonski]

Here's a simple idea:

1. Change your monitor's resolution to 800x600.
2. Open the application.
3. Take your screen shots.
4. Change your monitor's resolution to your preferred size.
5. Create your Help project.

Voila! No need to resize: Your images are already 800x600.

[tswaters1]

Hm... well I have created the images with a max width of 800, that isn't the problem.

The problem comes when the RoboHelp screen size is smaller than the images, which is quite possible for a user w/ 800x600 viewing the webhelp in a non-maximized window, the horizontal scroll-bar will display.

To get rid of those pesky horizontal scrollbars, I've written the extensive javascript object above.