How to add flags to the google web translator? - google-translate

Question

I am new to this Google web translator. I want to add flags in front of each language I am using here.
Here is my code:
<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>
How to add flags to the google web translator please?

Answer 1

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