Dynamic HTML Banner

[chimaera]

Ok a colleague of mine is having a problem with his web page and i figured i'd ask the collective genius of OcUK.

Basically its a specialist mapping website which has an HTML layout, using an ActiveX plugin for the map components.

The problem is the web page banner needs to be catered for all sorts of different resolutions, currently its a simple jpeg strung across the top. If its given a percentage value rather than pixel, then it distorts the image when being viewed in lower rewsolutions like 800x600.

So my question is whether there is any way to have a dynamic banner that does not distort at different resolutions? i know there must be a way, CSS maybe? i don't think the mapping software supports CSS which might be a problem.

 

[Augmented]

Not possible with a raster image (jpg, png, gif etc) unfortunately. If you scale up using percentages, you'll find that quality degrades as the renderer starts interpolating (guessing) between pixels to fill the new space.

The trick is to modify the graphic so that one side tiles either horizontally or vertically depending on requirements. Veerle Pieters has a good tutorial about one application of the technique.

If you want a truly scalable graphic that doesn't degrade quality, you need to use a scalable format. For the web this is SVG (Scalable Vector Format). Biggest problem with using it at the moment is support in Internet Explorer <6 requires an external plugin.

If you really must have a banner graphic that fills the maximum screen width for the user's resolution, then you'll need to create several images that cater for each resolution you're supporting. Then using Javascript to detect the current browser window width you can serve the appropriate image. This method is messy and not failsafe.

 

[chimaera]

Thats excellent stuff many thanks.