PC Services

"From Payroll to Body Scanners"

Some PHP Tips and 'Tricks'

Thinking beyond each page and DESIGNING your web site

Image Maps

The image map consists of a larger image with sections of the image using 'text' or shapes to click on, which are determined as being a defined number of pixels in size. You may well have seen them on many web sites. Note the 'text' in an image is a picture of text at a set pixel size that does not resize with the browser or screen resolution.

Image maps as menu systems, can be disastrous with the vast array of screen resolutions available today.

Consider this the designer creates an image to go on your web page as a menu that is 600 pixels wide x 600 pixels high, When viewed on different screen resolutions the image will appear as smaller and smaller and the text will be more unreadable as the screen resolution increases. As shown by the table below -

See how quickly the image changes from three quarters of the screen width to less than half the width reducing the text size and readability.

The last two sizes are common formats (as of 2010) for WIDESCREEN format laptops and computer monitors, thus making your web pages more difficult to read on newer computers. making the image larger to start with has the opposite effect of making the image more difficult for smaller screen sizes as the image and text appear larger, and will no doubt mean having to scroll the web page to get to different parts of the image.

The same is true of any image displayed on the page, appear to change size on different screen resolutions.

Any fancy software to resize images and buttons, suffers from the same software problems as popup menus, and is not guaranteed to work on all browsers.