Traduction de texte

Soyez le premier à donner votre avis sur cette source.

Snippet vu 15 616 fois - Téléchargée 16 fois

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

Ajouter un commentaire

Commentaires

Signaler
Bul3
Messages postés
4934
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
 7 -
intéressant.
un textarea, par exemple, à la place du div "text"
permettrait la saisie du texte à traduire.
@+
Signaler
cs_Kimjoa
Messages postés
264
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014
 -
super , je savais pas que l'on pouvait faire ça avec google. on pourrais même envisager de remplacer tout les nœuds texte d'une page ou d'un wysiwyg, si la traduction est efficace... a+
Signaler
XtremDuke
Messages postés
631
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
 3 -
Très bonne idée de faire découvrir cette api.
Source qui a son utilité ! Et pour la première fois, je vais mettre une note tient...
Signaler
zoby44
Messages postés
817
Date d'inscription
vendredi 3 novembre 2006
Statut
Membre
Dernière intervention
14 décembre 2010
 -
Merci pour vos commentaires. Après, on peux imaginer tout ce que l'on veux. Créer un outil de traduction avec un textarea(comme le dit BUL3) ou même créer tout son site dans le div "text". Pratique pour rendre un site entièrement traductible.
Signaler
CodeurleGeek
Messages postés
5
Date d'inscription
mercredi 19 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2008
 -
Super, j'ai utilisé un div et le rendu est nickel !
Super, I used a div and the record is nickel!
Super, he usado un div y el registro es de níquel!
Super, ?a ???s?µ?p????se ??a div ?a? t? ??????? e??a? ?e???!
Super, habe ich einen div und das Rendering Nickel!

(Ca traduit pas super !)

Bravo quand même !
Afficher les 15 commentaires
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)