The vast majority of browsers are now able to use SSL to transmit data securely to the server. However, a few people are still unable to use SSL, either becuase their browser doesn't support it or because their network blocks the necessary port (usually 443). Sometimes this is because their network administrators are just clueless, and sometimes it's because they don't want to allow connections unless they can control them and filter them for subversive materials or sites that contain rude words.
Some sites try to get around this by making the use of SSL voluntary, and having people click a little link if they're able to use it, but unfortunately the users typically have not the remotest clue what SSL is.
The method I suggest here allows us to check whether SSL is working for the user or not, and set a cookie that we can use to give them the appropriate content. It all works behind the scenes, and is client-side only so it can be used in static HTML pages.
Once we've got the cookie set, we'll be able to use it either to write https-enabled links on the pages leading to the SSL-enabled content or to redirect people making a request via http to the equivalent HTTPS address.
This method is based on my old server-racing code. We'll simultaneously try to download the same image, once over plain old HTTP and once using HTTPS. If the HTTPS one arrives intact, we'll know that the user can use SSL. If the HTTP one arrives and the HTTPS one, after a reasonable amount of time, doesn't, we'll assume that the user can't use SSL, and set a cookie to that effect. And if we don't get any images at all, the server's probably broken or the user has told the browser to stop downloading things, so we'll give up and forget about the whole thing.
Let's try it now, with a couple of visible images we'll pinch from amazon.com:
To see what cookie has been set, if any, take a look at the BrowserSSLLooksOK cookie.
You can download the script here.
Somewhere on the page you'll need to call up the images, like I did with the Amazon ones above. If you have the images hard-coded into the script, like I do, you can do it like this:
<script language="JavaScript1.2"> <!--// writeImageTags(); //--> </script>
Alternatively, you may want to ignore whatever images are hard-coded in the script, and put them in your HTML page instead:
<script language="JavaScript1.2">
<!--//
writeImageTag('https://www.yoursecurewebsite.com/yourimage.gif','https');
writeImageTag('http://www.yournormalwebsite.com/yourimage.gif','http');
//-->
</script>
I have mine at the bottom of the page, and conceal it using Cascading Style Sheets, embedded in the head of the document, like this:
<style TYPE="text/css">
<!--
img.hidden { visibility: hidden }
-->
</style>