Traduction en trois langues et changements graphique

Description

Une manière de publier une seule pages en plusieurs langues à la fois sans attendre l'appel ou la réouverture d'autre pages : dans notre exemple il s'agit d'un formulaire en trois langues : Arabe Suédois et Français. Code très utile pour les sites de cultures, commerces, tourisme, voyages, immigrations, et autres?..
Les traductions des données Et même des Changements graphiques se font immédiatement par une simple clique, et notez bien que le code fonctionne.

une démonstration est disponible ici :
http://abdelaziz.elalia.net

Source / Exemple :

<html>
<head>
<title>multilingue formulaire</title>
<script language="JavaScript">
function Champinfo1()
{frm.nom.focus(); return false;}
function Champage()
{frm.age.focus();return false;}
function Champmail()
{frm.mail.focus();return false;}
function Champsujet()
{frm.sujet.focus(); return false;}
function Champchoix()
{frm.choix.focus(); return false;}
function Champcommentaire()
{frm.commentaire.focus(); return false;}
function ChampB1()
{frm.B1.focus(); return false;} 
/* 
abdelaziz rejeb Elalia Tunisie 
[http://abdelaziz.site.voila.fr] 
pour tout contact: [http://intersite.site.voila.fr] 
Le 20/06/2006


*/ 
function ChangeLangue(message,champ)
{ if(document.getElementById)
document.getElementById(champ).innerHTML = message; }
//Retablir Les Champs
function reset1(){
document.frm.nom.value = "";
document.frm.age.value = "";
document.frm.mail.value = "";
document.frm.sujet.value = "";
document.frm.choix.value = "";
document.frm.commentaire.value = ""; } // Si Vous ajoutez Des Champs Dans Le Formulaire ajoutez des Fonctions Pour Les Rétablir
</script>
</head>
<body onload="ChangeLangue('<center><br>???? ??? ?????? ???? ????? ????????<br>Cliquez Sur Les Drapeaux Pour Changer La langue<br>Klicka På Flaggan Som Motsvarar Ditt Språk</center><br>','affiche_texte');ChangeLangue('<b><font style='font-size: 11pt'><a title='Visitez Le Site Web' href=[http://abdelaziz.site.voila.fr] target=_blank style='text-decoration: none'>Dévelopé Par: Abdelaziz Rejeb , Elalia 7016 - Tunisie </a></b>','affiche_texte2');Champinfo1()" leftmargin="70">
<form name="frm" method="post" target="_blank" action="[http://abdelaziz.site.voila.fr]">
<font style="font-size: 15pt">
<!-- Affichage 1 -->
<div id=affiche_texte></div></font> <div align="center"> <center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="77%" height="214" bgcolor="#E0E9F1">
<tr> <td width="101%" height="6" align="center" colspan="2">
<input size=23 name=formee onfocus="Champinfo1()" style="border:1px solid #E0E9F1; color: #FF0000; background-color: #E0E9F1; font-size:18pt" dir="ltr" value="Multilingue: Formulaire"></td>
</tr> <tr> <td width="101%" height="6" align="center" colspan="2">
<!-- La Traduction Française -->
<img onclick="ChangeLangue('  <img border=0 src=frf.gif> Formulaire De Contact Multilingue Pour Une meilleur Relation ..!<p>','affiche_texte'); ChangeLangue('<b><font style='font-size: 11pt'><a title='Visitez Le Site Web' href=[http://abdelaziz.site.voila.fr] target=_blank style='text-decoration: none'>Dévelopé Par: Abdelaziz Rejeb , Elalia 7016 - Tunisie </a></b>','affiche_texte2'); ChangeLangue('  Visitez Le Site Web Et Laissez Un Message En Français : <a href=[http://abdelaziz.site.voila.fr] target=_blank> [http://abdelaziz.site.voila.fr</a><p>] </p>','affiche_texte3'); body.background=('bg3.gif'); " title=" Français " style="cursor:help" onmousedown="document.frm.formee.value=' Multilingue: Formulaire'; document.frm.info1.value=' Ecrivez Un Message En votre Langue'; document.frm.nome.value=' : Nom Complet';document.frm.agee.value=' : Date De Naissance'; document.frm.maile.value=' : Adresse Email'; document.frm.sujete.value=' : Sujet'; document.frm.choixe.value=' : Votre choix'; document.frm.commentairee.value=' : Commentaire'; document.frm.info2.value=' = Champs obligatoires'; document.frm.B1.value=' Envoyer'; document.frm.B2.value=' Annuler'; " border="0" src="ff.jpg" width="56" height="34"> 
<!-------------Fin------------->
<!-- La Traduction Suedoise --->
<img onclick="ChangeLangue('  <img border=0 src=svf.gif> Detta är FlerSpråkigt Formulär För att underlätta Relationen ..!<p>','affiche_texte');ChangeLangue('<b><font style='font-size: 11pt'><a title='Besök Vår HemSida' href=[http://abdelaziz.site.voila.fr] target=_blank style='text-decoration: none'>Skrivet Av: Abdelaziz Rejeb, Elalia 7016 - Tunisie </a></b>','affiche_texte2'); ChangeLangue('  Besök HemSidan Och Lämna Ett Meddelande På Svenska Språket :<a href=[http://abdelaziz.site.voila.fr] target=_blank> [http://abdelaziz.site.voila.fr</a> http://abdelaziz.site.voila.fr</a>','affiche_texte3');] body.background=('bg2.gif')" title=" Svensk " style="cursor:help" onmousedown="document.frm.formee.value=' FlerSpråkigt Formulär'; document.frm.info1.value=' Var god Skriv till oss På ditt Språk'; document.frm.nome.value=' : Ditt Namn';document.frm.agee.value=' : Födelse Datum'; document.frm.maile.value=' : Emajl Adressen'; document.frm.sujete.value=' : Subjekt'; document.frm.choixe.value=' : Ditt Val'; document.frm.commentairee.value=' : kommentar'; document.frm.info2.value=' = Obligatoriska Rutor'; document.frm.B1.value=' Skicka'; document.frm.B2.value=' Ta Bort'; " border="0" src="fs.jpg" width="56" height="34"> 
<!-------------Fin------------->
<!---- La Traduction Arabe ---->
<img onclick="ChangeLangue('<center>???? ????????? ??????? ??????? ?????? ??????? ? ??? ??????? <img border=0 src=tnf.gif>    </center><p>','affiche_texte'); ChangeLangue('<b><font style='font-size: 11pt'><a title='????? ?????? ??? ?????????' href=[http://abdelaziz.site.voila.fr] target=_blank style='text-decoration: none'>??? ???????? ?? ????? ????????? ??? : ??????? 7016 - ???? </a></b>','affiche_texte2'); ChangeLangue('<center>  <a href=[http://abdelaziz.site.voila.fr] target=_blank> [http://abdelaziz.site.voila.fr</a>] : ????? ?????? ??? ???? ?????????? ??????? ????? ?????? ??????? ?????</center>','affiche_texte3'); body.background=('bg1.gif')" style="cursor:help" onmousedown="document.frm.formee.value=' ???? ?????? ???????? ??????? '; document.frm.info1.value=' ??????? ????? ?????? ??? : ???????? ?????? ??????? '; document.frm.nome.value=' :  ????? ???????';document.frm.agee.value=' : ????? ???????'; document.frm.maile.value=' : ??????? ??????????'; document.frm.sujete.value=' : ???????'; document.frm.choixe.value=' :  ?????????? '; document.frm.commentairee.value=' :  ???? ?????'; document.frm.info2.value=' = ????? ???????'; document.frm.B1.value=' ?????'; document.frm.B2.value=' ?????'; " border="0" src="ft.jpg" width="56" height="34" title=" ????? "></td>
<!------------Fin------------->
</tr><tr> <td width="101%" height="30" align="center" colspan="2">
<input size=39 name=info1 onfocus="Champinfo1()" style="border:1px solid #E0E9F1; color: #008000; background-color: #E0E9F1; font-size:14pt" value="Ecrivez Un Message En votre Langue"></td> </tr> <tr>
<td width="44%" height="5" align="right" style="border-left-width: 1; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">
<input size=25 name=nome onfocus="Champinfo1()" style="border:1px solid #E0E9F1; color: #FF0000; background-color: #E0E9F1; font-size:12px; font-weight:bold" dir="rtl" value="  : Nom Complet"><font color="#FF00FF">*</font> </td>
<td width="56%" height="45" align="left" style="border-left-width: 1; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">
<input type="text" name="nom" size="20"></td> </tr><tr>
<td width="44%" height="22" align="right" style="border-left-width: 1; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">
<input size=25 name=agee onfocus="Champage()" style="border:1px solid #E0E9F1; color: #FF0000; background-color: #E0E9F1; font-size:12px; font-weight:bold" dir="rtl" value=" : Date De Naissance"></td>
<td width="56%" height="45" align="left" style="border-left-width: 1; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">
<input type="text" name="age" size="20"></td> </tr><tr>
<td width="44%" height="22" align="right" style="border-left-width: 1; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">
<input size=25 name=maile onfocus="Champmail()" style="border:1px solid #E0E9F1; color: #FF0000; background-color: #E0E9F1; font-size:12px; font-weight:bold" dir="rtl" value=" : Adresse Email"><font color="#FF00FF">*</font> </td>
<td width="56%" height="45" align="left" style="border-left-width: 1; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">
<input type="text" name="mail" size="20"></td> </tr><tr>
<td width="44%" height="11" align="right" style="border-left-width: 1; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">
<input size=25 name=sujete onfocus="Champsujet()" style="border:1px solid #E0E9F1; color: #FF0000; background-color: #E0E9F1; font-size:12px; font-weight:bold" dir="rtl" value=" : Sujet"></td>
<td width="56%" height="45" align="left" style="border-left-width: 1; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">
<input type="text" name="sujet" size="20"></td> </tr><tr>
<td width="44%" height="11" align="right" style="border-left-width: 1; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">
<input size=25 name=choixe onfocus="Champchoix()" style="border:1px solid #E0E9F1; color: #FF0000; background-color: #E0E9F1; font-size:12px; font-weight:bold" dir="rtl" value=" : Votre Choix"></td>
<td width="56%" height="45" align="left" style="border-left-width: 1; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">
<select size="1" name="choix"> <option selected> </option>
<option value="?????? ???????">?????? ???????</option>
<option value="langue Française">langue Française</option>
<option value="Svensk Språk">Svensk Språk</option>
</select> </td> </tr><tr> <td width="44%" height="97" align="right" style="border-left-width: 1; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">
<input size=25 name=commentairee onfocus="Champcommentaire()" style="border:1px solid #E0E9F1; color: #FF0000; background-color: #E0E9F1; font-size:12px; font-weight:bold" dir="rtl" value=" : Commantaire"><font color="#FF00FF">*</font> </td>
<td width="56%" height="97" style="border-left-width: 1; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">
<textarea rows="4" name="commentaire" cols="20"></textarea></td>
</tr> <tr> <td width="100%" height="49" align="right" colspan="2"> <p align="left">
<font color="#000080"> </font><font color="#FF00FF">*</font><input size=29 name=info2 onfocus="ChampB1()" style="border:1px solid #E0E9F1; color: #008000; background-color: #E0E9F1; font-size:14pt" dir="ltr" value=" = Champs obligatoires">
<input type="submit" value="Envoyer" name="B1">
<input onclick="reset1();" type="button" value="Annuler" name="B2">
</td> </tr> <tr> <td width="100%" height="48" align="center" colspan="2"> 
<!-- Affichage 2 -->
<div id=affiche_texte2></div>
</td> </tr> </table></center> </div>
<!--/* 
abdelaziz rejeb Elalia Tunisie 
[http://abdelaziz.elalia.org] 
pour tout contact: [http://abdelaziz.elalia.net] 
Le 20/06/2006


*/-->
</form> <font style="font-size: 12pt"> 
<!-- Affichage 3 -->
<div id=affiche_texte3></div> </font>
</body>
</html>

Conclusion :

La même chose peut se faire de plusieurs autres façons ? bref.. ! Pour Un meilleur affichage Téléchargez Le Zip, Personnalisez les paramètres et ne compliquez pas les choses.
pour avoir de l'aide :
http://abdelaziz.elalia.net

Codes Sources

A voir également

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.