Screen Resolution Detector

This is a cool trick which is best used to make sure that the layout of your screen is kept consistant and clean - by making sure your visiter has the right resolution. An ecample of this is if your page has a title image 600 pixels wide, and the viewers screen resolution is 640 by 40, there will be a horizontal scroll bar on the page (a big no-no). Using this script will allow you to alert the visiter of their resolution, and if it is wrong, alert them to change it. Here is an example script of a resolution detector for less then 1280 by 1024.

Here is the script:

<script language="Javascript1.1">

function detect(){
if(screen.width<1280||screen.height<1024){
alert("This web page is best viewed with a screen resolution of 1280 by 1024 or higher.  Your current resolution is "+screen.width+" by "+screen.height+".  If possible please change your resolution.")
}
else{
alert("Whoa, you have a high resolution.  Nice Job!")
}

}




</script>

Thats all there is too it. Add this script to your <head> tag. You can change everything in red, to customize it for your page. To load this at start up, add 'onLoad="detect()"' to your <body> tag. If you want to add it to a link or button, add 'onCLick="detect()"'. Good Luck!

Setting a cookie

This code will alert the user every time they visit. By setting a cookie, however, you can make it alert only once, once a week, etc. Therefore I decided to write some code which did this. Thanks to Khalid for the suggestion.

		<script language="Javascript1.1">

function detect(){
if(screen.width<1280||screen.height<1024){
alert("This web page is best viewed with a screen resolution of 
1280 by 1024 or higher. Your current resolution is "+screen.width+" 
by "+screen.height+". If possible please change your resolution.")
}
else{
alert("Whoa, you have a high resolution. Nice Job!")
}

}


//this part will call up detect if this is the first visit.
//This script and many more are available free online at 
//The JavaScript Source!! http://javascript.internet.com 


var expDays = 1; 
// number of days the cookie should last


function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function amt(){
var count = GetCookie('count')
if(count == null) {
SetCookie('count','1')
return 1
}
else {
var newcount = parseInt(count) + 1;
DeleteCookie('count')
SetCookie('count',newcount,exp)
return count
}
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

function checkCount() {
var count = GetCookie('count');
if (count == null) {
count=1;
SetCookie('count', count, exp);

detect();

}
else {
count++;
SetCookie('count', count, exp);

}
}






</script>

Then instead of calling detect(), call checkCount().

Forward to resolution specific page

Instead of forcing the viewer to change their resolution, it might be more user friendly to forward them to a different version of your site that is designed for their lower resolution. Thanks to awilson for this suggestion. To do this simply replace the following code:

Replace:

function detect(){ if(screen.width<1280||screen.height<1024){ alert("This web page is best viewed with a screen resolution of 1280 by 1024 or higher. Your current resolution is "+screen.width+" by "+screen.height+". If possible please change your resolution.") } else{ alert("Whoa, you have a high resolution. Nice Job!") } }

With:

function detect(){ if(screen.width<1280||screen.height<1024){ location.href('highres.html'); }else{ location.href('lowres.html'); } }

Load it

Make sure that you add this code to your page:

Replace:

<body>

With:

<body onLoad="detect()">

Rate this Tutorial

Rate this Tutorial:

Current Rating:

4 out of 54.32/ 5.00 with 78 votes.

Current Comments

58 comments so far (post your own)

excellent script, really useful for me as my site is designed for use with 1024 x 768 resolution screens but 40% of my visitors have a resolution smaller.

Would it be possible to employ the script in such a way that a user is only informed of their screen resolution once-per-session by employing a cookie feature or similar?

Posted by Khalid (http://www.thenokiazone.com)on Wednesday, 04.28.04 @ 02:16pm | #37

Thanks for the suggestion. I added it to the tutorial. Have a great day.

Posted by Brian Zimmer (http://www.zimmertech.com)on Thursday, 04.29.04 @ 04:05am | #38

i really want the site to automatically change resolution to the resolution of the viewer. if possible it would be a great help. cheers.

Posted by awilson (www.senseof16.tk)on Thursday, 05.6.04 @ 06:31pm | #43

Thanks for another really great suggestion! I added it to the tutorial.

Posted by Brian Zimmer (http://www.zimmertech.com/)on Friday, 05.7.04 @ 12:58am | #44

thanks alot for the previous question..it didn't really help, but thanks! i've seen loads of those explenations splattered across the internet and what I wanted was a page which automatically centered depending on the viewers screen resolution...ie if you view the site at 800x600 it is centered and if you view it at 1024x768 it is the still centered. I have tryed this:
<center>
<table>
<tr>
<td>
MY PICS ETC
</td>
</tr>
</table>
</center>
And it doesn't work! I think you know how to do what I am asking becuse I think your site is centered on any resolution...I hope. Cheers.

check out my site on a resolution higher than 800x600 and you'll get the idea. www.senseof16.tk

Posted by awilson on Friday, 05.7.04 @ 04:22pm | #47

Centering the page based on resolution is a bad idea. If their browser window does not fit the whole screen, it will not be centered. I do not recommend doing this.

Instead, center the page using HTML. There are a few methods. The <center> tag should work. If your layout is based on a table, the <table align="center"> tag should work. I look at your site, and my guess is that it is a problem with the frames.

I would recommend ditching the frames. They are hard to work with, search engines hate them, etc. Also, the old advantages of frames to not hold true any more. You can use PHP and SSI to include the same menu on every page, and the browser caches the images on the menu, so the time saved by changing the page in minimal. Just my opinion, but I would recommend getting away from frames and that might solve your problem.

Posted by Brian Zimmer (http://www.zimmertech.com/)on Saturday, 05.8.04 @ 04:21am | #48

Hi Brian, my site doesn't have frames...I know that frames suck... shall I just send you the script to my home page??

Posted by awilson on Monday, 05.10.04 @ 08:52am | #49

I need to know how to change screen resolution: 800 x 600 to 1024 x 768 by javascript. onload or onclick command

Posted by Bipin (http://www.dunungindustries.com)on Saturday, 06.26.04 @ 04:13am | #91

You cannot change the users resolution if that is what you are asking. You can only ask them to change it, and this is what this script does. You can also send them to a different page depending on their resolution.

Posted by Brian Zimmer (http://www.zimmertech.com)on Saturday, 06.26.04 @ 02:46pm | #92

hi, i was trying to get your last script to work (the auto detect and forward method) but i can't seem to get it right. i did this just like it's shown, but when i open the page i get nothing. all i wanted it to do was autodetect, then send the user to index1, index2, or index3.html. any suggestions?

Posted by Josh on Wednesday, 06.30.04 @ 02:57pm | #96

Sorry, there were a few mistakes in the code. I thought I tested it, but I guess not. Try it again with the new code. The function detect should be:

function detect(){
if(screen.width<1280||screen.height<1024){
location.href('highres.html');
}else{
location.href('lowres.html');
}

}

Posted by Brian Zimmer (http://www.zimmertech.com/)on Wednesday, 06.30.04 @ 09:17pm | #97

I have been trying to add the screen resolution detection code and i cant get it to work. I copied it exactly the way it is on this site but i think that something is going wrong.

thanks
Bud

Posted by Bud on Thursday, 08.12.04 @ 06:00pm | #132

Well,, I just went to the source of this page and took the code from there and now it works fine. So i dont know whats up with the code you have for an example.

thanks
Bud

Posted by Bud on Thursday, 08.12.04 @ 06:03pm | #133

The problem with the script is that the highres & lowres are mixed around.

My question is, how can I use this inside a frame? I want the contents of one frame to be different if the resolution is below 1024x768. I know you don't like frames, but they are necessary due to some branding on our site.

Posted by Chad on Wednesday, 09.1.04 @ 11:19pm | #152

Hello.

I just stumbled upon your code here and have an interesting application for it ath I'm stuck on.

I'm running a forum. The header of the page Iw ould like to be a variety of images based upon resolution. I will create on for 640 width, 800, 1024, 1280, and 1600.

I would like to know if I could code into the table cell where the image loads to check the browser resolution and load the appropriate image.

Can this be done?

Thanks.

D.

Posted by Netbug (http://llyorian.netbug.net)on Saturday, 10.16.04 @ 03:47pm | #197

I want a javascript which will detect monitor resolution. if resolution is 800x600 automatically it should change resolution to 1024x768.


Pls can You send it to my Mail.

Posted by Mahesh on Monday, 01.17.05 @ 12:05pm | #268

I have designed a site which can be best viewed in 800x600 resolution. So the concept of redirecting a visitor to different pages based on resolution is not useful for me as my entire site is ready. So pl. suggest a script which will detect screen resolution of a user and if it not 800x600 then it will change automatically to 800x600.

Thanks

Posted by A on Monday, 03.7.05 @ 05:27am | #383

I don't think you understand the concept of resolution. You cannot change the visitors resolution. Resolution is how many pixels can fit on the screen. 800pixels wide for a 19in monitor will create bigger pixels than 800pixels wide for a 14 in monitor. If the web designer could change the visitors resolution, they could change it to 1x1 (which is 1 block of color for the whole screen).

But you are in luck. 800x600 is pretty much the smallest anyone has. Any larger resolution (such as 1024 by 768), will show your site fine. But a graphic that took up the whole screen on someone elses comp will no only take up 2/3 of the screen.

Posted by Brian Zimmer on Tuesday, 03.8.05 @ 05:42am | #384

Hi im planning on making a 1 page website with its versions of 800x600, 1024,768, 1280x1024 resolution.

how can i modify/ or what can i add to your code to detect the users resolution if ever they fall either on the above resolutions and direct them to each specific webpage with respect to their monitors reolution?

Posted by rykross on Monday, 04.4.05 @ 11:16am | #434

Hi.

I love this simple bit of script, it was just what I was looking for to warn people about screen resolution when they enter my site which requires 1024x768.

I was wodering, is it possible for the script to make a record of the screen resolutions of visitors? I'd like to know if the screen requirement I am specifying is causing a problem to many of my visitors, so a breakdown of who invoked it and why would be great. Perhaps a html page which the script writes a new line to each time or maybe it could email me the result...?

®

Posted by Richard Holt (www.holster.co.uk)on Monday, 06.6.05 @ 09:15am | #560

Hi, Nice script, but I couldnt make it work on firefox, seems to be a problem on

---------------------------------------------
location.href('highres.html')/;
}else{
location.href('lowres.html')/;
}
---------------------------------------------

because the textbox script works fine in firefox, but not the link.
This problem, I noticed in many resolution detect scrpts in javascript, but anyone works fine in firefox, thx bye

Posted by Diego on Tuesday, 07.26.05 @ 08:06am | #624

Hi, Nice script, but I couldnt make it work on firefox, seems to be a problem on

---------------------------------------------
location.href('highres.html')/;
}else{
location.href('lowres.html')/;
}
---------------------------------------------

because the textbox script works fine in firefox, but not the link.
This problem, I noticed in many resolution detect scrpts in javascript, but anyone works fine in firefox, thx bye

Posted by Diego (www.dbdesign.com.ar)on Tuesday, 07.26.05 @ 08:06am | #625

This script is exactly what I need to put on my site! I wasnt to autodetect and autoroute them to the relevant page as determined by their resolution but how do I put the script onto my page? I am using dreamweaver 3! PLEASE SOMEONE TELL ME WHERE I PUT THE CODE IN THE CODE EDITOR

Posted by Chris on Thursday, 07.28.05 @ 03:40pm | #628

Hi guys! I have built a site htp://www.teenyqueen.com and as you can see, I need the front door page to autodetect and auto-reroute visitors to the appropriate resolution page. I have tried these on here but they dont work! Please someone tell me what code to use? Thanks guys, I really appreciate your help

Posted by Chris (http://www.teenyqueen.com)on Sunday, 07.31.05 @ 10:17am | #631

Great tutorial, but the script isn't working in Firefox. The alert tells me that my resolution is 1024x768, no matter what resolution I'm using.

Any ideas?

Posted by Ryan (www.rmfernandez.com)on Friday, 08.26.05 @ 12:10am | #668

Great tutorial, but the script isn't working in Firefox. The alert tells me that my resolution is 1024x768, no matter what resolution I'm using.

Any ideas?

Posted by Ryan (www.rmfernandez.com)on Friday, 08.26.05 @ 12:10am | #669

A simple change in your script is needed as follows:

see that the file names are to be swapped.
lowres.html and highres.html
---------
Forward to resolution specific page
With:

function detect(){
if(screen.width<1280||screen.height<1024){
location.href('lowres.html')/;
}else{
location.href('highres.html')/;
}

}

Posted by Pramod on Monday, 11.7.05 @ 04:19am | #709

I don't know if there's a difference between screen resolution detector code or automatic change viewer's browser screen resolution code, but when I tried your code it doesn't work. My page's size runs on 1280 pixels by 1024 pixels. How can I automatic make the viewer's screen [resolution] to run 1280 pixels by 1024 pixels so it can see my entire page?

Posted by Asakura Hideki on Wednesday, 11.16.05 @ 01:31pm | #726

Asakura,

I've mentioned this a few times before in the comments. It is impossible to change a viewers resolution. Resolution is how many pixels can fit on the screen. 800pixels wide for a 19in monitor will create bigger pixels than 800pixels wide for a 14 in monitor. If the web designer could change the visitors resolution, they could change it to 1x1 (which is 1 block of color for the whole screen). Not all screens can do 1280 by 1024 resolution. As a designer, all we can do is ask a viewer to change their resolution or forward them to resolution specific designs.

Posted by Brian Zimmer on Wednesday, 11.16.05 @ 08:02pm | #727

I am running into a HUGE problem creating a website. When viewing the site on 800x600 it views in the center of the page. When viewing the site on 1024x768 it views on the left side of the page. How do I make the page always appear in the middle?
I have seen many pages accomplish this, but I cannot figure the coding to do it.

Posted by Christopher T. Brons (www.faithcity.org)on Monday, 04.10.06 @ 05:13pm | #969

This looks like it will work for me. I just wanna change the CSS file for different resolutions. But I was wondering what browsers support this detection feature. Did it come out in version 4 NN and IE browsers or v5 or v6?

Posted by Patrick on Friday, 04.14.06 @ 10:54am | #976

Hi! Thanks for the tutorial :)

I was wondering what could go wrong?

I have different sites set up for different screen res users, and I was wondering if this code was full proof in that ALL users with a screen res of 1280x1024 will undoubtedly be directed to site A, and ALL users using anything lower than 1280x1024 will undoubtedly be directed to site B. Are there any circumstances in which this code will fail?

Thanks!!!

Posted by Morgan on Sunday, 05.21.06 @ 05:42pm | #1070

This is what I have found for firefox users:

this seems to work

<SCRIPT LANGUAGE="JavaScript">

browserName = navigator.appName/;
browserVer = parseInt(navigator.appVersion)/;
if (browserName == "Netscape" && browserVer >= 4 || browserName ==
"Microsoft Internet Explorer" && browserVer >= 4)
version = "1"/;
else if (browserName == "Netscape" && browserVer >= 3)
version = "2"/;
else
version = "3"/;
if (version == "1") {
var correctwidth=1024
var correctheight=768
if (screen.width<correctwidth||screen.height<correctheight)
location="lowres.html"
else
location="highres.html"
}
if (version == "2") {
var toolkit = java.awt.Toolkit.getDefaultToolkit()/;
var screen_size = toolkit.getScreenSize()/;
var correctwidth=1024
var correctheight=768
if (screen_size.width<correctwidth||screen_size.height<correctheight)
location="lowres.html"
else
location="highres.html.html"
}
if (version == "3")
location="highres.html.html"
</SCRIPT>

Posted by Jules Moretti (www.wilsonyounger.co.uk)on Tuesday, 05.30.06 @ 08:06pm | #1307

For firefox, use this... both the original and the comment from Jules don't work for me. this I just found does:


<script>

function resRedirect(){

var width = screen.width/;
var res =(((!(640-width))*1)+((!(800-width))*2)+((!(1024-width))*3)+((!(1152-width))*4)+((!(1280-width))*5))/;

if(!(res)) res = 1/;

if (res=='1') // 640 X 400
location.replace('RES-PAGE1.HTML')/;

if (res=='2') // 800 X 600
location.replace('RES-PAGE2.HTML')/;

if (res=='3') // 1024 X 768
location.replace('RES-PAGE3.HTML')/;

if (res=='4') // 1152 X 864
location.replace('RES-PAGE4.HTML')/;

if (res=='5') // 1280 X 720
location.replace('1280.html')/;

else // anything else
location.replace('OTHER_RES.HTML')/;

}
resRedirect()/;
</script>

Posted by morgan anson on Monday, 06.5.06 @ 03:00am | #1469

is it possible to do an onClick with this function ?

Posted by P-O on Wednesday, 06.7.06 @ 05:50am | #1544

sir,
i just designed my website using 1024/768 resolution.I tested on 800/600 resoultion screen.there is problem in adjusting the screen.When i surffing for scripts to auto adjust i found your site and saw the code.I pasted the code and tested.but 2 files "lowres.html"
"highres.html"
missing.kindly send these 2 files to test the resolution.

thanking you sir.

Posted by rnagarjunakumar on Wednesday, 08.9.06 @ 03:37am | #2564

can you send lowres.html and highres.html
for testing


Thanks & Regards
Vijay

Posted by vijay on Thursday, 08.24.06 @ 02:30am | #2584

good

Posted by prabhash (www.prabhash.9k.com)on Tuesday, 09.19.06 @ 01:57am | #2599

If I have an entry page, where the user is asked to click a link to go in the main site, how can I change that link, according to the client's resolution? What I want is something that will change this:

<A HREF="startup-hires.htm">Click here to enter</A>

to

<A HREF="startup-lowres.htm">Click here to enter</a>

according to the clients resolution. Say anything below 1280x1024 goes to low res.

Posted by M1911 on Wednesday, 09.20.06 @ 01:18am | #2600

I designed my website to work with a 1024x768 resolution. It's there a way to automaticaly resize the content in the page whitout making 2+ version of the page?

10x

Posted by lastbullet on Tuesday, 10.24.06 @ 10:07pm | #2635

wow, great, below code only worked for me in both firefox and ie.

function resRedirect(){

var width = screen.width/;
alert(width)/;
var res =(((!(640-width))*1)+((!(800-width))*2)+((!(1024-width))*3)+((!(1152-width))*4)+((!(1280-width))*5))/;
alert(res)/;
if(!(res)) res = 1/;

if (res=='1') // 640 X 400
location.replace('RES-PAGE1.HTML')/;

else if (res=='2') // 800 X 600
location.replace('800.html')/;

else if (res=='3') // 1024 X 768
location.replace('1024.html')/;

else if (res=='4') // 1152 X 864
location.replace('1152.html')/;

else if (res=='5') // 1280 X 720
location.replace('1280.html')/;

else // anything else
location.replace('OTHER_RES.HTML')/;

}

Posted by venkat on Friday, 01.12.07 @ 03:34am | #2712

remove '/' from the above code in each sentence ending with /;

then only it works also dont forget to change body tag to

<body onLoad="resRedirect()/;">


Posted by venkat on Friday, 01.12.07 @ 03:37am | #2713

I need a script that would popup a window depending on the user screen resolution once they click on a link.

For example if the user has a screen resolution of 1024 by 768 or lower they would get a pop up window with say page1.html when they click on the link, but if their screen resolution is 1152 by 864 or higher they get page2.html

Is there a way to modify your script to do this.

Thank you in advance for your help.

Posted by Brady on Tuesday, 01.23.07 @ 09:20am | #2729

<body onLoad="resRedirect()//;">
<script>
function resRedirect(){
var width = screen.width/;
if (width<=1024)
location.replace('low/index.html')/;
else // anything else
location.replace('high/index.html')/;
}
resRedirect()/;
</script>
Working great on Safari, Firefox, IE, and Opera

Posted by Leandro on Wednesday, 01.24.07 @ 07:16am | #2731

the script doesn't work on me.. I adjust me screen resolution to 800x600, and it doesn't redirect.. how come?

I placed this inside my header:

<script type="text/javscript">
function resRedirect(){
var width = screen.width//;
if (width<=1024)
location.replace('low/index.html')//;
else // anything else
location.replace('high/index.html')//;
}
resRedirect()//;
</script>

then inside my body tag:
<body onLoad="resRedirect()//;">


....

it doesn't seem to work.. Is there something wrong ? :( please i hope someone will reply :(

Posted by Jehzeel (http://jehzlau.blogspot.com)on Thursday, 04.5.07 @ 12:35pm | #2830

btw., it works now.. i just changed my .php to .html extension.. hehe.. it doesn't work in php :(

Posted by Jehzeel (http://jehzlau.blogspot.com)on Thursday, 04.5.07 @ 01:07pm | #2831

To all of you that have requested the missing files "lowres.html" and "highres.html"

1.

Open your web page editor and then select

File / New, then type some text on it such as "LOWRES" then go to the File menu and press Save and save it as "lowres.html"

2.

Then edit the text to "HIGHRES" then go to the File menu and press Save As and name it "highres.html"

Simple...

On a side note most users do not know what a resolution is including some people here (the ones that asked how to change a users resolution to match thier site)

So having links on a start up page that ask the user to choose Low res or high res is kinda pointless.

If you want a true site that resizes it self and is totaly resolution independant learn CSS.

Do a search for CSS liquid page designs, these designs will automatically change size without using javascript and when you Restore Down.

Samples:

http://www.maxdesign.com.au/presentation/page_layouts/

Goodluck.


Posted by Stu (http://www.hairypost.com)on Sunday, 04.8.07 @ 09:12am | #2836

WOW Nice very useful nice clap clap for you thx bro!

Posted by Xxchaos-systemxX (http://h4x0rs.789mb.com)on Tuesday, 07.24.07 @ 12:07am | #2951

Hi.

I've been looking for this type of code for the past 3 days. I'm trying to get code to make my site mobile phone friendly. I want mobile phone browsers to automatically goto the /mobileversion of my site.

I've added your code and it works on the PC, but when I try and make my mobile go to the small version. It just stays on the main entry page.

Do I need to do anything different if I'm coding the site for mobile phones?

Posted by Leroy (http://www.lee-osullivan.com/mobiletest/)on Tuesday, 09.4.07 @ 11:35am | #3006

Can anyone please help me out!!! I'm very new to HTML and I created a website using HTML. I need a script that can help me set up all resolutions on one page. Thank you very much!!

Posted by Jason (www.relyad.com)on Wednesday, 11.14.07 @ 01:12pm | #3075

fthdfdgh

Posted by swapnil mantri on Monday, 12.17.07 @ 01:48am | #3128

http://www.hackersgroupofindia.blogspot.com/

Posted by a (http://www.hackersgroupofindia.blogspot.com/)on Friday, 01.25.08 @ 11:08am | #3166

Bravo to everyone asking how to change a visitor's resolution and special thanks to the W3C for not allowing it by specification :)

Regarding the redirection to lowres.html and highres.html, I would actually suggest to include a different CSS for high resolution and low resolution, because this reduces the overhead of doubling the HTML code.

Also, it is possible to include different images on the page depending on the visitors resolution. Lets say we have a div tag that holds the image :
<div>
<script type="text/javascript">
if (screen.width<1280||screen.height<1024)
{
document.write("<img src=\"images/low_res_image.gif\" alt=\"\" border=\"0\" />")/;
}
else
{
document.write("<img src=\"images/high_res_image.gif\" alt=\"\" border=\"0\" />")/;
}
</script>
</div>


images/low_res_image.gif and
images/high_res_image.gif are arbitrary images.

I did not tested the code above, but it should work in all major browsers.

By the way, the same may be achieved by setting the images low_res_image.gif and high_res_image.gif as backgrounds of the div that holds them in two different CSS files (say low_res.css and high_res.css). Then, as I mentioned at the beginning, it is possible to include one of the CSS files depending on the visitor's resolution.

Cheers
and learn CSS:) it's worth it, really :))

Posted by fizilla on Thursday, 02.7.08 @ 03:38am | #3187

hi

Posted by advait (sdas)on Thursday, 03.20.08 @ 04:39am | #3255

it is really good one...

Posted by Vishnu (www.gmail.com)on Tuesday, 03.25.08 @ 07:01am | #3261

it is really good one...

Posted by Vishnu (www.gmail.com)on Tuesday, 03.25.08 @ 07:01am | #3262

..the tutorial didn't work for me.. but the Leandro comments definitely saved my day..

Posted by brianhujung (google.com)on Thursday, 04.10.08 @ 10:22am | #3291

ok

Posted by fatima (fatima)on Wednesday, 04.16.08 @ 10:05pm | #3296

Leave your comment:

Learn how to add this comment form to your site with our comment form tutorial!

Name:

Email:

URL:

Comments:


 
Guess the letters and numbers
(passphrase riddle)
--
'S' +3 letters
followed by
:9:
,
small 'P' +3 letters;
'm'
;
/s/
and
:B:,
3 chars before small I
;
→ retype that here
Enter the correct letters and numbers from the image into the text box. This small test serves as access restriction against malicious bots. Simply reload the page if this graphic is too hard to read.
 

Note: Emails will not be visible or used in any way, and are not required. Please keep comments relevant. Any content deemed inappropriate or offensive may be edited and/or deleted.

No HTML code is allowed. Line breaks will be converted automatically. URLs will be auto-linked. Please use BBCode to format your text.