Dynamic resizing of images

blastman

Hi all, I'm editing a website at the moment that resizes automatically to fit the screen it is displayed on. The owner now wants to add a banner graphic across the top of the page. Is it possible to make this banner resize dynamically so it matches the rest of the page? The added complication is the banner is to be a map with three different hyperlinks depending on where in the image you click, is this possible as well?

Thanks in advance.

Dades

Usually a banner that stretches 100% contains some solid colour area, or at least an area that can tile horizontally. Does the map image graphic you are using allow for this? You could maybe add a transparent gradient into a solid colour to facilitate this. In this case you place the graphic in as as clickable image, and have the tile/solid element as a stretching background.

Alternatively the whole image could be a background, and you could then maybe use a transparent image as an image map that would allow you to click on the relevant part of the map - assuming you can keep that and the BG aligned correctly.

Remember if you were to use a BG image, the image would need to be large enough so that it would appear even when the browser is stretched to really big resolutions.

Just some thoughts.

steamboat

You can always define the width and height attributes of the image as a %, so that it will always fill that percentage of the containing block when the browser window is resized (set the image width and height to 100% and put it inside a td element for example - when the table grows/shrinks the image will resize in proportion).

You can probably use an image-map for multiple links - might get tricky with the resizing however (ie. for setting the co-ords). Otherwise you could just split the image into parts and treat them separately

blastman

OK, I didn't realise it could be as simple as setting the size as a percentage. Obviously the imagemap makes it more complicated, but there's some food for thought there, thanks chaps.

Dades

Stretching an image beyond it's actual width/height in pixels will look awful I fear. I wouldn't recommend it, myself!

steamboat

Dades wrote: »

Stretching an image beyond it's actual width/height in pixels will look awful I fear. I wouldn't recommend it, myself!

Agreed... ok for shrinking down, but not expanding out. So you'd need the actual image to be quite large to cater for the largest possible screen size. It does get a bit messy - consuming extra bandewidth etc. Dades' suggesting to used fixed image size with a gradient to fade into coloured background could be a much cleaner solution.

blastman

At the moment, I've split the image in three parts so I can assign three different links to the different areas, which gets around using an image map. I then use a a table to display the three images side by side.

The problem is that I'm using a large image and downscaling (at least that was the plan). I've set the overall table width as a percentage of the the total screen size which will vary depending on the resolution the screen is set to. I have also used percentages to divide the table elements in the row so that the three parts of the image will be proportioned correctly. However, the page just displays the image full size, the table cells won't limit the image size, they expand to display the full size image. If anyone knows a way of stopping this happening while still retaining the ability to resize depending on the resolution the viewer is using, I'd be much obliged!

Liam Byrne

blastman wrote: »

However, the page just displays the image full size, the table cells won't limit the image size, they expand to display the full size image.

Correct. This is how tables are meant to behave.

blastman wrote: »

If anyone knows a way of stopping this happening while still retaining the ability to resize depending on the resolution the viewer is using, I'd be much obliged!

You could have 3 divs floating left with each sized to 33%, and set the image with using CSS to 100%, but it's still an overall bad approach; the full-size image will be downloaded and only the display version rescaled by the browser, resulting in (a) a fairly pixelated image and (b) a slow page, since the full-resolution image will be downloaded prior to display re-scaling, regardless of the screen size.

The only other option would be to use a server-side resize (e.g. phpThumb) to achieve the resize, but this would still be relatively slow if the image file on the server was very large, and would also pose serious download time issues if the visitor was viewing on a very large or very high-res screen.

Basically, what you are trying to achieve isn't usually done; I've achieved it for specific sites, for specific reasons, and usually based on visitor requests (e.g. if a visitor requests a "zoom" on an image, then they'll tolerate a slow response time) or combined the server-side processing with a constrained maximum size to prevent massive download times.

Dades

blastman wrote: »

The problem is that I'm using a large image and downscaling (at least that was the plan).

Add a width and height attribute other than the correct one to the image and you will see how awful it looks displayed in the wrong dimensions.

It's just a bad idea to so this. You really need to do this using background images with maybe clickable transparent images on top.