When Voce executes the code on the page it generates an HTML in this approximate format:
<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>
Then Voce must first hide the combo with CSS:
#google_translate_element {
display: none;
}
And with javascript you can change the value of the combo by creating icons that are flags for example.
Complete code
See that there is a function called trocarIdioma, she who does the magic, just copy the HTML below and paste into a page and run 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>
If you want the top bar of Google Translator to go away (which I don’t recommend, because I find it relatively useful for when problems occur) just remove the /* and the */ in order to activate the CSS rules I commented on, it should look like this:
<style type="text/css">
#google_translate_element {
display: none;
}
.goog-te-banner-frame {
display: none !important;
}
body {
position: static !important;
top: 0 !important;
}
</style>
This question is relevant, but it seems to me to be wide enough to simply answer. Can you be more specific? For example, clicking on the flag goes to different urls right? what language do you have on the server? know how to take any of the necessary steps? Do you have any idea how to?
– Sergio
Your question is very broad and without evidence of effort. Try to improve by describing the attempts you have already made or what tools you are trying to use. Finally, be a little more specific.
– Anderson Madeira
Your question eh about php or about javascript and google api?
– Guilherme Nascimento
The question was relevant, only it was not well prepared. From what I saw, just follow the steps and provide the necessary information and only. Then enter the code that the wizard gave you where you want the dropdown to appear for the user to choose the language.
– Anderson Madeira
I edited the answer http://answall.com/a/82760/3635 and put an example that is just copy and paste.
– Guilherme Nascimento