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
Post a Comment