Conditional image replacements.

[Cabbit]

I am hoping there is a Javascipt or PHP solution what i wish to do is have images on my website that scale with the browser window as there resized.

So say were on 800x600 the image would use the 40x40 image, or if it is 900x700 it will also use the 40x40 image. But if the browser goes to 1000x1000 the site will switch to the higher resolution version of the image.

 

[angelwatt]

You'll likely want to do this with JavaScript. PHP won't know the browser window size, though you could always have the JavaScript make an AJAX call to some PHP, but that's likely overkill.

Here's some documentation for getting the browser window dimensions. You can use that to detect and apply different images. And then there's the window resize event that you can monitor for.

 

[Cabbit]

Thanks for the quick reply, this may sound daft but i am trying to design a resolution independent website and since vector graphics are not implemented into many browsers yet i am going to have 10 different versions of the UI images and site images that are stored at different sizes from mobile sized to the 300dpi screens of tomorrow.

Though of course the biggest issue here is that only content i provide will be able to fully scale.