Inclure valeur images dans champ texte [ - job's done - ]

Inclure valeur images dans champ texte [ - job's done - ] - HTML/CSS - Programmation

Marsh Posté le 17-08-2002 à 22:59:28    

à peu près tout est dans le titre... [:texla]  
 
je voudrais inséré un code HTML dans un champ txt en cliquant sur une image...... comankonfé  :??:


Message édité par xkamui le 19-08-2002 à 04:40:46
Reply

Marsh Posté le 17-08-2002 à 22:59:28   

Reply

Marsh Posté le 17-08-2002 à 23:08:52    

:heink:  
 
je suis pas sûr de comprendre ce que tu veux, mais comme ça je dirais : php + bdd ou alors JS si l'autre truc auquel je pense.
 
Précises ta question...


Message édité par LexTuhor le 17-08-2002 à 23:09:26
Reply

Marsh Posté le 17-08-2002 à 23:23:42    

un peu comme le menu de rédaction d'un message... en cliquant sur l'image 'G' il y a '[ g ]' qui vien s'afficher dans le champ texte...

Reply

Marsh Posté le 17-08-2002 à 23:25:12    

Ah, ça c du javascript.

Reply

Marsh Posté le 17-08-2002 à 23:26:10    

ok, mais comment n'on fait ??

Reply

Marsh Posté le 17-08-2002 à 23:30:01    

Tu fais un click droit sur la page de réponse d'HFR et tu regardes le code.
 
Sinon, tu apprends le Javascript, tu essayes par toi-même, et si tu n'y arrives pas, tu postes ton code et on essayera de t'aider à ce moment là. On va pas te chier un code tout prêt quand même...  ;)

Reply

Marsh Posté le 17-08-2002 à 23:34:33    

ok, alors voilà mon code :  
 

  • le fichier du formulaire :  
Code :
  1. $Img=Array(0=>'img','wall','vids','skin','txt','util','tab');
  2.   $Desc=Array(0=>'images','wallpapers','videos','skins WinAmp','textes','utilitaires','tableau wallpapers');
  3.   $Texte=Array(0=>'','','','','','',
  4.   '<TABLE width=100%><TR><TD><CENTER><IMG src=http://xkamui.wallpapers.free.fr/thumbs/000.jpg width=150 height=113 style=border: solid 1px; border-color: rgb(0, 0, 0)></CENTER></TD><TD><CENTER><IMG src=http://xkamui.wallpapers.free.fr/thumbs/000.jpg width=150 height=113 style=border: solid 1px; border-color: rgb(0, 0, 0)></CENTER></TD><TD><CENTER><IMG src=http://xkamui.wallpapers.free.fr/thumbs/000.jpg width=150 height=113 style=border: solid 1px; border-color: rgb(0, 0, 0)></CENTER></TD></TR></TABLE><BR>');
  5.  
  6.   For ($I=0;$I<7;$I++)
  7.    {
  8.    If ($I==3 || $I==6){echo "<BR>";}
  9.    If ($I>5) {echo "<IMG onclick=\"insertElt('$Texte[$I]',4)\" src=\"images/news/add/$Img[$I].gif\" alt=\"ajout $Desc[$I]\"  style=\"border: solid 1px; border-color: rgb(255, 255, 255)\"> ";}
  10.    Else {echo "<IMG onclick=\"insertElt('<A Href=http://xkamui.com.free.fr/index.php3?C=$Img[$I]>$Desc[$I]</A>',4)\" src=\"images/news/add/$Img[$I].gif\" alt=\"ajout $Desc[$I]\" style=\"border: solid 1px; border-color: rgb(255, 255, 255)\"> ";}
  11.    }
  12.  
  13. echo "
  14.   <FORM action=\"index.php3?F=news&C=addnews&Add=1\" method=\"Post\">
  15.   <FONT size=\"2\" color=\"#FFFFFF\" Face=\"Arial\"><B>News : </B></FONT><BR>
  16.   <TEXTAREA name=\"contenu\" cols=\"60\" rows=\"15\" ONFOCUS=\"storeCaret(this);\" ONSELECT=\"storeCaret(this);\" ONCLICK=\"storeCaret(this);\" ONKEYUP=\"storeCaret(this)\" class=\"champ\"></TEXTAREA><BR>
  17.   <INPUT type=\"submit\" value=\"submit\" class=\"bouton\"> 
  18.   </FORM>
  19.   ";


 

  • le fichier javascript :  
Code :
  1. var style = new Array('g','/g','i','/i','s','/s','email','/email','lien=','/lien','img','/img','quote','/quote');
  2. var stockage = new Array('0','0','0','0','0','0','0','0','0','0','0','0','0');
  3. lien="http://";
  4. function MM_findObj(n, d)
  5. {
  6. var p,i,x;  if(!d) d=document; if((p=n.indexOf("?" ))>0&&parent.frames.length)
  7.   {
  8.   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
  9.   }
  10. if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
  11. for(i=0;!x&&d.layers&&i>d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
  12. }
  13. function storeCaret (textEl)
  14. {
  15. if (textEl.createTextRange)
  16. textEl.caretPos = document.selection.createRange().duplicate();
  17. }
  18. function insertAtCaret (textEl, text)
  19. {
  20. if (textEl.createTextRange && textEl.caretPos)
  21.   {
  22.   var caretPos = textEl.caretPos;
  23.   caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
  24.   }
  25. }
  26. function insertInCaret (textEl, text, text2)
  27. {
  28. if (textEl.createTextRange && textEl.caretPos)
  29.   {
  30.   var caretPos = textEl.caretPos;
  31.   selectedtext = caretPos.text;
  32.   caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == '' ? text + '' : text;
  33.   caretPos.text = caretPos.text + selectedtext + text2;
  34.   }
  35. }
  36. function palette(id,vernav)
  37. {
  38. if (vernav>=4)
  39.   {
  40.   MM_findObj('contenu').focus();
  41.   if (MM_findObj('contenu').createTextRange && MM_findObj('contenu').caretPos)
  42.    {
  43.    var caretPos = MM_findObj('contenu').caretPos;
  44.    if (caretPos.text.length>0)
  45.     {
  46.     if (id!=8)
  47.      {
  48.      insertInCaret(MM_findObj('contenu'),"["+style[id]+"]","["+style[id+1]+"]" );
  49.      }
  50.     else
  51.      {
  52.      geturl = prompt("veuillez entrer l'url",'http://');
  53.      insertInCaret(MM_findObj('contenu'),"["+style[id]+geturl+"]","["+style[id+1]+"]" );
  54.      }
  55.     }
  56.     else
  57.     {
  58.     if ( (countbalise('['+style[id],'contenu')+countbalise('['+style[id+1],'contenu'))%2 == 0)
  59.      {
  60.      if (id!=8)
  61.       {
  62.       insertAtCaret(MM_findObj('contenu'),"["+style[id]+"]" );
  63.       }
  64.      else
  65.       {
  66.       geturl = prompt("veuillez entrer l'url",'http://');
  67.       insertAtCaret(MM_findObj('contenu'),"["+style[id]+geturl+"]" );
  68.       }
  69.      }
  70.     else
  71.      {
  72.      insertAtCaret(MM_findObj('contenu'),"["+style[id+1]+"]" );
  73.      }
  74.     MM_findObj('contenu').focus()
  75.     }
  76.    }
  77.   }
  78. else
  79.   {
  80.   if (stockage[id] == '0')
  81.    {
  82.    var temp = document.hop.contenu.value;
  83.    document.hop.contenu.value=temp+' '+'['+style[id]+']';
  84.    stockage[id] = '1';
  85.    }
  86.   else
  87.    {
  88.    var temp = document.hop.contenu.value;
  89.    document.hop.contenu.value=temp+'['+style[id+1]+']'+' ';
  90.    stockage[id] = '0';
  91.    }       
  92.   }
  93. }
  94. function countbalise(b,ch)
  95. {
  96. count = 0;
  97. pos = MM_findObj(ch).value.indexOf(b);
  98. while ( pos != -1 )
  99.   {
  100.   count++;
  101.   pos = MM_findObj(ch).value.indexOf(b,pos+1);
  102.   }
  103. return count;
  104. }
  105. function insertElt(MyString,vernav)
  106. {
  107. if (vernav>=4)
  108.   {
  109.   MM_findObj('contenu').focus();
  110.   if ((MM_findObj('contenu').createTextRange) && (MM_findObj('contenu').caretPos))
  111.    {
  112.    var caretPos = MM_findObj('contenu').caretPos;
  113.    if (caretPos.text.length>0)
  114.     insertInCaret(MM_findObj('contenu'),MyString,"" );
  115.    else
  116.     insertAtCaret(MM_findObj('contenu'),MyString);
  117.    }
  118.   }
  119. else
  120.   {
  121.   var temp = document.hop.contenu.value;
  122.   document.hop.contenu.value=temp+MyString;
  123.   }
  124. }
  125. function insertTag(MyString,vernav)
  126. {
  127. if (vernav>=4)
  128.   {
  129.   MM_findObj('contenu').focus();
  130.   if (MM_findObj('contenu').createTextRange && MM_findObj('contenu').caretPos)
  131.    {
  132.    var caretPos = MM_findObj('contenu').caretPos;
  133.    if (caretPos.text.length>0)
  134.     {
  135.     insertInCaret(MM_findObj('contenu'),"["+MyString+"]","[/"+MyString+"]" );
  136.     }
  137.    else
  138.     {
  139.     if ( (countbalise('['+MyString,'contenu')+countbalise('[/'+MyString,'contenu'))%2 == 0)
  140.      {
  141.      insertAtCaret(MM_findObj('contenu'),"["+MyString+"]" );
  142.      }
  143.     else
  144.      {
  145.      insertAtCaret(MM_findObj('contenu'),"[/"+MyString+"]" );
  146.      }
  147.     MM_findObj('contenu').focus();
  148.     }
  149.    }
  150.   }
  151. else
  152.   {
  153.   if (stockage[12] == '0')
  154.    {
  155.    var temp = document.hop.contenu.value;
  156.    document.hop.contenu.value=temp+' '+'['+MyString+']';
  157.    stockage[12] = '1';
  158.    }
  159.   else
  160.    {
  161.    var temp = document.hop.contenu.value;
  162.    document.hop.contenu.value=temp+'[/'+MyString+']'+' ';
  163.    stockage[12] = '0';
  164.    }
  165.   } 
  166. }
  167. ///Color
  168. col0 = new Array(255,0,0,255,0,0);
  169. col1 = new Array(0,0,255,0,0,255);
  170. col2 = new Array(0,0,0,0,255,0);
  171. col3 = new Array(0,255,0,255,0,0);
  172. var base_hexa = "0123456789ABCDEF";
  173. function dec2Hexa(number)
  174. {
  175. return base_hexa.charAt(Math.floor(number / 16)) + base_hexa.charAt(number % 16);
  176. }
  177. function RGB2Hexa(TR,TG,TB)
  178. {
  179. return "#" + dec2Hexa(TR) + dec2Hexa(TG) + dec2Hexa(TB);
  180. }
  181. function lightCase(MyObject)
  182. {
  183. MM_findObj('ColorUsed').bgColor = MyObject.bgColor;
  184. }
  185. function rgb(dm,ta,vernav)
  186. {
  187. if (vernav>=4)
  188.   {
  189.   fm = dm + 18;
  190.   for (i=dm;i<fm+1;i++)
  191.    {
  192.    r = Math.floor(ta[0] + (i-dm)*(ta[1]-ta[0])/(fm-dm));
  193.    g = Math.floor(ta[2] + (i-dm)*(ta[3]-ta[2])/(fm-dm));
  194.    b = Math.floor(ta[4] + (i-dm)*(ta[5]-ta[4])/(fm-dm));
  195.    codehex = r + '' + g + '' + b;
  196.    document.write('  <td bgColor=\"' + RGB2Hexa(r,g,b) + '\" onClick=\"insertTag(this.bgColor,5);lightCase(this);\" title=\"Mettre en couleur. Syntaxe : [#' + codehex + ']texte[/#' + codehex +' ]\" width=\"4\" height=\"17\"></td>\n');
  197.    }
  198.   }
  199. }

[i](qui n'est d'ailleurs que le fichier de hfr)


Message édité par xkamui le 18-08-2002 à 00:26:49
Reply

Marsh Posté le 17-08-2002 à 23:44:06    

ceci étant, le fichier hfr est un peu compliqué pour moi... et il y a beaucoup de choses qui ne me servent pas...
 
c'est pour ça que j'ai demandé un script, tout con, mais qui marche sufisemment pour moi...
 
un truc du style :  
<OnClick (print "blahblahblah" in $Champ)>

Reply

Marsh Posté le 18-08-2002 à 22:02:13    

[:dofor]  [:yoyoz]  [:dofor]

Reply

Marsh Posté le 18-08-2002 à 22:08:47    

<img src="..." ... onclick="maFonction('Mon texte';);">
 
function maFonction(texte) {
 
  document.monFormulaire.monChamp.value = texte;
}
 
 
PS: tu pensais vraiment qu'on allait lire tout ton code ?

Reply

Marsh Posté le 18-08-2002 à 22:08:47   

Reply

Marsh Posté le 18-08-2002 à 22:11:57    

j'esssaye ça...
 
pour le code php : oui
pour le code js  : non... assurément, mais ce n'est pas mon code, comme explicité en dessous

Reply

Marsh Posté le 18-08-2002 à 22:27:53    

voici donc mon code, qui marche presque :  

Code :
  1. <HTML>
  2. <HEAD>
  3. <SCRIPT>
  4. function walls(texte) {document.AddNews.News.value = texte;}
  5. function skins(texte) {document.AddNews.News.value = texte;}
  6. </SCRIPT>
  7. </HEAD>
  8. <BODY>
  9. <img src="images/news/add/wall.gif" onclick="walls('wallpapers');">
  10. <img src="images/news/add/skin.gif" onclick="skins('skins winamp');">
  11. <FORM method="Post" Name="AddNews" Action="txt.php">
  12. <TEXTAREA name="News">
  13. </TEXTAREA>
  14. <INPUT type="submit">
  15. </FORM>
  16. </BODY>
  17. </HTML>


 
le truc, c'est que, quand je click sur l'image wall, c'est le texte 'wallpapers' qui vient s'afficher dans le champ texte... (jusque là, pas de pb), mais que dès que je click sur l'image skin, le texte est Remplacé par 'skin winamp' et non ajouté à la suite....
 
alors comment faire....


Message édité par xkamui le 18-08-2002 à 22:28:16
Reply

Marsh Posté le 19-08-2002 à 01:33:39    

Déjà, pourquoi tu fais 2 fonctions qui font la même chose ?
 
Ensuite pour faire ce que tu veux faire, il faut l'écrire comme ça :
 
function walls(texte) {document.AddNews.News.value = document.AddNews.News.value + texte;}
 
Ou plus court :  
function walls(texte) {document.AddNews.News.value += texte;}

Reply

Marsh Posté le 19-08-2002 à 01:41:01    

Déjà, pourquoi tu fais 2 fonctions qui font la même chose ?
-> bah comment je peux faire alors avec deux images pour écrire pas la même chose ??...
 
Ensuite pour faire ce que tu veux faire, il faut l'écrire comme ça :
 
function walls(texte) {document.AddNews.News.value = document.AddNews.News.value + texte;}
 
Ou plus court :  
function walls(texte) {document.AddNews.News.value += texte;}

Youpiiii, ça marche....


Message édité par xkamui le 19-08-2002 à 01:41:10
Reply

Marsh Posté le 19-08-2002 à 01:48:04    

xkamui a écrit a écrit :

Déjà, pourquoi tu fais 2 fonctions qui font la même chose ?
-> bah comment je peux faire alors avec deux images pour écrire pas la même chose ??...



Ben tu peux appeler autant de fois que tu veux la même fonction :
 

<img src="images/news/add/wall.gif" onclick="maFonction('wallpapers');">  
<img src="images/news/add/skin.gif" onclick="maFonction('skins winamp');">


et

function maFonctionc(texte) {document.AddNews.News.value += texte;}


L'intérêt de passer 'texte' en paramètre de maFonction c'est bien de lui faire écrire ce qu'on veut.

xkamui a écrit a écrit :

Youpiiii, ça marche....



\o/ Ouééééééé !

Reply

Marsh Posté le 19-08-2002 à 01:56:26    

ok ok !!
 
encore une question...
quand je met :  

Code :
  1. <img src="images/news/add/tab.gif" onclick="txt('<IMG src="bozo.gif">');">

, il ne marche plus... je me doute que c'est à cause du double quote, mais comment faire...
 
la finalité serais d'inclure ce code complet :  

Code :
  1. <TABLE width="100%"><TR><TD><CENTER><IMG src="http://xkamui.wallpapers.free.fr/thumbs/085.jpg" width="150" height="113" style="border: solid 1px; border-color: rgb(0, 0, 0)"></CENTER></TD><TD><CENTER><IMG src="http://xkamui.wallpapers.free.fr/thumbs/086.jpg" width="150" height="113" style="border: solid 1px; border-color: rgb(0, 0, 0)"></CENTER></TD><TD><CENTER><IMG src="http://xkamui.wallpapers.free.fr/thumbs/087.jpg" width="150" height="113" style="border: solid 1px; border-color: rgb(0, 0, 0)"></CENTER></TD></TR></TABLE><BR>


et là, y'a plein de "...  :cry:

Reply

Marsh Posté le 19-08-2002 à 02:21:15    

Tu dois l'écrire


<img src="images/news/add/tab.gif" onclick="txt('<IMG src=\'bozo.gif\'>');">


ou


<img src="images/news/add/tab.gif" onclick='txt("<IMG src=\"bozo.gif\">" );'>


Tu dois échapper avec \ le quote ou le double quote. Mais on échappe le même caractère qui a servit à passer le paramètre dans la fonction.

Reply

Marsh Posté le 19-08-2002 à 04:40:13    

ok, c top nickel, merci pour tout !!! [:texla]

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed