4

Como colocar imagens de bandeiras de idiomas, e ao clicar na bandeira, todo o conteúdo do site muda de idioma?

Eu estou usando esse código:

html:

<div id="google_translate_element" class="boxTradutor"></div>

JavaScript:

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'pt', includedLanguages: 'en,pt', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Existe como colocar bandeiras, ao invés de campo select ?

Código pego em: https://translate.google.com/manager/website/

5
  • 1
    Esta pergunta é relevante mas parece-me bem ampla para poder ser respondida simplesmente. Podes ser mais específico? Por exemplo, clicando na bandeira vai para urls diferentes certo? que linguagem tens no servidor? sabes como dar algum dos passos necessários? tens alguma ideia de como fazer?
    – Sergio
    Commented 26/08/2015 às 19:00
  • 1
    Sua pergunta é muito ampla e sem indícios de esforço. Tente melhorar descrevendo as tentativas que já fez ou que ferramentas está tentando usar. Enfim, ser um pouco mais específico. Commented 26/08/2015 às 19:01
  • A tua pergunta eh sobre php ou sobre javascript e google api?
    – Syzoth
    Commented 26/08/2015 às 19:13
  • A pergunta era relevante, só não estava bem elaborada. Pelo que vi, basta seguir os passos e prover as informações necessárias e só. Depois coloca o código que o assistente te deu onde você quer que apareca o dropdown para o usuário escolher o idioma. Commented 26/08/2015 às 19:35
  • Eu editei a resposta pt.stackoverflow.com/a/82760/3635 e coloquei um exemplo que é só copiar e colar.
    – Syzoth
    Commented 1/02/2017 às 23:33

1 Resposta 1

4

Quando voce executa o codigo na pagina ele gera um HTML neste formato aproximado:

<div id="google_translate_element">
    <div class="skiptranslate goog-te-gadget" dir="ltr">
        <div id=":0.targetLanguage">
            <select class="goog-te-combo">
                <option value="">Selecione o idioma</option>
                <option value="af">africâner</option>
                <option value="ar">árabe</option>
            </select>
        </div>Powered by 
        <span style="white-space:nowrap">
            <a class="goog-logo-link" href="https://translate.google.com" target="_blank">
                <img src="https://www.google.com/images/logos/google_logo_41.png" width="37px" height="13px" style="padding-right: 3px">Tradutor
                </a>
            </span>
        </div>
    </div>

Entao voce tera que primeiro ocultar o combo com CSS:

#google_translate_element {
    display: none;
}

E com javascript você pode trocar o valor do combo criando icones que são bandeiras por exemplo.

Código completo

Veja que existe uma função chamada trocarIdioma, ela quem faz a mágica, basta copiar o HTML abaixo e colar em uma página e rodar via Apache (http://localhost)

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #google_translate_element {
        display: none;
    }
    /*
    .goog-te-banner-frame {
        display: none !important;
    }
    body {
        position: static !important;
        top: 0 !important;
    }
    */
    </style>
</head>
<body>
    <div id="google_translate_element" class="boxTradutor"></div>

    <a href="javascript:trocarIdioma('es')"><img alt="espanhol" src="images/es.png"></a>
    <a href="javascript:trocarIdioma('en')"><img alt="ingles" src="images/en.png"></a>

    <p>Olá, mundo!</p>


    <!-- O Javascript deve vir depois -->

    <script type="text/javascript">
    var comboGoogleTradutor = null; //Varialvel global

    function googleTranslateElementInit() {
        new google.translate.TranslateElement({
            pageLanguage: 'pt',
            includedLanguages: 'en,es',
            layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
        }, 'google_translate_element');

        comboGoogleTradutor = document.getElementById("google_translate_element").querySelector(".goog-te-combo");
    }

    function changeEvent(el) {
        if (el.fireEvent) {
            el.fireEvent('onchange');
        } else {
            var evObj = document.createEvent("HTMLEvents");

            evObj.initEvent("change", false, true);
            el.dispatchEvent(evObj);
        }
    }

    function trocarIdioma(sigla) {
        if (comboGoogleTradutor) {
            comboGoogleTradutor.value = sigla;
            changeEvent(comboGoogleTradutor);//Dispara a troca
        }
    }
    </script>
    <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>

Se quiser que a barra superior do Google Tradutor suma (o que não recomendo, pois acho ela relativamente útil para quando ocorrem problemas) basta remover o /* e o */ para que ative as regras no CSS que eu comentei, deve ficar assim:

<style type="text/css">
#google_translate_element {
    display: none;
}
.goog-te-banner-frame {
    display: none !important;
}
body {
    position: static !important;
    top: 0 !important;
}
</style> 
8
  • Quando eu seleciono algum idioma aparece uma barra no topo, como ocultar isso? Commented 1/02/2017 às 23:40
  • @SérgioMachado vou tentar, não tenho certeza, já te aviso
    – Syzoth
    Commented 1/02/2017 às 23:41
  • @SérgioMachado pronto, resposta editada.
    – Syzoth
    Commented 1/02/2017 às 23:55
  • 1
    Show demais cara, você é fera, muito obrigado mesmo \o/ Commented 1/02/2017 às 23:59
  • 1
    @Predoff não ouvi falar nada a respeito, mas eles limitam por IP, mas como cada visitante tem um IP então não vai afetar, só afetaria se você criasse um script que usasse os serviços deles indevidamente, é improvavel que um usuário comum faça milhares de traduções por dia. Mas vou ler pra ver se tem alguma coisa antes de lhe confirmar.
    – Syzoth
    Commented 31/01/2020 às 19:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .