It is currently Wed 28 Sep 2016 - 19:03 - créer un forum

Présentation Automatique V2

Skip to content

Post new topic Reply to topic Goto page: 1, 2, 3, 4  >

Présentation Automatique V2
Author Message
biloute54


Offline
Guest




PostPosted: Thu 31 Dec 2009 - 17:19    Post subject: Présentation Automatique V2 Reply with quote

PublicitéSupprimer les publicités ?
Informations



Informations sur le tutoriel
NomPrésentation Automatique V2
AuteurBiloute54(MP)
VersionVersion actuelle V2.1 (du 07/01/2010)
Description
Ce tutoriel va vous expliquer comment faire une présentation Automatique pour vos membres.
Cette version utilise un formulaire présent sur votre forum et personnalisable à volonté.
Quelles que notions de HTML sont indispensable pour personnaliser ce formulaire.
ExempleVous pouvez tester à volonté ce tutoriel sur ce forum de testhttp://test-hyosung.xooit.fr/index.php
Défaut(s)
  • Aucun pour le moment

Difficulté
  • Installation: initié
  • Compréhension: adepte

Templates à modifier
  • viewforum_body.tpl
  • index_body.tpl

Testé sur
  • Navigateurs
    • Firefox, IE, Safari, Opéra

  • Thèmes Xooit
    • tous


A utiliser avec


A ne pas utiliser avec


Notes
  • Permet d'avoir des présentations homogènes sur votre forum, vos futurs membres
  • n'auront plus a se creuser la tête pour savoir quoi mettre dans leur présentation.







Installation
Il est conseillé d'effectuer une sauvegarde avant de réaliser ce tutoriel.Pour cela, cliquez sur le champs de texte et appuyez sur Ctrl+A et Ctrl+C. Ouvrez votre éditeur de texte préféré et faites Ctrl+V.


1er Cas de figure:
vous voulez installer uniquement le formulaire dans le sous forum de présentation.
Cela implique que le nouveau membre fasse la démarche d'aller remplir le formulaire dans le sous forum présentation.
Quelque images pour illustrer ce commentaires:

Ouvrir le formulaire


Se servir du formulaire


Le résultat final


Ouvrez le template viewforum_body.tpl

Au début du template, Ajoutez ce code
Code: Sélectionner - Agrandir


<!-- IF FORUM_ID == "4" -->
<NOSCRIPT>
<font color=red><marquee><b>Vous devez activer Javascript dans votre navigateur pour pouvoir utiliser la Présentation Auromatique</b></marquee></font>
</NOSCRIPT>
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
  function Pseudo (str) {
   var str = str.replace(/^\s\s*/, ''),
   ws = /\s/,
   i = str.length;
   while (ws.test(str.charAt(--i)));
   return str.slice(0, i + 1);
      }
   var wcptpost=0;
   var pseudonyme= "invité(e)" ;
   var wforum=window.location.hostname;
   var pseudo="{L_LOGIN_LOGOUT}";
   var biloute1 = pseudo.indexOf("[")
   if (biloute1>-1){
   var biloute2 = pseudo.indexOf("]",biloute1);
   pseudonyme=Pseudo(pseudo.substring(biloute1+1,biloute2-1));
      }
   var biloute = new Object();
   biloute.agrave  = unescape('%E0');
   biloute.cfg = new Object(); 
   biloute.getXhr = function() {
            var result = false;
            if (window.XMLHttpRequest) {
               result = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
               try {
                 result = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                 result = new ActiveXObject("Microsoft.XMLHTTP");
               }
            }
            return result;
         }
   biloute.getbody = function(content) {
         test = content.toLowerCase();
         var x = test.indexOf("<body");
         if(x == -1) return "";
         x = test.indexOf(">", x);
         if(x == -1) return "";
         var y = test.lastIndexOf("</body>");
         if(y == -1) y = test.lastIndexOf("</html>");
         if(y == -1) y = content.length;
         return content.slice(x + 1, y);
      }

   biloute.post = function(titre, message) {
         var url = ('{U_POST_NEW_TOPIC}').replace('&amp;','&');
         var xhr = biloute.getXhr();
         xhr.open('GET', url, false);
         xhr.send(null);
         var content = xhr.responseText;
         delete xhr;
         
         // Récupération du formulaire correct
         document.getElementById('biloute').innerHTML = biloute.getbody(content);
         var forms = document.getElementById('biloute').getElementsByTagName('form');
         for(var t=0; t<forms.length; t++) {
            if(forms[t].action.match('posting.php')) {
               var form = forms[t];
               break;
            }
         }
// Récupération des champs de formulaire
         var request = new Object();
         for(var t=0; t<form.elements.length; t++) {
            var name = form.elements[t].name;
            if(name!=='') {
               if(form.elements[t].nodeName.toLowerCase()=='input') {
                  if(form.elements[t].type.toLowerCase()=='radio' || form.elements[t].type.toLowerCase()=='checkbox') {
                     if(!form.elements[t].checked) continue;
                  }
               }
              if(name.match(/^m[0-9]+$/)) var content = name;
               request[name] = form.elements[t].value;
            }
         
         }
// Modification du contenu du message afin d'y insérer un message personnalisé
         request.username =  (pseudonyme) ;
         request.subject = 'Présentation de   ' +(pseudonyme)  ;
         titre = (pseudonyme);

// Reconstitution du message dans le post de présentation       
         request[content] = '[color=#DB2A4D][b][size=14]'+'Présentation de   ' +(pseudonyme)+'[/color][/b][/size]'+'\n\n' +'[color=#DB942A][b]'+ 'Mon prénom :' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_prenom.q8_Monprnom.value +'[/color]'+'\n\n'+'[color=#DB942A][b]'+ 'Mon age :' +'[/color][/b]'+ '[color=#315DD5]'+document.form_age.q23_age.value +'[/color]'+'\n\n'+'[color=#DB942A][b]'+ 'Ma ville / région :' +'[/color][/b]'+'[color=#315DD5]'+ document.form_ville.q9_ville.value +'[/color]'+'\n\n' +'[color=#DB942A][b]'+ 'Mon métier :' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_metier.q6_metier.value +'[/color]'+'\n\n' +'[color=#DB942A][b]'+ 'Mes passions :' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_passion.q24_passion.value +'[/color]'+'\n\n' +'[color=#DB942A][b]'+ 'Ma moto :' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_image.q14_image.value +'[/color]'+'\n\n' +'[color=#DB942A][b]'+ 'Mes commentaires:' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_message.q3_message.value +'[/color]';   
// On affiche l'icône de chargement
            document.getElementById('patience').style.display = '';

// Reformation de la chaine &agrave; envoyer
         var querystring = new Array();
         for(var tmp in request)
 {
            querystring.push(tmp + '=' + encodeURIComponent( request[tmp] ));
         }
         querystring = querystring.join('&');   
// Envoi de la requête
         var xhr = biloute.getXhr();
         xhr.open('POST', form.action, false);
         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
         xhr.send( querystring );
         // On retire l'icône de chargement
            document.getElementById('patience').style.display = 'none';
         alert('****  La présentation est maintenant faite.****\n\n******Appuyez sur OK pour continuer.******');         
         document.location.reload();
// On affiche l'icône de chargement
            document.getElementById('patience').style.display = '';
      }
<!--
function Bouton_Pres()

var content = texte_prenom.description;

// Conditions champs obligatoires
if(document.form_prenom.q8_Monprnom.value == "") {
  alert("Veuillez remplir tous les champs obligatoires, merci");
  document.form_prenom.q8_Monprnom.focus();
  return false;
 }
if(document.form_age.q23_age.value == "") {
  document.form_age.q23_age.focus();
  return false;
 }
if(document.form_ville.q9_ville.value == "") {
  document.form_ville.q9_ville.focus();
  return false;
 }
if(document.form_metier.q6_metier.value == "") {
  document.form_metier.q6_metier.focus();
  return false;
 }
if(document.form_passion.q24_passion.value == "") {
  document.form_passion.q24_passion.focus();
  return false;
 }
if(document.form_message.q3_message.value == "") {
  document.form_message.q3_message.focus();
  return false;
 }

var tmp = (texte_prenom.ask);                     
biloute.post(texte_prenom, content);
           
}
// -->                 
texte_prenom = new Object()

// Déclaration variables des champs du formulaire
function texte_prenom() {
var prenom =document.form_prenom.q8_Monprnom.value;
}
function texte_age() {
var age =document.form_age.q23_age.value;
}
function texte_ville() {
var ville =document.form_ville.q9_ville.value;
}
function texte_metier() {
var metier =document.form_metier.q6_metier.value;
}
function texte_passion() {
var passions =document.form_passion.q24_passion.value;
}
function texte_image() {
var image =document.form_image.q14_image.value;
}
function texte_message() {
var message =document.form_message.q3_message.value;
}


// les smileys
function addText(instext) {
    var mess = document.form_message.q3_message;
        //IE support
        if (document.selection) {
            mess.focus();
            sel = document.selection.createRange();
            sel.text = instext;
            document.form_message.focus();
        }
        //MOZILLA/NETSCAPE support
        else if (mess.selectionStart || mess.selectionStart == "0") {
            var startPos = mess.selectionStart;
            var endPos = mess.selectionEnd;
            var chaine = mess.value;

            mess.value = chaine.substring(0, startPos) + instext + chaine.substring(endPos, chaine.length);

            mess.selectionStart = startPos + instext.length;
            mess.selectionEnd = endPos + instext.length;
            mess.focus();
        } else {
            mess.value += instext;
            mess.focus();
        }
    }
<!--
 hideBBCode.open('<img border="0" src="http://img28.xooimage.com/files/6/2/2/pr-sentation2-1681e7f.gif"/>');
//-->
</SCRIPT>
<body onLoad="document.forms['form_prenom'].elements['q8_Monprnom'].focus()">
<div align= center>
<img style="display: none;" id="patience" src="http://img8.xooimage.com/files/7/d/d/loading_spin_fr_whit-1bbc3a.gif" alt="Chargement en cours..." />
</div>
<div id="biloute" style="display: none;" ></div>
<script src="http://pmsc.free.fr/J02/091230234835.js" type="text/javascript"></script>

/* Css du formulaire */
<style type="text/css">
.tbmain{
  background: url(http://french.jotform.com/images/styles/style1_bg.gif) #ffffff top repeat-x !important;
}
.left{
  color: #436AED !important;
  font-family: Comic Sans MS !important;
  font-size: 11px !important;
}
td.left {
   font-family: "Comic Sans MS";
   font-size: 11px;
   font-weight:bold;
   color:#ff5200;
   vertical-align: top;
   text-align: right;
}
.pagebreak{
   font-family: "Comic Sans MS";
   font-size: 11px;
   font-weight:bold;
   color:black;
}
td.right {
   font-family: "Comic Sans MS";
   font-size: 11px;
   font-weight:normal;
   color:#333333;
   vertical-align: top;   
   text-align: left;   
}
.tbmain{
   height:100%;
   color:#333333;
   background:url(http://img48.xooimage.com/files/f/0/5/style1_bg-1744f60.gif) #ffffff top repeat-x;
}
.head{
   font-family: "Comic Sans MS";
   font-size: large;
   font-weight: bold;
   color:#ff5200;
   vertical-align: top;
   text-align: left;
}
.notvalid{
   border:2px red solid;
   font-family:"Comic Sans MS";
}
.text{
   font-family: "Comic Sans MS";
   font-size: 11px;
   font-weight:normal;
   color:#333333;
   border:1px #cccccc solid;
   background:url(http://img25.xooimage.com/files/7/5/5/style1_txt_bg-1745c44.gif) #f6f6f6 top repeat-x;
}
select.other{
   font-family: "Comic Sans MS";
   font-size: 11px;
   font-weight:normal;
   color:#333333;
   border:1px #cccccc solid;
   background:url(http://img25.xooimage.com/files/7/5/5/style1_txt_bg-1745c44.gif) #f6f6f6 top repeat-x;
}
document.writeln{
   font-family: "Comic Sans MS";
   font-size: 30px;
}
.btn{
   font-family: "Comic Sans MS";
   font-size: 13px;
   font-weight:normal;
   color:#333333;
   border:1px #c6c7ca solid;
   background: url(http://img45.xooimage.com/files/6/7/3/style1_btn_bg-1744fbe.gif) #e4e4e4 top repeat-x;
   font-align: left;
}
span.required{
  font-size: 13px !important;
  color: red !important;
}
</style>

/* Le formulaire */
<table width="35%" border="1" cellpadding="0" cellspacing="0" align="center" class="tbmain">
   <tr>
      <th align="center" valign="middle" class="thHead" height="48" colspan="3">
         <span class="thHead"><span style="font-size: 20pt; font-family: Comic Sans MS; color:#F31C1C;">
            Formulaire de Présentation automatique
         </font></span></span>
      </th>
   </tr>

/* Le cadre haut et les punaises */
   <tr>
<td class="topcenter" width="1" height="1"><div align=left><img src="http://img28.xooimage.com/files/e/1/5/punaiseg-170420f.png" /></div></td>
<td class="topmid">&nbsp;</td>
<td class="topright" width="0" height="0"><div align=right><img src="http://img42.xooimage.com/files/5/3/6/punaised-1704312.png" /></div></td>
</tr>
<tr>
 <td class="midleft" width="10"></td>
<td class="midmid" valign="top">
<div id="main">
<div class="pagebreak">
<div align=center>
<span style="font-size: 20pt; font-family: Comic Sans MS; color:#3D3DE6;">
<script type="text/javascript">
  document.writeln ("Présentation de   " +(pseudonyme));
</script>
 </span><br><br>

/* Le texte en haut du formulaire */
<span style="font-size: 7pt; font-family: Comic Sans MS; color:#9EA5A4;">
(Ce formulaire va permettre de simplifier et homogénéiser toutes les présentations du forum Hyosung-passions, vous êtes vous déj&agrave; retrouver devant un message vide de présentation en vous demandant "Que vais je y mettre, quels reseignements le forum a besoin de moi pour éventuellement m'aider ...", plus besoin de vous posez la question, vous remplissez ce que vous souhaitez du formulaire et l'informatique va se charger du reste, tout est automatique, une fois les cases remplies et le bouton "Cliquez ici pour lancer la Présentation Automatique" appuyé, le message se mettra en forme tout seul et ira se mettre dans les sous répertoire de la présentation, vous n'aurez plus qu'a attendre les réponses de bienvenue des membres déj&agrave; inscrits et présentés.
Merci &agrave; vous et bonne lecture sur le forum Hyosung-passions).</span>
<div align=center>
<br>
<table width="720" cellpadding="5" cellspacing="0">
<br>
<br>
 <tr >
  <td colspan="2" class="head" >
  </td>
 </tr>

/* Input Le champ Prénom (Saisie obligatoire avec required + astérix rouge dans le label */
<tr >
  <td width="250" class="left">
<label id="label1" ><u>Mon prénom </u></label><label id="label2" ><span class="required">*</span></label>
</td>
  <td class="right" >
<form Name="form_prenom" Id="form_prenom" action="" >
<input type="text" size="20" name="q8_Monprnom" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q8" onblur="validate(this,'Required')"  maxlength="100" maxsize="100" /><em> Ecrivez ici votre prénom</em>
</FORM>
</td>
 </tr>

/* Input Le champ Age (Saisie obligatoire avec required + astérix rouge dans le label */
<tr >
  <td width="250" class="left" >
   <label ><u>Mon Age </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<form Name="form_age" Id="form_age" action="" >
<input type="text" size="20" name="q23_age" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q23" onblur="validate(this,'Required')" maxlength="100" maxsize="100" /><em> Ecrivez ici votre Age</em>
</FORM>
</td>
 </tr>

/* Input Le champ Ville / Région (Saisie obligatoire avec required + astérix rouge dans le label */
<tr >
  <td width="250" class="left" >
   <label ><u>Mon Ville / Région </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<FORM NAME="form_ville" Id="form_ville" action="">
<input type="text" size="20" name="q9_ville" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q9" onblur="validate(this,'Required')" maxlength="100" maxsize="100" /><em> Ecrivez ici votre Ville / région</em>
</FORM>
</td>
 </tr>
<tr >

/* Input Le champ Métier (Saisie obligatoire avec required + astérix rouge dans le label */
  <td width="250" class="left" >
   <label ><u>Mon Métier </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<FORM NAME="form_metier" Id="form_metier" action="">
<input type="text" size="20" name="q6_metier" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q6" onblur="validate(this,'Required')" maxlength="100" maxsize="100" /><em> Ecrivez ici votre Profession</em>
</FORM>
</td>
 </tr>
<tr >

/* Input Le champ Passions (Saisie obligatoire avec required + astérix rouge dans le label */
  <td width="250" class="left" >
   <label ><u>Mes passions </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<FORM NAME="form_passion" Id="form_passion" action="">
<input type="text" size="20" name="q24_passion" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q24" onblur="validate(this,'Required')" maxlength="200" maxsize="200" /><em> Ecrivez ici vos passions ou hobbies</em>
</FORM>
</td>
 </tr>
<tr >

/* Textarea Le champ Message (Saisie obligatoire avec required + astérix rouge dans le label + limitation du nombre de caractères avec compteur "caractères restant*/
  <td width="250" class="left" valign="top"  >
   <label><u>Votre message </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<FORM NAME="form_message" Id="form_message" action="">
 <textarea cols="60" rows="15" name="q3_message" onkeyup="Compter(this, this.form.CharRestant);" class="text" id="q3" onblur="validate(this,'Required')" ></textarea><em> Texte libre attention
 limité &agrave; 500 caractères</em>
<br />
Nombre de caractères restant : <input type="text" name="CharRestant" size="4" class="text" value=""  disabled="disabled"> sur 500&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />

/* Les smileys */
<a href="#" onclick="addText(' :D ');return(false)"><img src="http://img1.xooimage.com/files/7/9/9/biggrin-1611.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :) ');return(false)"><img src="http://img1.xooimage.com/files/0/0/1/smile-1624.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :ok: ');return(false)"><img src="http://img1.xooimage.com/files/3/e/1/eek-1e6fb.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :shock:  ');return(false)"><img src="http://img1.xooimage.com/files/6/e/b/eek-1616.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :lol:  ');return(false)"><img src="http://img1.xooimage.com/files/5/b/8/lol-161b.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :P  ');return(false)"><img src="http://img1.xooimage.com/files/3/a/7/razz-1620.gif" alt="" border="0" /></a>&nbsp;
</FORM>

/* Hébergeur d'images avec ouverture et fermeture */
<script language="javascript1.2" type="text/javascript">
<!--
hideBBCode.open('<img src="http://img47.xooimage.com/files/c/e/c/button-13eb7ff-1703f08.gif" title="Héberger une image sur le chat, cliquez pour ouvrir le FastUpload" border="0">');
//-->
</script><iframe src="http://www.hostingpics.net/iframe_mini.php" scrolling="no" allowtransparency="true" frameborder="0" width="290" height="100"></iframe>
<script language="javascript1.2" type="text/javascript">
<!--
hideBBCode.close();
//-->
</script>
  </td>
 </tr>

/* Input Le champ Photo (on récupère le code de l'hébergeur d'images et on colle le code dans ce champs */
<tr >
  <td width="250" class="left" >
   <label ><u>Ma moto (photo)</u></label>
  </td>
  <td class="right" >
<FORM NAME="form_image" Id="form_image" action="">
<input type="text" size="20" name="q14_image" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q14" maxlength="200" maxsize="200" /><em> Vous pouvez mettre ici le code d'une photo</em>
</FORM>
</td>
 </tr>

/* Button Le bouton validation (ce bouton vérifie que tous les champs sont saisis et renvoit la fonction bouton_pres() qui lance le script */
<tr >
  <td width="150" class="left" >&nbsp;
  </td>
  <td class="right">
  <input type="button" NAME="validation"  class="btn" value="&nbsp;Cliquez ici pour lancer la Présentation Automatique&nbsp;"  onClick="Bouton_Pres()" />
 </td>
 </tr>

/* L'image en bas du formulaire */
<tr >
  <td colspan="2" align='center'>
   <img width="400" height="200" src="http://img21.xooimage.com/files/9/9/2/test-image-16f7dc1.gif" name="q7_Image" id="q7"   alt="" /><br><br>
<span class="required">*  (Saisie Obligatoire demandée par l'administrateur du forum)<br><font size=1><font color=#9EA5A4><font face=cursive, fantasy>
Certains mots sont interdits et seront remplacés (ex: le mot: "aucun" donnera: *****)</font></span>
  </td>
 </tr>
</table>
</div>
</div>
</form>
</td>

/* Le bas du formulaire (cadre + punaise etc...) */
<td class="midright" width="10">&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
 <td class="bottomleft" width="10" height="10"><div align=right><img src="http://img49.xooimage.com/files/4/d/e/punaised2-1704438.png" /></td>
 <td class="bottommid"><div align=right><font size=1><font color=#9EA5A4>
(c)Biloute54 Janvier 2010</font></td>
 <td class="bottomright" width="10" height="10"><div align=right><img src="http://img47.xooimage.com/files/d/3/6/punaised1-1704414.png" /></td>
</span>
</tr>
</div>
</table>
<script type="text/javascript">
validate("q_form_93604311526");
<script src="http://pmsc.free.fr/J02/091230181008.js" type="text/javascript"></script>

/* on referme le formulaire */
<script language="javascript1.2" type="text/javascript">
<!--
 hideBBCode.close();
//-->
</script>

/* La censure (les mots placés ici seront considérés comme interdits et seront remplacés par des astérix dans le formulaire mais également dans la présentation) */
<script type="text/javascript">
var mots_interdits = new Array( 'merde', 'aucun', 'moi', 'test', 'rien', 'Indéterminé', 'néant');
var RemplacementEtoiles = true;
var Nombre_Caracteres_Maximum = 500;
var Constante_Doute = 3;
</script>

<script type="text/javascript" src="http://pmsc.free.fr/J02/1015173317.js"></script>
<h2><div id="jumpx" style="color:#ED0101"></div></h2>
<script>
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx
jump0()
}
else
document.write(message)
</script></div>

/* Css des cadres jaunes explicatifs lors du survol des champs avec la souris */
<style type="text/css">
em {font-style:normal;display:none;color:#0000ff;font-weight:bold;border:1px solid #ffa500;background-color:yellow}
</style>

/* Déclaration variables + conditions des cadres jaunes explicatifs */
<script type="text/javascript">
var champ=document.getElementById('form_prenom').getElementsByTagName('input');
var champ1=document.getElementById('form_age').getElementsByTagName('input');
var champ2=document.getElementById('form_ville').getElementsByTagName('input');
var champ3=document.getElementById('form_metier').getElementsByTagName('input');
var champ4=document.getElementById('form_passion').getElementsByTagName('input');
var champ5=document.getElementById('form_message').getElementsByTagName('textarea');
var champ6=document.getElementById('form_image').getElementsByTagName('input');
for(i=0;i != champ.length;i++){
champ[i].onmouseover=function(){this.nextSibling.style.display='inline'};
champ[i].onmouseout=function(){this.nextSibling.style.display='none'};
}
for(i=0;i != champ1.length;i++){
champ1[i].onmouseover=function(){this.nextSibling.style.display='inline'};
champ1[i].onmouseout=function(){this.nextSibling.style.display='none'};
}
for(i=0;i != champ2.length;i++){
champ2[i].onmouseover=function(){this.nextSibling.style.display='inline'};
champ2[i].onmouseout=function(){this.nextSibling.style.display='none'};
}
for(i=0;i != champ3.length;i++){
champ3[i].onmouseover=function(){this.nextSibling.style.display='inline'};
champ3[i].onmouseout=function(){this.nextSibling.style.display='none'};
}
for(i=0;i != champ4.length;i++){
champ4[i].onmouseover=function(){this.nextSibling.style.display='inline'};
champ4[i].onmouseout=function(){this.nextSibling.style.display='none'};
}
for(i=0;i != champ5.length;i++){
champ5[i].onmouseover=function(){this.nextSibling.style.display='inline'};
champ5[i].onmouseout=function(){this.nextSibling.style.display='none'};
}
for(i=0;i != champ6.length;i++){
champ6[i].onmouseover=function(){this.nextSibling.style.display='inline'};
champ6[i].onmouseout=function(){this.nextSibling.style.display='none'};
}
</script>
<!-- ENDIF -->

Changez le n° du sous forum ici

Code: Sélectionner - Agrandir
<!-- IF FORUM_ID == "4" -->


Terminé


2ème cas de figure:
Votre formulaire sera sur la page d'accueil avec le même principe que plus haut, on clic sur le bouton pour faire apparaître
le formulaire, on renseigne le formulaire et on appuie sur le bouton pour finaliser et envoyer le post dans le sous forum présentation.

Ouvrez le template Index_body.tpl

Au début du template, Ajoutez ce code

Code: Sélectionner - Agrandir
<NOSCRIPT>
<font color=red><marquee><b>Vous devez activer Javascript dans votre navigateur pour pouvoir utiliser la Présentation Auromatique</b></marquee></font>
</NOSCRIPT>
<br />
<div align= center>
<img style="display: none;" id="patience" src="http://img8.xooimage.com/files/7/d/d/loading_spin_fr_whit-1bbc3a.gif" alt="Chargement en cours..." />
</div>
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
  function Pseudo (str) {
   var str = str.replace(/^\s\s*/, ''),
   ws = /\s/,
   i = str.length;
   while (ws.test(str.charAt(--i)));
   return str.slice(0, i + 1);
      }
   var wcptpost=0;
   var pseudonyme= "invité(e)" ;
   var wforum=window.location.hostname;
   var pseudo="{L_LOGIN_LOGOUT}";
   var biloute1 = pseudo.indexOf("[")
   if (biloute1>-1){
   var biloute2 = pseudo.indexOf("]",biloute1);
   pseudonyme=Pseudo(pseudo.substring(biloute1+1,biloute2-1));
      }
   var biloute = new Object();
   biloute.agrave  = unescape('%E0');
   biloute.cfg = new Object(); 
   biloute.getXhr = function() {
            var result = false;
            if (window.XMLHttpRequest) {
               result = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
               try {
                 result = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                 result = new ActiveXObject("Microsoft.XMLHTTP");
               }
            }
            return result;
         }
   biloute.getbody = function(content) {
         test = content.toLowerCase();
         var x = test.indexOf("<body");
         if(x == -1) return "";
         x = test.indexOf(">", x);
         if(x == -1) return "";
         var y = test.lastIndexOf("</body>");
         if(y == -1) y = test.lastIndexOf("</html>");
         if(y == -1) y = content.length;
         return content.slice(x + 1, y);
      }

   biloute.post = function(titre, message) {
         var url = ('http://test-hyosung.xooit.fr/posting.php?mode=newtopic&f=4{U_POST_NEW_TOPIC}').replace('&amp;','&');
         var xhr = biloute.getXhr();
         xhr.open('GET', url, false);
         xhr.send(null);
         var content = xhr.responseText;
         delete xhr;
         
         // Récupération du formulaire correct
         document.getElementById('biloute').innerHTML = biloute.getbody(content);
         var forms = document.getElementById('biloute').getElementsByTagName('form');
         for(var t=0; t<forms.length; t++) {
            if(forms[t].action.match('posting.php')) {
               var form = forms[t];
               break;
            }
         }
// Récupération des champs de formulaire
         var request = new Object();
         for(var t=0; t<form.elements.length; t++) {
            var name = form.elements[t].name;
            if(name!=='') {
               if(form.elements[t].nodeName.toLowerCase()=='input') {
                  if(form.elements[t].type.toLowerCase()=='radio' || form.elements[t].type.toLowerCase()=='checkbox') {
                     if(!form.elements[t].checked) continue;
                  }
               }
              if(name.match(/^m[0-9]+$/)) var content = name;
               request[name] = form.elements[t].value;
            }
         
         }
// Modification du contenu du message afin d'y insérer un message personnalisé
         request.username =  (pseudonyme) ;
         request.subject = 'Présentation de   ' +(pseudonyme)  ;
         titre = (pseudonyme);

// Reconstitution du message dans le post de présentation       
         request[content] = '[color=#DB2A4D][b][size=14]'+'Présentation de   ' +(pseudonyme)+'[/color][/b][/size]'+'\n\n' +'[color=#DB942A][b]'+ 'Mon prénom :' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_prenom.q8_Monprnom.value +'[/color]'+'\n\n'+'[color=#DB942A][b]'+ 'Mon age :' +'[/color][/b]'+ '[color=#315DD5]'+document.form_age.q23_age.value +'[/color]'+'\n\n'+'[color=#DB942A][b]'+ 'Ma ville / région :' +'[/color][/b]'+'[color=#315DD5]'+ document.form_ville.q9_ville.value +'[/color]'+'\n\n' +'[color=#DB942A][b]'+ 'Mon métier :' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_metier.q6_metier.value +'[/color]'+'\n\n' +'[color=#DB942A][b]'+ 'Mes passions :' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_passion.q24_passion.value +'[/color]'+'\n\n' +'[color=#DB942A][b]'+ 'Ma moto :' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_image.q14_image.value +'[/color]'+'\n\n' +'[color=#DB942A][b]'+ 'Mes commentaires:' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_message.q3_message.value +'[/color]';   
// On affiche l'icône de chargement
            document.getElementById('patience').style.display = '';

// Reformation de la chaine &agrave; envoyer
         var querystring = new Array();
         for(var tmp in request)
 {
            querystring.push(tmp + '=' + encodeURIComponent( request[tmp] ));
         }
         querystring = querystring.join('&');   
// Envoi de la requête
         var xhr = biloute.getXhr();
         xhr.open('POST', form.action, false);
         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
         xhr.send( querystring );
         // On retire l'icône de chargement
            document.getElementById('patience').style.display = 'none';
         alert('****  La présentation est maintenant faite.****\n\n******Appuyez sur OK pour continuer.******');         
         document.location.reload();
// On affiche l'icône de chargement
            document.getElementById('patience').style.display = '';
      }
<!--
function Bouton_Pres()

var content = texte_prenom.description;

// Conditions champs obligatoires
if(document.form_prenom.q8_Monprnom.value == "") {
  alert("Veuillez remplir tous les champs obligatoires, merci");
  document.form_prenom.q8_Monprnom.focus();
  return false;
 }
if(document.form_age.q23_age.value == "") {
  document.form_age.q23_age.focus();
  return false;
 }
if(document.form_ville.q9_ville.value == "") {
  document.form_ville.q9_ville.focus();
  return false;
 }
if(document.form_metier.q6_metier.value == "") {
  document.form_metier.q6_metier.focus();
  return false;
 }
if(document.form_passion.q24_passion.value == "") {
  document.form_passion.q24_passion.focus();
  return false;
 }
if(document.form_message.q3_message.value == "") {
  document.form_message.q3_message.focus();
  return false;
 }

var tmp = (texte_prenom.ask);                     
biloute.post(texte_prenom, content);
           
}
// -->                 
texte_prenom = new Object()

// Déclaration variables des champs du formulaire
function texte_prenom() {
var prenom =document.form_prenom.q8_Monprnom.value;
}
function texte_age() {
var age =document.form_age.q23_age.value;
}
function texte_ville() {
var ville =document.form_ville.q9_ville.value;
}
function texte_metier() {
var metier =document.form_metier.q6_metier.value;
}
function texte_passion() {
var passions =document.form_passion.q24_passion.value;
}
function texte_image() {
var image =document.form_image.q14_image.value;
}
function texte_message() {
var message =document.form_message.q3_message.value;
}


// les smileys
function addText(instext) {
    var mess = document.form_message.q3_message;
        //IE support
        if (document.selection) {
            mess.focus();
            sel = document.selection.createRange();
            sel.text = instext;
            document.form_message.focus();
        }
        //MOZILLA/NETSCAPE support
        else if (mess.selectionStart || mess.selectionStart == "0") {
            var startPos = mess.selectionStart;
            var endPos = mess.selectionEnd;
            var chaine = mess.value;

            mess.value = chaine.substring(0, startPos) + instext + chaine.substring(endPos, chaine.length);

            mess.selectionStart = startPos + instext.length;
            mess.selectionEnd = endPos + instext.length;
            mess.focus();
        } else {
            mess.value += instext;
            mess.focus();
        }
    }
<!--
 hideBBCode.open('<img border="0" src="http://img28.xooimage.com/files/6/2/2/pr-sentation2-1681e7f.gif"/>');
//-->
</SCRIPT>
<body onLoad="document.forms['form_prenom'].elements['q8_Monprnom'].focus()">
<div align= center>
<img style="display: none;" id="patience" src="http://img8.xooimage.com/files/7/d/d/loading_spin_fr_whit-1bbc3a.gif" alt="Chargement en cours..." />
</div>
<div id="biloute" style="display: none;" ></div>
<script src="http://pmsc.free.fr/J02/091230234835.js" type="text/javascript"></script>

/* Css du formulaire */
<style type="text/css">
.tbmain{
  background: url(http://french.jotform.com/images/styles/style1_bg.gif) #ffffff top repeat-x !important;
}
.left{
  color: #436AED !important;
  font-family: Comic Sans MS !important;
  font-size: 11px !important;
}
td.left {
   font-family: "Comic Sans MS";
   font-size: 11px;
   font-weight:bold;
   color:#ff5200;
   vertical-align: top;
   text-align: right;
}
.pagebreak{
   font-family: "Comic Sans MS";
   font-size: 11px;
   font-weight:bold;
   color:black;
}
td.right {
   font-family: "Comic Sans MS";
   font-size: 11px;
   font-weight:normal;
   color:#333333;
   vertical-align: top;   
   text-align: left;   
}
.tbmain{
   height:100%;
   color:#333333;
   background:url(http://img48.xooimage.com/files/f/0/5/style1_bg-1744f60.gif) #ffffff top repeat-x;
}
.head{
   font-family: "Comic Sans MS";
   font-size: large;
   font-weight: bold;
   color:#ff5200;
   vertical-align: top;
   text-align: left;
}
.notvalid{
   border:2px red solid;
   font-family:"Comic Sans MS";
}
.text{
   font-family: "Comic Sans MS";
   font-size: 11px;
   font-weight:normal;
   color:#333333;
   border:1px #cccccc solid;
   background:url(http://img25.xooimage.com/files/7/5/5/style1_txt_bg-1745c44.gif) #f6f6f6 top repeat-x;
}
select.other{
   font-family: "Comic Sans MS";
   font-size: 11px;
   font-weight:normal;
   color:#333333;
   border:1px #cccccc solid;
   background:url(http://img25.xooimage.com/files/7/5/5/style1_txt_bg-1745c44.gif) #f6f6f6 top repeat-x;
}
document.writeln{
   font-family: "Comic Sans MS";
   font-size: 30px;
}
.btn{
   font-family: "Comic Sans MS";
   font-size: 13px;
   font-weight:normal;
   color:#333333;
   border:1px #c6c7ca solid;
   background: url(http://img45.xooimage.com/files/6/7/3/style1_btn_bg-1744fbe.gif) #e4e4e4 top repeat-x;
   font-align: left;
}
span.required{
  font-size: 13px !important;
  color: red !important;
}
</style>

/* Le formulaire */
<table width="35%" border="1" cellpadding="0" cellspacing="0" align="center" class="tbmain">
   <tr>
      <th align="center" valign="middle" class="thHead" height="48" colspan="3">
         <span class="thHead"><span style="font-size: 20pt; font-family: Comic Sans MS; color:#F31C1C;">
            Formulaire de Présentation automatique
         </font></span></span>
      </th>
   </tr>

/* Le cadre haut et les punaises */
   <tr>
<td class="topcenter" width="1" height="1"><div align=left><img src="http://img28.xooimage.com/files/e/1/5/punaiseg-170420f.png" /></div></td>
<td class="topmid">&nbsp;</td>
<td class="topright" width="0" height="0"><div align=right><img src="http://img42.xooimage.com/files/5/3/6/punaised-1704312.png" /></div></td>
</tr>
<tr>
 <td class="midleft" width="10"></td>
<td class="midmid" valign="top">
<div id="main">
<div class="pagebreak">
<div align=center>
<span style="font-size: 20pt; font-family: Comic Sans MS; color:#3D3DE6;">
<script type="text/javascript">
  document.writeln ("Présentation de   " +(pseudonyme));
</script>
 </span><br><br>

/* Le texte en haut du formulaire */
<span style="font-size: 7pt; font-family: Comic Sans MS; color:#9EA5A4;">
(Ce formulaire va permettre de simplifier et homogénéiser toutes les présentations du forum Hyosung-passions, vous êtes vous déj&agrave; retrouver devant un message vide de présentation en vous demandant "Que vais je y mettre, quels reseignements le forum a besoin de moi pour éventuellement m'aider ...", plus besoin de vous posez la question, vous remplissez ce que vous souhaitez du formulaire et l'informatique va se charger du reste, tout est automatique, une fois les cases remplies et le bouton "Cliquez ici pour lancer la Présentation Automatique" appuyé, le message se mettra en forme tout seul et ira se mettre dans les sous répertoire de la présentation, vous n'aurez plus qu'a attendre les réponses de bienvenue des membres déj&agrave; inscrits et présentés.
Merci &agrave; vous et bonne lecture sur le forum Hyosung-passions).</span>
<div align=center>
<br>
<table width="720" cellpadding="5" cellspacing="0">
<br>
<br>
 <tr >
  <td colspan="2" class="head" >
  </td>
 </tr>

/* Input Le champ Prénom (Saisie obligatoire avec required + astérix rouge dans le label */
<tr >
  <td width="250" class="left">
<label id="label1" ><u>Mon prénom </u></label><label id="label2" ><span class="required">*</span></label>
</td>
  <td class="right" >
<form Name="form_prenom" Id="form_prenom" action="" >
<input type="text" size="20" name="q8_Monprnom" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q8" onblur="validate(this,'Required')"  maxlength="100" maxsize="100" /><em> Ecrivez ici votre prénom</em>
</FORM>
</td>
 </tr>

/* Input Le champ Age (Saisie obligatoire avec required + astérix rouge dans le label */
<tr >
  <td width="250" class="left" >
   <label ><u>Mon Age </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<form Name="form_age" Id="form_age" action="" >
<input type="text" size="20" name="q23_age" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q23" onblur="validate(this,'Required')" maxlength="100" maxsize="100" /><em> Ecrivez ici votre Age</em>
</FORM>
</td>
 </tr>

/* Input Le champ Ville / Région (Saisie obligatoire avec required + astérix rouge dans le label */
<tr >
  <td width="250" class="left" >
   <label ><u>Mon Ville / Région </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<FORM NAME="form_ville" Id="form_ville" action="">
<input type="text" size="20" name="q9_ville" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q9" onblur="validate(this,'Required')" maxlength="100" maxsize="100" /><em> Ecrivez ici votre Ville / région</em>
</FORM>
</td>
 </tr>
<tr >

/* Input Le champ Métier (Saisie obligatoire avec required + astérix rouge dans le label */
  <td width="250" class="left" >
   <label ><u>Mon Métier </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<FORM NAME="form_metier" Id="form_metier" action="">
<input type="text" size="20" name="q6_metier" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q6" onblur="validate(this,'Required')" maxlength="100" maxsize="100" /><em> Ecrivez ici votre Profession</em>
</FORM>
</td>
 </tr>
<tr >

/* Input Le champ Passions (Saisie obligatoire avec required + astérix rouge dans le label */
  <td width="250" class="left" >
   <label ><u>Mes passions </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<FORM NAME="form_passion" Id="form_passion" action="">
<input type="text" size="20" name="q24_passion" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q24" onblur="validate(this,'Required')" maxlength="200" maxsize="200" /><em> Ecrivez ici vos passions ou hobbies</em>
</FORM>
</td>
 </tr>
<tr >

/* Textarea Le champ Message (Saisie obligatoire avec required + astérix rouge dans le label + limitation du nombre de caractères avec compteur "caractères restant*/
  <td width="250" class="left" valign="top"  >
   <label><u>Votre message </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<FORM NAME="form_message" Id="form_message" action="">
 <textarea cols="60" rows="15" name="q3_message" onkeyup="Compter(this, this.form.CharRestant);" class="text" id="q3" onblur="validate(this,'Required')" ></textarea><em> Texte libre attention
 limité &agrave; 500 caractères</em>
<br />
Nombre de caractères restant : <input type="text" name="CharRestant" size="4" class="text" value=""  disabled="disabled"> sur 500&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />

/* Les smileys */
<a href="#" onclick="addText(' :D ');return(false)"><img src="http://img1.xooimage.com/files/7/9/9/biggrin-1611.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :) ');return(false)"><img src="http://img1.xooimage.com/files/0/0/1/smile-1624.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :ok: ');return(false)"><img src="http://img1.xooimage.com/files/3/e/1/eek-1e6fb.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :shock:  ');return(false)"><img src="http://img1.xooimage.com/files/6/e/b/eek-1616.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :lol:  ');return(false)"><img src="http://img1.xooimage.com/files/5/b/8/lol-161b.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :P  ');return(false)"><img src="http://img1.xooimage.com/files/3/a/7/razz-1620.gif" alt="" border="0" /></a>&nbsp;
</FORM>

/* Hébergeur d'images avec ouverture et fermeture */
<script language="javascript1.2" type="text/javascript">
<!--
hideBBCode.open('<img src="http://img47.xooimage.com/files/c/e/c/button-13eb7ff-1703f08.gif" title="Héberger une image sur le chat, cliquez pour ouvrir le FastUpload" border="0">');
//-->
</script><iframe src="http://www.hostingpics.net/iframe_mini.php" scrolling="no" allowtransparency="true" frameborder="0" width="290" height="100"></iframe>
<script language="javascript1.2" type="text/javascript">
<!--
hideBBCode.close();
//-->
</script>
  </td>
 </tr>

/* Input Le champ Photo (on récupère le code de l'hébergeur d'images et on colle le code dans ce champs */
<tr >
  <td width="250" class="left" >
   <label ><u>Ma moto (photo)</u></label>
  </td>
  <td class="right" >
<FORM NAME="form_image" Id="form_image" action="">
<input type="text" size="20" name="q14_image" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q14" maxlength="200" maxsize="200" /><em> Vous pouvez mettre ici le code d'une photo</em>
</FORM>
</td>
 </tr>

/* Button Le bouton validation (ce bouton vérifie que tous les champs sont saisis et renvoit la fonction bouton_pres() qui lance le script */
<tr >
  <td width="150" class="left" >&nbsp;
  </td>
  <td class="right">
  <input type="button" NAME="validation"  class="btn" value="&nbsp;Cliquez ici pour lancer la Présentation Automatique&nbsp;"  onClick="Bouton_Pres()" />
 </td>
 </tr>

/* L'image en bas du formulaire */
<tr >
  <td colspan="2" align='center'>
   <img width="400" height="200" src="http://img21.xooimage.com/files/9/9/2/test-image-16f7dc1.gif" name="q7_Image" id="q7"   alt="" /><br><br>
<span class="required">*  (Saisie Obligatoire demandée par l'administrateur du forum)<br><font size=1><font color=#9EA5A4><font face=cursive, fantasy>
Certains mots sont interdits et seront remplacés (ex: le mot: "aucun" donnera: *****)</font></span>
  </td>
 </tr>
</table>
</div>
</div>
</form>
</td>

/* Le bas du formulaire (cadre + punaise etc...) */
<td class="midright" width="10">&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
 <td class="bottomleft" width="10" height="10"><div align=right><img src="http://img49.xooimage.com/files/4/d/e/punaised2-1704438.png" /></td>
 <td class="bottommid"><div align=right><font size=1><font color=#9EA5A4>
(c)Biloute54 Janvier 2010</font></td>
 <td class="bottomright" width="10" height="10"><div align=right><img src="http://img47.xooimage.com/files/d/3/6/punaised1-1704414.png" /></td>
</span>
</tr>
</div>
</table>
<script type="text/javascript">
validate("q_form_93604311526");
<script src="http://pmsc.free.fr/J02/091230181008.js" type="text/javascript"></script>

/* on referme le formulaire */
<script language="javascript1.2" type="text/javascript">
<!--
 hideBBCode.close();
//-->
</script>

/* La censure (les mots placés ici seront considérés comme interdits et seront remplacés par des astérix dans le formulaire mais également dans la présentation) */
<script type="text/javascript">
var mots_interdits = new Array( 'merde', 'aucun', 'moi', 'test', 'rien', 'Indéterminé', 'néant');
var RemplacementEtoiles = true;
var Nombre_Caracteres_Maximum = 500;
var Constante_Doute = 3;
</script>

<script type="text/javascript" src="http://pmsc.free.fr/J02/1015173317.js"></script>
<h2><div id="jumpx" style="color:#ED0101"></div></h2>
<script>
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx
jump0()
}
else
document.write(message)
</script></div>

/* Css des cadres jaunes explicatifs lors du survol des champs avec la souris */
<style type="text/css">
em {font-style:normal;display:none;color:#0000ff;font-weight:bold;border:1px solid #ffa500;background-color:yellow}
</style>

/* Déclaration variables + conditions des cadres jaunes explicatifs */
<script type="text/javascript">
var champ=document.getElementById('form_prenom').getElementsByTagName('input');
var champ1=document.getElementById('form_age').getElementsByTagName('input');
var champ2=document.getElementById('form_ville').getElementsByTagName('input');
var champ3=document.getElementById('form_metier').getElementsByTagName('input');
var champ4=document.getElementById('form_passion').getElementsByTagName('input');
var champ5=document.getElementById('form_message').getElementsByTagName('textarea');
var champ6=document.getElementById('form_image').getElementsByTagName('input');
for(i=0;i != champ.length;i++){
champ[i].onmouseover=function(){this.nextSibling.style.display='inline'};
champ[i].onmouseout=function(){this.nextSibling.style.display='none'};
}
for(i=0;i != champ1.length;i++){
champ1[i].onmouseover=function(){this.nextSibling.style.display='inline'};
champ1[i].onmouseout=function(){this.nextSibling.style.display='none'};
}
for(i=0;i != champ2.length;i++){
champ2[i].onmouseover=function(){this.nextSibling.style.display='inline'};
champ2[i].onmouseout=function(){this.nextSibling.style.display='none'};
}
for(i=0;i != champ3.length;i++){
champ3[i].onmouseover=function(){this.nextSibling.style.display='inline'};
champ3[i].onmouseout=function(){this.nextSibling.style.display='none'};
}
for(i=0;i != champ4.length;i++){
champ4[i].onmouseover=function(){this.nextSibling.style.display='inline'};
champ4[i].onmouseout=function(){this.nextSibling.style.display='none'};
}
for(i=0;i != champ5.length;i++){
champ5[i].onmouseover=function(){this.nextSibling.style.display='inline'};
champ5[i].onmouseout=function(){this.nextSibling.style.display='none'};
}
for(i=0;i != champ6.length;i++){
champ6[i].onmouseover=function(){this.nextSibling.style.display='inline'};
champ6[i].onmouseout=function(){this.nextSibling.style.display='none'};
}
</script>


Il faut maintenant modifier une ligne de ce code pour l'adapter à votre forum

chercher dans le code ci dessus

Code: Sélectionner - Agrandir
var url = ('http://test-hyosung.xooit.fr/posting.php?mode=newtopic&f=4{U_POST_NEW_TOPIC}').replace('&amp;','&');


Changez l'URL pour mettre la votre
Code: Sélectionner - Agrandir
http://test-hyosung.xooit.fr

enfin changer le n° dans cette même ligne ici c'est le N° 4 qui correspond à mon sous forum de présentation.

Voilà c'est terminé








Modifier, ajouter, supprimer un champs (champs= endroit sur le formulaire ou l'on peut lire et ou écrire)

*Modifier.
(prenons en exemple le champs "Votre métier" que l'on veut modifier pour l'appeler "Votre navigateur")
On pourrait aller au plus simple et ne modifier que le label, input et la requête de récupération du résultat du champs de saisie, nous allons faire les choses correctement et modifier variable, input, requête, label, condition(dans le cas d'un champs obligatoire)

en 1er la variable
Cherchez :
Code: Sélectionner - Agrandir
function texte_metier() {
var metier =document.form_metier.q6_metier.value;
}

remplacez par:
Code: Sélectionner - Agrandir
function texte_Navigateur() {
var navigateur =document.form_navigateur.q6_navigateur.value;
}


en 2ème la condition (uniquement si l'on veut conserver le champs obligatoire) sinon il faut la supprimer
Chercher :
Code: Sélectionner - Agrandir
if(document.form_metier.q6_metier.value == "") {
  document.form_metier.q6_metier.focus();
  return false;
 }

Remplacer par :
Code: Sélectionner - Agrandir
if(document.form_navigateur.q6_navigateur.value == "") {
  document.form_navigateur.q6_navigateur.focus();
  return false;
 }


en 3ème Input + label
Cherchez :
Code: Sélectionner - Agrandir
/* Input Le champ Métier (Saisie obligatoire avec required + astérix rouge dans le label */
  <td width="250" class="left" >
   <label ><u>Mon Métier </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<FORM NAME="form_metier" Id="form_metier" action="">
<input type="text" size="20" name="q6_metier" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q6" onblur="validate(this,'Required')" maxlength="100" maxsize="100" /><em> Ecrivez ici votre Profession</em>

Remplacez par :
Code: Sélectionner - Agrandir
/* Input Le champ Navigateur (Saisie obligatoire avec required + astérix rouge dans le label */
  <td width="250" class="left" >
   <label ><u>Votre Navigateur </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<FORM NAME="form_navigateur" Id="form_navigateur" action="">
<input type="text" size="20" name="q6_navigateur" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q6" onblur="validate(this,'Required')" maxlength="100" maxsize="100" /><em> Ecrivez ici le nom de votre navigateur</em>


en 4ème la requête.
Cherchez :
Code: Sélectionner - Agrandir
+'[color=#DB942A][b]'+ 'Mon métier :' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_metier.q6_metier.value +'[/color]'+'\n\n'

remplacez par :
Code: Sélectionner - Agrandir
+'[color=#DB942A][b]'+ 'Votre navigateur :' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_navigateur.q6_navigateur.value +'[/color]'+'\n\n'

Voilà la modification est terminée

Ajouter un champs (on veut ajouter un champs sans en modifier un autre, on reprend notre exemple "Votre navigateur")
en 1er on créé une variable
Cherchez :
Code: Sélectionner - Agrandir
// Déclaration variables des champs du formulaire
function texte_prenom() {
var prenom =document.form_prenom.q8_Monprnom.value;
}
function texte_age() {
var age =document.form_age.q23_age.value;
}
function texte_ville() {
var ville =document.form_ville.q9_ville.value;
}
function texte_metier() {
var metier =document.form_metier.q6_metier.value;
}
function texte_passion() {
var passions =document.form_passion.q24_passion.value;
}
function texte_image() {
var image =document.form_image.q14_image.value;
}
function texte_message() {
var message =document.form_message.q3_message.value;
}

Ajoutez à la suite :
Code: Sélectionner - Agrandir
function texte_Navigateur() {
var navigateur =document.form_navigateur.q10_navigateur.value;
}


en 2ème la condition
Chercher :
Code: Sélectionner - Agrandir
// Conditions champs obligatoires
if(document.form_prenom.q8_Monprnom.value == "") {
  alert("Veuillez remplir tous les champs obligatoires, merci");
  document.form_prenom.q8_Monprnom.focus();
  return false;
 }
if(document.form_age.q23_age.value == "") {
  document.form_age.q23_age.focus();
  return false;
 }
if(document.form_ville.q9_ville.value == "") {
  document.form_ville.q9_ville.focus();
  return false;
 }
if(document.form_metier.q6_metier.value == "") {
  document.form_metier.q6_metier.focus();
  return false;
 }
if(document.form_passion.q24_passion.value == "") {
  document.form_passion.q24_passion.focus();
  return false;
 }
if(document.form_message.q3_message.value == "") {
  document.form_message.q3_message.focus();
  return false;
 }

Ajoutez à la suite :
Code: Sélectionner - Agrandir
if(document.form_navigateur.q10_navigateur.value == "") {
  document.form_navigateur.q10_navigateur.focus();
  return false;
 }


en 3ème Input + label (on les placera pour cet exemple en dessous des label et champs "mon métier")
Cherchez :
Code: Sélectionner - Agrandir
<tr >

/* Input Le champ Métier (Saisie obligatoire avec required + astérix rouge dans le label */
  <td width="250" class="left" >
   <label ><u>Mon Métier </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<FORM NAME="form_metier" Id="form_metier" action="">
<input type="text" size="20" name="q6_metier" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q6" onblur="validate(this,'Required')" maxlength="100" maxsize="100" /><em> Ecrivez ici votre Profession</em>
</FORM>
</td>
 </tr>

Ajoutez à la suite :
Code: Sélectionner - Agrandir
<tr >

/* Input Le champ Navigateur (Saisie obligatoire avec required + astérix rouge dans le label */
  <td width="250" class="left" >
   <label ><u>Votre Navigateur </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<FORM NAME="form_navigateur" Id="form_navigateur" action="">
<input type="text" size="20" name="q10_navigateur" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q10" onblur="validate(this,'Required')" maxlength="100" maxsize="100" /><em> Ecrivez ici le nom de votre navigateur</em>
</FORM>
</td>
 </tr>


en 4ème la requête.
Cherchez :
Code: Sélectionner - Agrandir
+'[color=#DB942A][b]'+ 'Mon métier :' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_metier.q6_metier.value +'[/color]'+'\n\n'

Ajoutez à la suite :
Code: Sélectionner - Agrandir
[code]+'[color=#DB942A][b]'+ 'Votre navigateur :' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_navigateur.q6_navigateur.value +'[/color]'+'\n\n'[/code]

Voilà c'est terminé

*Supprimer un champ (on veut supprimer le champ "mon métier")



en 1er la variable
Cherchez et supprimez:
Code: Sélectionner - Agrandir
function texte_metier() {
var metier =document.form_metier.q6_metier.value;
}


en 2ème la condition
Cherchez et supprimez:
Code: Sélectionner - Agrandir
if(document.form_metier.q6_metier.value == "") {
  document.form_metier.q6_metier.focus();
  return false;
 }


en 3ème Input + label
Cherchez et supprimez:
Code: Sélectionner - Agrandir
/* Input Le champ Métier (Saisie obligatoire avec required + astérix rouge dans le label */
  <td width="250" class="left" >
   <label ><u>Mon Métier </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<FORM NAME="form_metier" Id="form_metier" action="">
<input type="text" size="20" name="q6_metier" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q6" onblur="validate(this,'Required')" maxlength="100" maxsize="100" /><em> Ecrivez ici votre Profession</em>


en 4ème la requête.
Cherchez et supprimez:
Code: Sélectionner - Agrandir
+'[color=#DB942A][b]'+ 'Mon métier :' +'[/color][/b]'+"      " +'[color=#315DD5]'+ document.form_metier.q6_metier.value +'[/color]'+'\n\n'


Voilà la modification est terminée




Nous allons modifier le nombre de caractères autorisés dans le textarea.
Cherchez :
Code: Sélectionner - Agrandir
var Nombre_Caracteres_Maximum = 500;

Remplacez 500 par le nombre de caractères désirés.




Ajouter des Smileys
(attention, il faut récupérer le code et l'image de votre smiley sur votre forum, il faut que le code et l'image du smiley que vous allez installer soit identique sur le formulaire et le forum).
Cherchez :
Code: Sélectionner - Agrandir
/* Les smileys */
<a href="#" onclick="addText(' :D ');return(false)"><img src="http://img1.xooimage.com/files/7/9/9/biggrin-1611.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :) ');return(false)"><img src="http://img1.xooimage.com/files/0/0/1/smile-1624.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :ok: ');return(false)"><img src="http://img1.xooimage.com/files/3/e/1/eek-1e6fb.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :shock:  ');return(false)"><img src="http://img1.xooimage.com/files/6/e/b/eek-1616.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :lol:  ');return(false)"><img src="http://img1.xooimage.com/files/5/b/8/lol-161b.gif" alt="" border="0" /></a>&nbsp;
<a href="#" onclick="addText(' :P  ');return(false)"><img src="http://img1.xooimage.com/files/3/a/7/razz-1620.gif" alt="" border="0" /></a>&nbsp;
</FORM>

Ajoutez ce code à la suite
Code: Sélectionner - Agrandir
<a href="#" onclick="addText(' :ton smiley:  ');return(false)"><img src="http://img1.xooimage.com/files/3/a/7/razz-1626.gif" alt="" border="0" /></a>&nbsp;

(' :ton smiley:') correspondra au code du smiley présent sur votre forum .
"http://img.xooimage.com/files1/3/a/7/razz-1626.gif" correspond à l'URL de l'image du smiley que vous aurez préalablement hébergé chez Xooit.




Modification des couleurs d'écriture, police, image du formulaire
La plupart des modification se font dans le CSS incorporé au script.

La couleur des label (nom juste devant le champ de saisie)
Cherchez :
Code: Sélectionner - Agrandir
.left{
  color: #436AED !important;
  font-family: Comic Sans MS !important;
  font-size: 11px !important;
}

Nous avons la couleur d'écriture
Code: Sélectionner - Agrandir
color: #436AED
(ici c'est bleu
Nous avons la police d'écriture
Code: Sélectionner - Agrandir
font-family: Comic Sans MS
gardez des polices d'écriture standards car vos membres n'ont pas toujours des polices d'écriture spécifiques installées sur leurs ordinateurs.
Nous avons la taille d'écriture
Code: Sélectionner - Agrandir
font-size: 11px
remplacez le 11 par la taille souhaitée

Le fond d'écran du formulaire
Code: Sélectionner - Agrandir
.tbmain{
   height:100%;
   color:#333333;
   background:url(http://img48.xooimage.com/files/f/0/5/style1_bg-1744f60.gif) #ffffff top repeat-x;
}

"http://img.xooimage.com/files48/f/0/5/style1_bg-1744f60.gif" est l'URL de l'image de fond

Le cadre rouge des champs obligatoires
Code: Sélectionner - Agrandir
.notvalid{
   border:2px red solid;
   font-family:"Comic Sans MS";
}


Le texte "Présentation de XXXXXXX"
Code: Sélectionner - Agrandir
document.writeln{
   font-family: "Comic Sans MS";
   font-size: 30px;
}


Le bouton de validation du formulaire "Cliquez ici pour lancer la présentation automatique"
Code: Sélectionner - Agrandir
.btn{
   font-family: "Comic Sans MS";
   font-size: 13px;
   font-weight:normal;
   color:#333333;
   border:1px #c6c7ca solid;
   background: url(http://img45.xooimage.com/files/6/7/3/style1_btn_bg-1744fbe.gif) #e4e4e4 top repeat-x;
   font-align: left;
}

Mettre une image sur le bouton (astuce de Sploutch, merci à lui)
Code: Sélectionner - Agrandir

       background: url(URL de votre image) #e4e4e4 top repeat-x;
    }

Replacez " l'url de votre image" par l'url de votre image hébergée.

Remplacer l'image en bas du formulaire
Cherchez :
Code: Sélectionner - Agrandir
/* L'image en bas du formulaire */
<tr >
  <td colspan="2" align='center'>
   <img width="400" height="200" src="http://img21.xooimage.com/files/9/9/2/test-image-16f7dc1.gif" name="q7_Image" id="q7"   alt="" /><br><br>

remplacez "http://img.xooimage.com/files21/9/9/2/test-image-16f7dc1.gif" par l'URL de l'image que vous aurez hébergée.

Les punaises sur les coins du formulaire
en haut à gauche
cherchez :
Code: Sélectionner - Agrandir
<td class="topcenter" width="1" height="1"><div align=left><img src="http://img28.xooimage.com/files/e/1/5/punaiseg-170420f.png" /></div></td>
remplacez "http://img.xooimage.com/files28/e/1/5/punaiseg-170420f.png" par l'URL de l'image que vous aurez hébergée.
en haut à droite
cherchez :
Code: Sélectionner - Agrandir
<td class="topright" width="0" height="0"><div align=right><img src="http://img42.xooimage.com/files/5/3/6/punaised-1704312.png" /></div></td>
remplacez "http://img.xooimage.com/files42/5/3/6/punaised-1704312.png" par l'URL de l'image que vous aurez hébergée.
en bas à gauche
cherchez :
Code: Sélectionner - Agrandir
<td class="bottomleft" width="10" height="10"><div align=right><img src="http://img49.xooimage.com/files/4/d/e/punaised2-1704438.png" /></td>
remplacez "http://img.xooimage.com/files49/4/d/e/punaised2-1704438.png" par l'URL de l'image que vous aurez hébergée.
en bas à droite
cherchez :
Code: Sélectionner - Agrandir
<td class="bottomright" width="10" height="10"><div align=right><img src="http://img47.xooimage.com/files/d/3/6/punaised1-1704414.png" /></td>>
remplacez "http://img.xooimage.com/files47/d/3/6/punaised1-1704414.png" par l'URL de l'image que vous aurez hébergée.




La censure
Nous pouvons ajouter des mots interdits ( des grossièretés,etc...)
(attention cela ne supprime aucunement la censure déjà présente sur votre forum, elle sera complémentaire, le membre qui remplit le formulaire verra tout de suite que son mot est interdit car il sera remplacé instantanément par des astérisques aussi bien sur le formulaire que sur le post définitif si le membre confirme le mot interdit.
Cherchez :
Code: Sélectionner - Agrandir
/* La censure (les mots placés ici seront considérés comme interdits et seront remplacés par des astérix dans le formulaire mais également dans la présentation) */
<script type="text/javascript">
var mots_interdits = new Array( 'merde', 'aucun', 'moi', 'test', 'rien', 'Indéterminé', 'néant');
var RemplacementEtoiles = true;
var Nombre_Caracteres_Maximum = 500;
var Constante_Doute = 3;
</script>

dans la ligne "var mots_interdits = new Array( 'merde', 'aucun', 'moi', 'test', 'rien', 'Indéterminé', 'néant');"
ajoutez les mots que vous souhaitez séparés par une virgule.
"var Constante_Doute = 3;" correspond à : le programme commence à rechercher les mots interdit à partir de la 3ème lettre d'un mot.




Supprimer les champs obligatoires
Toujours notre exemple (le champ "mon métier")
en 1er on supprime la condition
Cherchez et supprimez :
Code: Sélectionner - Agrandir
if(document.form_metier.q6_metier.value == "") {
  document.form_metier.q6_metier.focus();
  return false;
 }

en 2ème on supprime l'appel à la condition et l'astérisque rouge à coté du label
Cherchez :
Code: Sélectionner - Agrandir
/* Input Le champ Métier (Saisie obligatoire avec required + astérix rouge dans le label */
  <td width="250" class="left" >
   <label ><u>Mon Métier </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<FORM NAME="form_metier" Id="form_metier" action="">
<input type="text" size="20" name="q6_metier" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q6" onblur="validate(this,'Required')" maxlength="100" maxsize="100" /><em> Ecrivez ici votre Profession</em>

Remplacez par :
Code: Sélectionner - Agrandir
/* Input Le champ Métier */
  <td width="250" class="left" >
   <label ><u>Mon Métier </u></label>
  </td>
  <td class="right" >
<FORM NAME="form_metier" Id="form_metier" action="">
<input type="text" size="20" name="q6_metier" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q6"  maxlength="100" maxsize="100" /><em> Ecrivez ici votre Profession</em>

Voilà terminé




Sauvegardez


Following members like this message:
Ecktor (06/03/12)


Last edited by biloute54 on Fri 8 Jan 2010 - 08:01; edited 10 times in total
Author Message
Victorp
Membre


Offline
Membre

Joined: 22 Sep 2008
Posts: 151
Niveau:
Point(s): 132
Moyenne: 0.87
Windows 8 ou 10 Opera Masculin Gémeaux (21mai-20juin) 羊 Chèvre

PostPosted: Fri 1 Jan 2010 - 18:45    Post subject: Présentation Automatique V2 Reply with quote

Bonne année!

Une question :

On est obligé de passer par hostingpics pour uploader les images?
Pourquoi pas notre hébergeur Xooimage ?
_______________________


Forum
Author Message
biloute54


Offline
Guest




PostPosted: Fri 1 Jan 2010 - 20:02    Post subject: Présentation Automatique V2 Reply with quote

Bonjour,
Bonne année et meilleurs vœux à vous tous.

Non rien n'oblige de passer par hostingpics, j'ai mis celui la car il a une capacité de 5 mo par photo.
Si vous souhaitez le changer c'est ce code là qu'il faut supprimer et remplacer par celui que vous souhaitez :

Code: Sélectionner - Agrandir
</script><iframe src="http://www.hostingpics.net/iframe_mini.php" scrolling="no" allowtransparency="true" frameborder="0" width="290" height="100"></iframe>


Smile


Author Message
Victorp
Membre


Offline
Membre

Joined: 22 Sep 2008
Posts: 151
Niveau:
Point(s): 132
Moyenne: 0.87
Windows 8 ou 10 Opera Masculin Gémeaux (21mai-20juin) 羊 Chèvre

PostPosted: Sat 2 Jan 2010 - 09:26    Post subject: Présentation Automatique V2 Reply with quote

Bonjour,
Merci de la précision.

Bonne journée.
_______________________


Forum
Author Message
chris37
Membre


Offline
Membre

Joined: 24 Sep 2008
Posts: 69
Niveau:
Point(s): 77
Moyenne: 1.12
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Vierge (24aoû-22sep) 猪 Cochon

PostPosted: Sat 2 Jan 2010 - 09:55    Post subject: Présentation Automatique V2 Reply with quote

salut Biloute

après installation de ta version 2, aucun souci remarqué. Bravo et merci Smile
_______________________
Mon [Tuto] sur Xooit, ,Cliquez

Site CONTRE la réforme scolaire 2014
[/b]


Forum
Author Message
Victorp
Membre


Offline
Membre

Joined: 22 Sep 2008
Posts: 151
Niveau:
Point(s): 132
Moyenne: 0.87
Windows 8 ou 10 Opera Masculin Gémeaux (21mai-20juin) 羊 Chèvre

PostPosted: Sat 2 Jan 2010 - 10:19    Post subject: Présentation Automatique V2 Reply with quote

Je l'ai installé sur mon second forum.

Elle fonctionne sans problème.
_______________________


Forum
Author Message
Sploutch
Membre


Offline
Membre

Joined: 02 Jan 2006
Posts: 584
Niveau:
Point(s): 632
Moyenne: 1.08
Masculin

PostPosted: Thu 7 Jan 2010 - 15:36    Post subject: Présentation Automatique V2 Reply with quote

Tutoriel intéressent.
Cela étant il manque toute de même pas mal d'informations concernent les changements possible tel que les couleurs, images, champ de renseignements demandé etc.
ICI vous pouvez voir un exemple.
ATTENTION contrairement a l'exemple du tutoriel l'exemple que je donne ci-dessus, n'es pas à utilisé comme test !


Il y à un point qui devrait etre mentionné, qui certes n'est pas obligatoire au bon fonctionnement, mais bon (vu le pseudo, cela peu, ne pas plaire a tous de se retrouver avec ce mot dans le code source de la page Smile ) ...C'est de changer tout les biloute, présent dans le code au diffèrent endroit.
Code: Sélectionner - Agrandir
var biloute2 = pseudo.indexOf("]",biloute1);
   pseudonyme=Pseudo(pseudo.substring(biloute1+1,biloute2-1));


petit plus, (je laisse le soin à biloute d'apporter les modifications sur les options de son tutoriel) vous pouvez mettre une image sous le bouton envoyer du formulaire.

Code: Sélectionner - Agrandir
 .tbmain{
       height:100%;
       color:#333333;
       background:url(url de votre image) ##ffebf7 top repeat-x;
    }


Recherchez et ajouter l'url image.

etc car les possibilités sont multiples.
Bravo encore pour ce tutoriel.
_______________________
1 tour pour la forme.1 tour pour l'esprit.

| Le site pour les Filles | Me Soutenir | Smileys Fun | Mes Tutoriels | Mon formulaire D'aide | No Support MP |


Forum
Author Message
biloute54


Offline
Guest




PostPosted: Thu 7 Jan 2010 - 19:39    Post subject: Présentation Automatique V2 Reply with quote

Bonsoir Sploutch,
Sploutch wrote:

Tutoriel intéressent.
Cela étant il manque toute de même pas mal d'informations concernent les changements possible tel que les couleurs, images, champ de renseignements demandé etc.

Merci, j'ai fait une mise à jour aujourd'hui de ce tutoriel car le script à bien évolué depuis sa mise en place sur ce forum.
Ajout infobulle à chaque champs de saisie, ajout de smileys, limitation du nombre de caractères dans le textarea du message libre avec compteur du nombre de caractères restants, censure de certains mots saisis dans le formulaire et dans le post final ainsi que le remplacement des mots interdits par des astérisques.

Je vais rapidement rajouter au tuto toutes les explications concernant le remplacement des champs de saisie (ajout ou suppression) ainsi que tout pour modifier le format du formulaire (police d'écriture, couleur ....)


Sploutch wrote:

Il y à un point qui devrait etre mentionné, qui certes n'est pas obligatoire au bon fonctionnement, mais bon (vu le pseudo, cela peu, ne pas plaire a tous de se retrouver avec ce mot dans le code source de la page Smile ) ...C'est de changer tout les biloute, présent dans le code au diffèrent endroit.
Code: Sélectionner - Agrandir

var biloute2 = pseudo.indexOf("]",biloute1);
   pseudonyme=Pseudo(pseudo.substring(biloute1+1,biloute2-1));


Alors là libre choix à vous de modifier ou pas cette variable, mais attention car les erreurs vont pleuvoir et là je ne ferais pas d'assistance sur ce problème, pour info cette variable est un morceau de mon pseudo et m'a permis de me mettre des repères dans le script.


Sploutch wrote:

petit plus, (je laisse le soin à biloute d'apporter les modifications sur les options de son tutoriel) vous pouvez mettre une image sous le bouton envoyer du formulaire.

Code: Sélectionner - Agrandir
 .tbmain{
       height:100%;
       color:#333333;
       background:url(url de votre image) ##ffebf7 top repeat-x;
    }


Recherchez et ajouter l'url image.


Encore merci à toi pour la modification du bouton de validation que je rajouterais au tuto.

En attendant que je rajoute les explications des modifications à faire sur le formulaire, vous pouvez regarder dans le script mis à jour, j'ai ajouté pas mal de remarques au endroits stratégique du script, cela pourra certainement vous aider.
Smile


Last edited by biloute54 on Thu 7 Jan 2010 - 20:58; edited 1 time in total
Author Message
Victorp
Membre


Offline
Membre

Joined: 22 Sep 2008
Posts: 151
Niveau:
Point(s): 132
Moyenne: 0.87
Windows 8 ou 10 Opera Masculin Gémeaux (21mai-20juin) 羊 Chèvre

PostPosted: Thu 7 Jan 2010 - 19:48    Post subject: Présentation Automatique V2 Reply with quote

Peut-être une petite explication pour rendre un champs non obligatoire....

Pour l'âge, il suffit d'enlever :

Code: Sélectionner - Agrandir
if(document.form_age.q23_age.value == "") {
  document.form_age.q23_age.focus();
  return false;
 }


Je ne me trompe pas?

Autre question : cette présentation automatique incrémente-elle le capital message du nouveau membre ?
_______________________


Forum
Author Message
biloute54


Offline
Guest




PostPosted: Thu 7 Jan 2010 - 20:24    Post subject: Présentation Automatique V2 Reply with quote

Bonsoir Victorp,
Victorp wrote:
Peut-être une petite explication pour rendre un champs non obligatoire....

Pour l'âge, il suffit d'enlever :

Code: Sélectionner - Agrandir
if(document.form_age.q23_age.value == "") {
  document.form_age.q23_age.focus();
  return false;
 }


Je ne me trompe pas?

Ce n'est pas tout à fait cela.
il faut :

cherchez
Code: Sélectionner - Agrandir
<tr >
  <td width="250" class="left" >
   <label ><u>Mon Age </u><span class="required">*</span></label>
  </td>
  <td class="right" >
<form Name="form_age" Id="form_age" action="" >
<input type="text" size="20" name="q23_age" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q23" onblur="validate(this,'Required')" maxlength="100" maxsize="100" /><em> Ecrivez ici votre Age</em>
</FORM>
</td>
 </tr>


Remplacez par :
Code: Sélectionner - Agrandir
<tr >
  <td width="250" class="left" >
   <label ><u>Mon Age </u></label>
  </td>
  <td class="right" >
<form Name="form_age" Id="form_age" action="" >
<input type="text" size="20" name="q23_age" onkeyup="Compter(this, this.form.CharRestant);" class="text" value="" id="q23"  maxlength="100" maxsize="100" /><em> Ecrivez ici votre Age</em>
</FORM>
</td>
 </tr>

attention si vous avez la version V2.0, votre code est un peu différent il faut supprimer dans votre code
Code: Sélectionner - Agrandir
onblur="validate(this,'Required')"
et
Code: Sélectionner - Agrandir
<span class="required">*</span>
sans ajouter en plus.

et comme tu l'as écrit, il faut supprimer la condition
supprimez
Code: Sélectionner - Agrandir
if(document.form_age.q23_age.value == "") {
  document.form_age.q23_age.focus();
  return false;
 }


Victorp wrote:
Autre question : cette présentation automatique incrémente-elle le capital message du nouveau membre ?


Oui la présentation incrémente le nombre de message


Last edited by biloute54 on Thu 7 Jan 2010 - 20:30; edited 2 times in total
Author Message
Victorp
Membre


Offline
Membre

Joined: 22 Sep 2008
Posts: 151
Niveau:
Point(s): 132
Moyenne: 0.87
Windows 8 ou 10 Opera Masculin Gémeaux (21mai-20juin) 羊 Chèvre

PostPosted: Thu 7 Jan 2010 - 20:27    Post subject: Présentation Automatique V2 Reply with quote

En enlevant la seule partie que j'ai mis en code, chez moi, cela fonctionne sans problème (champs vide).

Je précise que j'ai la première version postée....
_______________________


Forum
Author Message
biloute54


Offline
Guest




PostPosted: Thu 7 Jan 2010 - 20:32    Post subject: Présentation Automatique V2 Reply with quote

Regardes dans ton formulaire (la ou il est écrit "Age") il y a un astérisque rouge qui stipule à tes membres que le champs est obligatoire
c'est pour enlever également cet astérisque que je te fais faire ces modifications.
Smile

Edit : mis à jour du tutoriel (explication: comment modifier le formulaire)


Author Message
Sploutch
Membre


Offline
Membre

Joined: 02 Jan 2006
Posts: 584
Niveau:
Point(s): 632
Moyenne: 1.08
Masculin

PostPosted: Fri 8 Jan 2010 - 09:19    Post subject: Présentation Automatique V2 Reply with quote

Parfait la mise à jour ! Okay


Quote:

Il y à un point qui devrait etre mentionné, qui certes n'est pas obligatoire au bon fonctionnement, mais bon (vu le pseudo, cela peu, ne pas plaire a tous de se retrouver avec ce mot dans le code source de la page Smile ) ...C'est de changer tout les biloute, présent dans le code au diffèrent endroit.

Code: Sélectionner - Agrandir

    var biloute2 = pseudo.indexOf("]",biloute1);
       pseudonyme=Pseudo(pseudo.substring(biloute1+1,biloute2-1));



Alors là libre choix à vous de modifier ou pas cette variable, mais attention car les erreurs vont pleuvoir et là je ne ferais pas d'assistance sur ce problème, pour info cette variable est un morceau de mon pseudo et m'a permis de me mettre des repères dans le script.

J'avais bien compris.
Cela étant dans le code si tu modifie le pseudo "biloute" qui t'es propre, par un autre (celui du membre qui installe ce code sur son forum) et que tu le remplace à tout les endroits, il n'y aura aucun souci.
(c'est d'ailleurs ce que j'ai fait sur l'exemple que je donnais.)
_______________________
1 tour pour la forme.1 tour pour l'esprit.

| Le site pour les Filles | Me Soutenir | Smileys Fun | Mes Tutoriels | Mon formulaire D'aide | No Support MP |


Forum
Author Message
fredo80


Offline
Guest




PostPosted: Sat 9 Jan 2010 - 11:53    Post subject: Présentation Automatique V2 Reply with quote

bonjour ,est t'il possible de modifier  "formulaire de présentation " et "présentation de xxxx " par d'autre phrase ?

Author Message
biloute54


Offline
Guest




PostPosted: Sat 9 Jan 2010 - 14:40    Post subject: Présentation Automatique V2 Reply with quote

Bonjour,

Il est tout à fait possible de modifier "Formulaire de présentation"
Cherchez :
Code: Sélectionner - Agrandir
<th align="center" valign="middle" class="thHead" height="48" colspan="3">
         <span class="thHead"><span style="font-size: 20pt; font-family: Comic Sans MS; color:#F31C1C;">
            Formulaire de Présentation automatique
         </font></span></span>
      </th>

Replacez par :
Code: Sélectionner - Agrandir
<th align="center" valign="middle" class="thHead" height="48" colspan="3">
         <span class="thHead"><span style="font-size: 20pt; font-family: Comic Sans MS; color:#F31C1C;">
           La phrase que vous souhaitez
         </font></span></span>
      </th>

modifiez le texte :la phrase que vous souhaitez.

Pour le second, si vous souhaitez changer le texte, vous allez perdre sur le formulaire et uniquement sur le formulaire le pseudo du membre qui se présente, cela n'influera pas sur le post de présentation final, la présentation contiendra toujours le pseudo du membre.

Cherchez :
Code: Sélectionner - Agrandir
<script type="text/javascript">
  document.writeln ("Présentation de   " +(pseudonyme));
</script>


Remplacez par :
Code: Sélectionner - Agrandir
<script type="text/javascript">
  document.writeln ("La phrase que vous souhaitez");
</script>

modifiez le texte :"la phrase que vous souhaitez".
Attention à ne pas oublier de mettre les double quote exemple: "xxxxxxxxx: yyyyyy"

Smile


Author Message
Contenu Sponsorisé





PostPosted: Today at 19:03    Post subject: Présentation Automatique V2

Display posts from previous:   
Reply to topic Page 1 of 4 Goto page: 1, 2, 3, 4  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401