Question

I’m trying to develop a bit of JavaScript that will detect the language of a browser (trivial as it uses navigator.Browserlanguage and window.navigator.language) and based upon this will display a certain image to the user. For example, if the browser language is “en-GB” it will display a certain image and if it’s “fr” then it will display a different image and so on.

Currently the code I’ve got loops through the array to detect browser language and displays “language supported”. It works fine as I’ve tested it in FF, IE, Chrome, Safari and Opera but now I need to know if there is a way for me to display an image based on what the browser language is. Is there a way for me to do this? I.e. do I link 2 arrays together (is this even possible?) or can I just use an array of images and have the corresponding images the same position in the array as the text? How would I go about achieving this?

Here’s the code I’ve got so far:

var IAB_Array = new Array("en","en-GB","en-US","fr","de","en-gb","en-us"); 
var lang = IAB_lang_detect(); 
if(lang) document.write('Language supported');

function IAB_lang_detect() {
    if ((navigator.browserLanguage) || (window.navigator.language)) {
    for (var i=0;i<IAB_Array.length;i++) {
        if((IAB_Array[i]==navigator.browserLanguage) || (IAB_Array[i]==window.navigator.language)) {
            return true;
        }
    }
}
return false;
}

Any help would be much appreciated!

Thanks

Answer 1

Instead of using strings inside of the array, insert an object:

IAB_Array = [
  {lang: "en", image: "english.png"},
  {lang: "en-GB", image: "en_gb.png"},
  ...
];

You can then find the properties of that object using IAB_Array.lang or IAB_Array["lang"].