I've been tasked with writing some code, that places a small icon in the top right corner of an Ad regardless of size. Depending on the language of the user (in this case I'm using the browser language) it will change the icon (based on a bank of images on a server somewhere) and will subsequently change the URL of the click through for that image. I know that I can get this to work by reading the OS language with the HTTP header, but I can't do this and it needs to be done server side. The script was written by me but the HTML was inherited by someone else - I also have the ability to edit both.
Currently the code works in Firefox, Chrome and Opera but will not work when I make the default browser language another European language (say French) in IE and Safari..!! This is driving me mad now so if you can help me I'd be so grateful. On some advice, there is a live example here:
Live demo: http://jsfiddle.net/Juu7t/
EDIT: Right so after playing around with the code, I still can't see why it doesn't work. What is essentially happening is the default image will load (for IE and Safari) but it won't swap the image based on the browser language. The JavaScript console doesn't show any errors and Firebug isn't helping me!
EDIT2: Right so I wrote this small function to test whether Internet Explorer is actually reading the language correctly. (I'm using IE9):
function checkIE () {
if ((navigator.browserLanguage) || (window.navigator.language)) {
var testbrowser = navigator.browserLanguage || window.navigator.language;
alert(testbrowser);
}
}
checkIE();
Even when I change the language in IE to "French" i.e. "fr" it still returns "en-US"!! am I doing something wrong or am I reading the wrong value from the navigator object?!