1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
|
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.<html>
3. <head>
4. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
5. <script type="text/javascript">
6. google.load("language", "1");
7. function translate(lang)
8. {
9. var text = document.getElementById("text").innerHTML; //on récupère le texte d'origine
10. var org = document.getElementById("lang_origin").value;// on récupère la langue d'origine
11. var trans = document.getElementById("translation");// Nom de la div où afficher le texte
12. if (lang == org) // Si te texte choisis est le même que celui d'origine
13. {
14. trans.innerHTML = text;//aucune modification
15. }
16. else //Sinon on le traduit
17. {
18. google.language.translate(text, org, lang, function(result) { //tiré de l'API Google translate
19. if (!result.error) {
20. trans.innerHTML = result.translation;
21. }
22. });
23. }
24. }
25. function chargertxt() //On affiche le texte dans sa langue d'origine au chargement de la page
26. {
27. document.getElementById('translation').innerHTML = document.getElementById('text').innerHTML;
28. }
29. </script>
30. <style type="text/css"> <!-- On n'affiche pas le texte d'origine étant donné qu'il seras affiché dans le div translation-->
31. #text
32. {
33. display:none;
34. }
35. </style>
36. </head>
37.
38. <body onload="chargertxt();">
39. <form action="#" method="post">
40. <select onchange="translate(this.value)"> <!-- Choix des langue, bien sur, ou peu faire la même chose en mettant des liens(avec les drapeaux des pays par exemple) -->
41. <option value="fr">Francais</option>
42. <option value="en">English</option>
43. <option value="es">Español</option>
44. <option value="el">Greek</option>
45. <option value="de">German</option>
46. </select>
47. <input type="hidden" id="lang_origin" value="fr"/>
48. </form>
49. <div id="text">Ici, vous mettez votre texte.</div><!-- on écrit le texte d'origine, normalement, les balises HTML sont prisent en compte par l'API google, donc aucun problème pour mettre des liens ou des images -->
50. <div id="translation"></div><!-- C'est le div qui sera affiché à l'écran -->
51. </body>
52.</html> |