Clever Geek Handbook

Different image sources for different locales

Is it possible to have a different image source for different browser locales? Images are saved locally. One for English and one for German. So, if I launch a browser in German, it should show a German image. And it's the same for English.

+3


source to share


3 answers


You can detect the langauge of the browser with:

var language = window.navigator.userLanguage || window.navigator.language;
alert(language);


Now you can check for a value language

that can indicate where to read images.

Another option is to prefix the image with a language, for example. en-USMyPic.jpg

and then through JS read the image.

+3


source


Use : lang () pseudo class selector. Let image sources have an attribute lang

.



:lang(en) {
  background-image: url('http://placehold.it/200x200');
  width: 200px;
  height: 200px;
}
:lang(de) {
  background-image: url('http://placehold.it/300x300');
  width: 300px;
  height: 300px;
}
      

        
        
        
      

    
<div lang="en">For English users</div>
<div lang="de">For German Users</div>
Run codeHide result


0


source


Manoj's answer doesn't quite answer the question. But a little tweak can make it work.

Your typical markup would look something like this, with an attribute lang

defined in the tag <html>

:

<html lang="en">
...
   <div class="lang-specific"></div>
...
</html>

The CSS would look something like this:

:lang(en) .lang-specific {
   /* English styles here */
}

:lang(de) .lang-specific {
   /* German styles here */
}
0


source






More articles:


All Articles