Sujet Précédent Sujet Suivant

Layers

Fermé
bernard26000 - 4 août 2007 à 23:23
Posotaz Messages postés 489 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 19 juin 2011 - 6 août 2007 à 22:45
Bonsoir à tous

J'essaie de faire un ch'ti programme, le but est de permettre aux utilisateurs de choisir une image, et de pouvoir y mettre le texte qu'il veulent dessus, jusque là tout va bien....

J'essaie de me servir d'un layer, mais le probleme c'est que l'image selectionnée disparait quand on veut visualiser le texte sur l'image... assez ennuyeux pour un visuel....

Je mets mon bout de code ca vous parlera peut etre plus que mon discours.... 

</table>
<tr>
<td valign="middle"> Votre texte
<textarea name="text" rows="3" cols="30">

</textarea></td></tr>


<table width="591" border="0" cellspacing="0" cellpadding="0"> 
<tr> 

<td width="11"></td> 

</tr> 
<tr> 
<td align="left" valign="middle">Police : </td> 
<td><select name="police" id="police"> 
<option value="Arial">Arial</option> 
<option value="Courier">Courier</option> 
<option value="Monotype Corsiva">Monotype Corsiva</option> 
<option value="Georgia">Georgia</option>
<option value="Time New Roman">Time</option>
</select></td> 
<td align="left" valign="middle">Taille : </td> 
<td><select name="taille" id="taille"> 
<option value="2">2</option> 
<option value="4">4</option> 
<option value="6">6</option> 
</select></td> 
</tr>
<tr><td height="28"><p>&nbsp;</p>
  <p>
  <?php
  
  if ($mod=='mod1')
  { $url='http://127.0.0.1/encore/image/blanc.jpg';}
  elseif ($mod=='mod2')
  { $url='http://127.0.0.1/encore/image/blancf.jpg';}
  elseif ($mod=='mod3')
  { $url='http://127.0.0.1/encore/image/blancrouge.jpg';}
  elseif ($mod=='mod4')
  { $url='http://127.0.0.1/encore/image/blandrose_f.jpg';}
  elseif ($mod=='mod5')
  { $url='http://127.0.0.1/encore/image/blanml.jpg';}
  elseif ($mod=='mod6')
  { $url='http://127.0.0.1/encore/image/deb_blanc.jpg';}
  elseif ($mod=='mod7')
  { $url='http://127.0.0.1/encore/image/debblanc_2f.jpg';}
  elseif ($mod=='mod8')
  { $url='http://127.0.0.1/encore/image/debblanc_3f.jpg';}
  elseif ($mod=='mod9')
  { $url='http://127.0.0.1/encore/image/debnoir.jpg';}
  elseif ($mod=='mod10')
  { $url='http://127.0.0.1/encore/image/jaune.jpg';}
  elseif ($mod=='mod11')
  { $url='http://127.0.0.1/encore/image/noir.jpg';}
  elseif ($mod=='mod12')
  { $url='http://127.0.0.1/encore/image/rouge.jpg';}
  else
  { $url="";}
  ?>
    <input type="submit" name="submit" value="Visualiser">
  </p></td></tr>
</table>
  <table width="591" height="100" border="2" cellspacing="0" cellpadding="0"> 
<tr>
<td>
<img src="<?php echo $url; ?>" width="240" height="240">
  <p>
 
<div id="Layer1" style="position : absolute; width : 120px; height : 100px; z-index : 1; left : 63px; top: 236px"><?php
echo  ("<font size= $taille face= $police > $text </font>");?></div> 


</div>
 
</p>
  <p>&nbsp;  </p>
  </td></tr>
  </table>
  
<tr><td>	
<input type="reset" name="reset" value="Annuler">
	</td></tr>

</form>
</body>
</html>

Voilà je ne sais pas si ca vous parleras....
En fait "mod" est le modele d'image choisit par l'utilisateur, ici c'est la page ou on peut (normalement) mettre du texte sur les photos...

en tout cas merci pour le temps que vous passerez sur ce script

Cordialement

3 réponses

Réponse 1 / 3
Posotaz Messages postés 489 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 19 juin 2011 225
5 août 2007 à 18:43
Salut,

J'ai beau décortiquer ton code, je ne vois pas ce qui provoquerait la disparition de l'image. Tu n'as pas placé de fond sur ton bloc DIV à ce que je sache, donc en principe le fond du bloc texte reste transparent (et en plus il est plus petit que ton image).

J'ai fait une simulation de ton code (ou du moins de l'intention que tu as) en JavaScript et le texte est bel et bien affiché sur l'image sans rien faire disparaître.

Sinon tu peux toujours placer ton image en image de fond d'un bloc 
echo "<div style=\"background-image: url('$url')\">$text</div>";

Je te mets quand même la simulation JavaScript : 
<html>
<head>
	<title>Test CCM layers</title>
	<script type="text/javascript">
	function visualiser() {
		var layer = document.getElementById("layer1");
		layer.style.fontSize = document.getElementById("taille").value + "px";
		layer.style.fontFamily = document.getElementById("police").value;
		layer.innerHTML = document.getElementById("texte").value;
	}
	</script>
</head>

<body>

<div>
	<label for="text">Votre texte</label>
	<textarea id="texte" name="texte" rows="3" cols="30"></textarea>
</div>

<div>
	<label for="police">Police : </label>
	<select name="police" id="police"> 
		<option value="Arial">Arial</option> 
		<option value="Courier">Courier</option> 
		<option value="Monotype Corsiva">Monotype Corsiva</option> 
		<option value="Georgia">Georgia</option>
		<option value="Time New Roman">Time</option>
	</select>
</div>

<div>
	<label for="taille">Taille : </label> 
	<select name="taille" id="taille"> 
		<option value="10">10</option> 
		<option value="15">15</option> 
		<option value="20">20</option> 
	</select>
</div>
    
<input type="button" name="submit" value="Visualiser" onclick="visualiser()" />

<div><img src="bad-bear.jpg" style="width: 240px; height: 240px; z-index: 0" /></div>
<div id="layer1" style="position: relative; width: 240px; height: 240px; z-index: 1; margin-left: 63px; margin-top: -50px; color: blue">&nbsp;</div> 

</body>
</html>

Sinon encore, regarde peut-être du côté de la librairie GD de PHP, il doit forcément y avoir une méthode qui permette d'ajouter un texte à une image existante. L'idée serait de créer un fichier .php qui génère cette image et dans le src de ton image tu places l'adresse de ce script. Mais je ne saurai t'en dire plus, je ne connais pas bien cette librairie.
0
Réponse 2 / 3
bernard26000 Messages postés 5 Date d'inscription lundi 25 juin 2007 Statut Membre Dernière intervention 13 août 2007
6 août 2007 à 08:53
Salut Posotaz

Je tiens tout particulierement à te remercier, ca marche à la perfection, tu es un AS...

J'ai rajouter la possibilité de modifier la couleur de la police, mais pour l'instant ca ne marche pas, j'ai pourtant modifier ton "javascript", mais c'est moins important, je finirai par trouver...

Je te remercie encore...
Cordialement
0
Réponse 3 / 3
Posotaz Messages postés 489 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 19 juin 2011 225
6 août 2007 à 22:45
Je t'emprie, sur ce lien tu trouveras la liste des attributs de l'objet Style en JavaScript : http://fr.selfhtml.org/javascript/objets/style.htm

Mais bon ma solution reste du JavaScript, en l'adaptant tu devrais pouvoir revenir sur ton idée initiale du formulaire en PHP.
0