Hi all,

I am having an issue trying to embed a feature that allows a user to translate a webpage into the country of their choice.

Below, I have two sections of code and need to try take from both of them and make one section.

Let me explain...

First Part:

This code is from Google, it embeds a dropdown box where the user can select which language he/she would like.
Then it automatically translates the entire page to that language. (Which is the one part I want to keep)

Paste this code onto your website
Copy and paste the following code snippets onto every page you want to translate
Place this meta tag before the closing </head>
Code:
<meta name="google-translate-customization" content="32c2c762573f4c29-f694ecbfa1146c29-gb7889196ce7269c6-14"></meta>
Place this snippet where you'd like to display the Website Translator plugin on your page
Code:
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true, gaTrack: true, gaId: 'UA-32178549-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Now for the second part:

This code embeds flags of each language (which I want to use) on the webpage, except when a user clicks it, they are directed to the Google Translate site.
Code:
<form action="http://www.google.com/translate" >
<script language="JavaScript">
<!-- 
document.write ("<input name=u value="+location.href+" type=hidden>") 
// --> 
</script>

<input name="hl" value="en" type="hidden">
<input name="ie" value="UTF8" type="hidden">
<input name="langpair" value="" type="hidden">
<input name="langpair" value="en|fr" title="French" src= "http://photos1.blogger.com/img/43/1633/320/13539949_e76af75976.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="en|de" title="German" src= "http://photos1.blogger.com/img/43/1633/320/13539933_041ca1eda2.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="en|it" title="Italian" src= "http://photos1.blogger.com/img/43/1633/320/13539953_0384ccecf9.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="en|pt" title="Portuguese" src= "http://photos1.blogger.com/img/43/1633/320/13539966_0d09b410b5.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="en|es" title="Spanish" src= "http://photos1.blogger.com/img/43/1633/320/13539946_2fabed0dbf.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="en|ja" title="Japanese" src= "http://photos1.blogger.com/img/43/1633/320/13539955_925e6683c8.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="en|ko" title="Korean" src= "http://photos1.blogger.com/img/43/1633/320/13539958_3c3b482c95.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="en|zh-CN" title="Chinese Simplified" src= "http://photos1.blogger.com/img/43/1633/320/14324441_5ca5ce3423.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair2" value="en|ar" title="Arabic" src= "http://photos1.blogger.com/blogger/3709/485/1600/arabic-flag.gif" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30" />
</form>
Is there any way some one on here can help me out with this, I need to have the different flags shown as it is in the second part, but when I click on which ever flag, it needs to translate the webpage as if I was using the dropdown box in the first part.

Sorry for a long post.