Traduction de texte

Commenter

Contenu du snippet

Bonjour a tous, tout d'abord, je précise que c'est la première source que je dépose ici.
Entrons dans le vifs du sujet.Ce que je vous propose, c'est un système permettant de traduire une div grâce à l'API de Google translate. Vous pouvez utilisez toutes les langues traduites par google, ce script est assez simple, mais efficace (enfin je pense ^^,). L'avantage, par rapport à l'exemple fournis par google, c'est que si l'on décide de revenir à la langue d'origine, il n'y a pas de double traduction. Assez de blabla, place au code :

Source / Exemple : 


<!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>

Conclusion :


Ça, c'est fait ! Maintenant, libre à vous de le customiser comme bon il vous semble. J'ai décidé d'utiliser <style></style> car je ne trouvais pas nécessaire de créer un CSS juste pour une ligne. N'hésitez pas à laisser vos commentaires.

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (zoby44)