javascriptgoogle-translatebing-translator-api

Specify specific language to translate website on image click


I have two images on my website, lets say English and Korean. I want my webpage to be translated to Korean when the user clicks the Korean Flag and back to English when the user clicks England.

I would like probably a javascript function to be used on the onclick event of each image which would then call either Google Translate API or Microsoft Translate API and return the translated page.

I don't know if this is possible but if it is, I would really appreciate this. Adding the plugin directly though, is not an option available to me at this moment.

Thanks...


Solution

  • after digging hard...I've come up with a solution with Bing Translate...

    You can comment the alerts... And also 60000 here means an error will be displayed if translation is not completed in 60seconds...

    <!-- The image showing korean -->
    <img id="Koebtn" src="images/SP2.jpg">
    
    
    <!-- The Code to translate -->
    <script src="http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**" type="text/javascript"></script>
        <script type="text/javascript">
       $(document).ready(function() {
          $("#Koebtn").click(function(){
    
             if (document.readyState == 'complete') {
                    Microsoft.Translator.Widget.Translate('en', 'es', onProgress, onError, onComplete, onRestoreOriginal, 60000);
                }
    
                //You can use Microsoft.Translator.Widget.GetLanguagesForTranslate to map the language code with the language name
            function onProgress(value) {
                document.getElementById('counter').innerHTML = Math.round(value);
            }
    
            function onError(error) {
                alert("Translation Error: " + error);
            }
    
            function onComplete() {
                document.getElementById('counter').style.color = 'green';
            }
            //fires when the user clicks on the exit box of the floating widget
            function onRestoreOriginal() { 
                alert("The page was reverted to the original language. This message is not part of the widget.");
            }
    
          });
       });
    </script>