My page will essentially be a large image map but the smallest I can go down to is around 1500x1000 pixels before some areas are too small for comfort. In the majority of browser windows (even on my 1280x1024 monitor) this creates both horizontal and vertical scrollbars.

Up/down is fine since most people have scroll-wheels on their mice, but left/right is a pain. I'm just wondering if anyone has ideas to make the user experience a bit smoother to save all that scrolling?

4 answers

This was chosen as the best answer

Why not start with a page that shows all of the imagemap at a smaller scale, e.g. a sort of helicopter view of the larger imagemap with clickable zones, so you choose a section of the image map to load at an optimum resolution in a sensible window size and have the edges of the zoomed in image map clickable to load the adjacent tiles.

Answered over 8 years ago by Tony Crockford

make the page smaller - look up the average screen size probably 1024 by 768 and base your design on that - user other methods to to make the unreadable areas readable - use a lightbox efffect or link to another page that shows the detail.

Answered over 8 years ago by Matthew Pollard
danwellman 5600

1004px is the maximum width the page can be without introducing a horizontal scrollbar on a 1024 x 768 resolution.

W3Schools lists the common screen resolutions on their site, however, this is a reflection only of the visitors to their web site...

For maximum compatibility you should base your site around at least a minimum resolution of 1024 x 768, however, there are many really great sites that do not stick to this paradigm and are better for it. Mostly they rely on JavaScript to make sure scrollbars are not added and to navigate around the page.

For example, checkout wallswaps which is pretty awesome and has an inner container over 3000 pixels wide!

This blog post may also help...

Answered over 8 years ago by danwellman

Here is an attractive solution I would adopt:

  1. hide both scrollbars (overflow:hidden)
  2. overlay your map container (which will span across the whole screen) with 4 semi-transparent large buttons, one along each border of the container.
  3. use javascript to scroll in the required direction when the appropriate button is clicked.
  4. Optionally, you could add and "easing" effect to the scrolling to give it a more aesthetic feel.

You can even make the map draggable across the screen; this way will be more intuitive than scrolling.


Answered over 8 years ago by Harshath