www.webdeveloper.com
Results 1 to 2 of 2

Thread: Embedding language translation feature into website

Hybrid View

  1. #1
    Join Date
    Sep 2012
    Posts
    22

    Embedding language translation feature into website

    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.

  2. #2
    Join Date
    Sep 2012
    Posts
    22
    Bump....

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles