Multiple Language Welcome PHP Script

How to have a multilingual welcome on your website!

If you would like to welcome visitors to your own website, by directing visitors based on their prefered language, this is how I do it.

The technology is PHP, which is a simple language that adds a level of capability and dynamic that you can't have with Javascript and HTML. Obviously you need access to PHP. Most hosts do provide it.. but this is one step beyond Geocities. If your host doesn't offer PHP.. maybe get one that does - it's not expensive.

The script below simply redirects incoming requests to pages associated with the first two letters of the code in the language preference of the visitors browser settings.

The two files you need are index.txt and fish-config.txt

Download these text files by right-clicking the links and choosing save-as. Rename the first 'index.html' and the second 'fish-config.php'.

The index.html is the root index file you'll likely recognise. This doesn't actually do any more than redirect requests to files listed in the config file. fish-config.php is a file that index includes when it is run. i.e. you need PHP includes enabled, and to put this file in the PHP includes folder.

The script is an improved version of one I found on the net years ago. It has better security and handles more variety of input from browsers language preference.. stripping the dialects to find the core language.. it can also now handle upto 100 languages. Don't try changing it unless you are confident in PHP, you can open holes in security with badly coded PHP.

Four things to do..

1. fish-config.php - add lines to as needed but adjust the $count variable, keeping it one above the last array record number.

2. fish-config.php & index.html - change the http://www.example.com/ to reflect your own site.

3. index.html - Change line 40 $redirect = 'babel/index.html'; to suggest the location of a default file.. for when someone doesn't have a language preference in the get request.

4. index.html - Change line 35 $redirect = 'error/bad-request.html'; to suggest the location of your error file for HTTP code 400 Bad Request


That's about it..

You can find the codes for languages on The ISO639-1 language code list

Good luck.. any problems let me know.

The PNG problem in Windows Internet Explorer

This site is all about a JavaScript-based PNG fix for Internet Explorer 5.5 and 6 on Windows. The fix allows IE to properly render PNG alpha transparency. If you want to get straight to the script, go to the how-to page and follow the instructions there. If you have the time for a description and demo of the problem, then read on...

Why only versions 5.5 & 6? Because Windows IE versions prior to 5.5 do not support the filter which fixes the PNG problem, and version 7 (not yet released at the time of writing in January 2006) is reported to have fixed the issue entirely.

The code can be used either by a one-time copy-and-paste or as an include file. The entire thing is completely ignored by all other browsers - in fact it is treated as an HTML comment - thanks to IE's conditional comments. This solution is therefore light, portable and non-invasive to other browsers.

Already use the script? You can check the change log for details of what's new. Please feel free to use or amend this routine you as see fit.

March 2008: This script has been up for over 4 years now but I'm afraid I haven't the time to update it. I will leave it here for those who still can use it, but there may be better solutions around these days, such as Drew McLellans. I'm very sorry but I can no longer respond to any email about it - I just don't have the time. There is no official licence of any kind on this - it's simply freeware. Use it or change it as you wish.

Consider a standard GIF image with the halo problem. GIFs only allow one colour for background transparency, so a GIF placed over the intersection of another colour looks ghastly:

Drag me around the page!

Compare the above GIF to the same image below saved as a PNG. On modern browsers (Firefox, Opera etc), the halo problem is solved - but not in Windows Internet Explorer prior to version 7. IE 6 and under render the image with an ugly background which looks even worse than the GIF halo.

Finally, here is the same PNG right-aligned to this paragraph using the very common (deprecated) img align="right" construct. The PNG can be positioned in the same way as JPGs or GIFs, but the transparency issue remains a problem.

The GIF with the halo is still here, but the PNGs should now be working in IE versions 5.5 and 6. The only difference between this page and the previous one is a chunk of JavaScript.

Drag me around the page!

Compare the above GIF to the same image below saved as a PNG. The transparency should now be working in IE. Try dragging the car image around the screen and notice how it is "see-through".

Finally, here is the same PNG right-aligned to this paragraph using the very common (deprecated) img align="right" construct. The PNG can be positioned in the same way as JPGs or GIFs, and the transparency issue is now fixed.

The JS code can be seen if you do a "View Source" on the Solution page. There are two ways to use it - simple copy & paste or the JS include file method. Note that you must have height and width attributes specified for each image. Other attributes (class, alt, title & style) are optional so far as this routine is concerned, but are respected if specified.

There is also an imagemap version if you want to use imagemaps and/or form input images and a rollover version which enables the use of transparent PNGs in rollovers.

Method 1: Copy & Paste

For single page or occasional usage, copy the JS code in its entirety (from ) and paste it into your page somewhere in the the section. That's it.

Method 2: (recommended) JS Include File

If you wish to use the code on multiples of pages, you may prefer to use a JS include file. First, download the JS file here: pngfix.js. Place the file in your webpage directory, then add the following construct on each of your pages somewhere in the section:

Note the use of the defer keyword. This trick causes the images to be replaced before they are rendered. Earlier versions of this script did not use this method, occasionally resulting in an unpleasant screen flicker as the PNGs were being filtered. The code in the include file is slightly different from the copy and paste code referred to above, so I recommend downloading my file rather than making your own.

Here is a demo page using the Include file method. This method is arguably better for use with multiples of pages, as it only requires three lines of code per page. The JS file is only 2KB in size and will be cached after the first download. It will therefore incur no further download overhead on subsequent pages. The download time should be around 0.3 seconds on an average 48kbps dial-up modem connection.