如何将标记添加到Google网络翻译器? [英] How to add flags to the google web translator?

问题描述

我是这个Google网络翻译的新手.我想在这里使用的每种语言之前添加标记.

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

这是我的代码:

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

如何向Google网络翻译添加标记?

How to add flags to the 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 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>

这篇关于如何将标记添加到Google网络翻译器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！