How to add flags to the google web translator? -


i new google web translator. want add flags in front of each language using here.

here 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 add flags google web translator please?

<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 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> 

Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -