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>