- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <script type="text/javascript" src="http://www.google.com/jsapi"></script>
- <script type="text/javascript">
- google.load("language", "1");
- function translate(lang)
- {
- var text = document.getElementById("text").innerHTML; //on récupère le texte d'origine
- var org = document.getElementById("lang_origin").value;// on récupère la langue d'origine
- var trans = document.getElementById("translation");// Nom de la div où afficher le texte
- if (lang == org) // Si te texte choisis est le même que celui d'origine
- {
- trans.innerHTML = text;//aucune modification
- }
- else //Sinon on le traduit
- {
- google.language.translate(text, org, lang, function(result) { //tiré de l'API Google translate
- if (!result.error) {
- trans.innerHTML = result.translation;
- }
- });
- }
- }
- function chargertxt() //On affiche le texte dans sa langue d'origine au chargement de la page
- {
- document.getElementById('translation').innerHTML = document.getElementById('text').innerHTML;
- }
- </script>
- <style type="text/css"> <!-- On n'affiche pas le texte d'origine étant donné qu'il seras affiché dans le div translation-->
- #text
- {
- display:none;
- }
- </style>
- </head>
-
- <body onload="chargertxt();">
- <form action="#" method="post">
- <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) -->
- <option value="fr">Francais</option>
- <option value="en">English</option>
- <option value="es">Español</option>
- <option value="el">Greek</option>
- <option value="de">German</option>
- </select>
- <input type="hidden" id="lang_origin" value="fr"/>
- </form>
- <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 -->
- <div id="translation"></div><!-- C'est le div qui sera affiché à l'écran -->
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
function translate(lang)
{
var text = document.getElementById("text").innerHTML; //on récupère le texte d'origine
var org = document.getElementById("lang_origin").value;// on récupère la langue d'origine
var trans = document.getElementById("translation");// Nom de la div où afficher le texte
if (lang == org) // Si te texte choisis est le même que celui d'origine
{
trans.innerHTML = text;//aucune modification
}
else //Sinon on le traduit
{
google.language.translate(text, org, lang, function(result) { //tiré de l'API Google translate
if (!result.error) {
trans.innerHTML = result.translation;
}
});
}
}
function chargertxt() //On affiche le texte dans sa langue d'origine au chargement de la page
{
document.getElementById('translation').innerHTML = document.getElementById('text').innerHTML;
}
</script>
<style type="text/css"> <!-- On n'affiche pas le texte d'origine étant donné qu'il seras affiché dans le div translation-->
#text
{
display:none;
}
</style>
</head>
<body onload="chargertxt();">
<form action="#" method="post">
<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) -->
<option value="fr">Francais</option>
<option value="en">English</option>
<option value="es">Español</option>
<option value="el">Greek</option>
<option value="de">German</option>
</select>
<input type="hidden" id="lang_origin" value="fr"/>
</form>
<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 -->
<div id="translation"></div><!-- C'est le div qui sera affiché à l'écran -->
</body>
</html>