如何向谷歌网络翻译器添加标志？答案

【问题标题】：How to add flags to the google web translator?如何向谷歌网络翻译器添加标志？
【发布时间】：2013-04-11 18:34:02
【问题描述】：

我是这个谷歌网络翻译的新手。我想在我在这里使用的每种语言前面添加标志。

这是我的代码：

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

请问如何给谷歌网页翻译器添加标记？

【问题讨论】：

我认为这个答案可能会有所帮助：stackoverflow.com/questions/10486833/…
向语言添加标志通常是个坏主意，因为不同的国家/地区使用不同的语言。你会用哪个标志来表示英语？美国国旗？英国？澳大利亚人？法国的国旗是什么？法国国旗还是比利时国旗？

标签： google-translate

【解决方案1】：

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

【讨论】：