How to add flags to the google web translator?

Question

I am new to this Google web translator. I want to add flags in front of each language I am using here.

Here is my code:

<div id="google_translate_element">
    </div>
        <script type="text/javascript">
            function googleTranslateElementInit() {
                new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,de,en,fr,ru,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
            }
    </script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>

How to add flags to the google web translator please?

I think this answer may help: http://stackoverflow.com/questions/10486833/implementing-google-translate-with-custom-flag-icons — Ivan Korytin, Apr 24 '13 at 09:01
It's generally a bad idea to ad flags to languages because languages are spoken in different countries. Which flag would you use for English? American flag? British? Australian? What flag for French? French flag, or Belgian flag? — bart, Feb 25 '16 at 21:09

score 2 · Answer 1 · answered Jul 06 '13 at 10:06

<style type="text/css">
    .translation-links {
     text-align:right;
     position:absolute;
     right:0px;
 top:3px;
 }
 .translation-links img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    border:0;
    cursor: pointer;
    margin-right:8px;
    height:24px;
    width:24px;
    }
.translation-links img:hover {
    filter:alpha(opacity=30);
    -moz-opacity: 0.30;
    opacity: 0.30;
    }
  </style>


 <div class="translation-links">
  <a class="english" data-lang="English"><img alt="English" title="English" src="En_flag.png"></a>
  <a class="spanish" data-lang="Spanish"><img alt="Spanish" title="Spanish" src="Es_flag.png"></a>
  <a class="french" data-lang="French"><img alt="French" title="French" src="Fr_flag.png"></a>
  <a class="german" data-lang="German"><img alt="German" title="German" src="De_flag.png"></a>
</div>

<div id="google_translate_element" style="display:none;"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', autoDisplay: false},     'google_translate_element'); //remove the layout
  }
</script>

<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"     type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript">
function triggerHtmlEvent(element, eventName)
{
    var event;
    if(document.createEvent) {
        event = document.createEvent('HTMLEvents');
        event.initEvent(eventName, true, true);
        element.dispatchEvent(event);
    }
    else {
    event = document.createEventObject();
        event.eventType = eventName;
        element.fireEvent('on' + event.eventType, event);
    }
}


       <!-- Flag click handler -->
       var jq = $.noConflict();
 jq('.translation-links a').click(function(e)
{
    e.preventDefault();
    var lang = jq(this).data('lang');
    jq('#google_translate_element select option').each(function(){
    if(jq(this).text().indexOf(lang) > -1) {
        jq(this).parent().val(jq(this).val());
        var container = document.getElementById('google_translate_element');
        var select = container.getElementsByTagName('select')[0];
        triggerHtmlEvent(select, 'change');
    }
    });
});

</script>

How to add flags to the google web translator?

1 Answers1