<style type="text/css">
.translation-links {
text-align:center;
position:absolute;
left:620px;
top:15px;
}
.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 data-lang="en"><img src="usa.png"></a>
<a data-lang="es"><img "src="spain.png"></a>
<a data-lang="fr"><img "src="france.png"></a>
</div>
<div id="google_translate_element" style="display:none;"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'pt', includedLanguages: 'en,es,fr'}, 'google_translate_element');
}
</script>
<script src="modules/mod_jpagetranslator/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>