separate Pictures for Low/High resolution

[walker]

Hi

Does anyone know a really simple piece of code to display one pic for low res(800x600) and a different one for 1024 high

Kind Regards

Rod

[jbinbpt]

Hi Walker,
Do you have two seperate images one low res and one high res or are you looking for code to change the res the same image?
Simple answer is to have both images available.

[walker]

Hi

I would have 2 separate pictures one sized for low res one for high res what I need is a really simply piece of code that will say if 1024 show HIGHPicture if 800low show LOWPicture

Kind Regards

Rod

[ytswy]

The Javascript properties are screen.width and screen.height – you could use these in a simple Javascript if statement to document.write one image or the other depending on whether these are >= 1024 and 768.

[walker]

Hi

Thanks for the ideas

HERE IS the finished code if anyone else needs it.

<script>
if (screen.width == 800) {
document.write("<img border='0' src='test-low.bmp'>");
}

if (screen.width == 1024) {
document.write("<img border='0' src='test-high.bmp'>");
}
</script>

[bcc1234]

I would add an else clause and a default fork. Otherwise, if my resolution is neither 1024 nor 800 - I won't see any image.

[ytswy]

One point (if that is all your code) then you will only show an image to people with 800x600 and 1024x768 resolutions - people with higher or lower resolutions will get nothing.

If you use an if-else and greater than or equal ( >= ) you can serve your low-res image to people at or below 800x600 and your hi-res to those at or above 1024x768.

<edit>too late..</edit>

[PCInk]

Don't forget to add:

<noscript>
<!--
<img border='0' src='test-low.bmp'>
//-->
</noscript>

So non-javascript users get something.

[Mark_A]

not for me thanks if you are talking about photos :-)

No offence but the choice of image I would want to see would probably

(unless of course you are talking about a load one time bg image)

be determined by my connection and download speed rather than my screen size :-)

[walker]

Hi

Thanks for the idea of less than or equal to idea, didn't accure to me, as for the no script picture that will also be quite useful though the majority of sites I tend to build now require javascript turned on to function.

<script>
if (screen.width <= 800) {
document.write("<img border='0' src='lowImage.jpg'>");
}

if (screen.width >= 1024) {
document.write("<img border='0' src='hiImage.jpg'>");
}
</script>

Kind Regards

Walker