<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>Document sans titre</title>
<link rel="stylesheet" href="css/font.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript">
function change_cellule(texte)
{
document.getElementById('zone').innerHTML = texte;
}
</script>
<script type="text/javascript">
function setZoneCSS(propriete, valeur){
var zone = document.getElementById("zone");
if(zone){
zone.style[propriete] = valeur;
}
}
</script>
</script>
<script type="text/javascript">
function ChangeImage(url) {
document.getElementById("img").src = url;
}
</script>
<script type="text/javascript">
function remplirInput() {
var zone = document.getElementById("zone");
var texte = zone.texte ;
document.getElementById('text').setAttribute('value', texte);
var fontSize = zone.style.fontSize;
document.getElementById('fontSize').setAttribute('value', fontSize);
var fontColor = zone.style.color;
document.getElementById('fontColor').setAttribute('value', fontColor);
var fontFamily = zone.style.fontFamily;
document.getElementById('fontFamily').setAttribute('value', fontFamily);
var fontStyle = zone.style.fontStyle;
document.getElementById('fontStyle').setAttribute('value', fontStyle);
var fontWeight = zone.style.fontWeight;
document.getElementById('fontWeight').setAttribute('value', fontWeight);
}
</script>
<script type="text/javascript">
function setZoneCSS(propriete, valeur) {
var zone = document.getElementById("zone");
if (zone) {
zone.style[propriete] = valeur;
remplirInput();
}
}
</script>
<script type="text/javascript">
function setZoneTextContent(valeur) {
var zone = document.getElementById("zone");
if (zone) {
zone.textContent = valeur;
remplirInput();
}
}
</script>
<style>
#zone {
position:absolute;
text-align:center;
width:165px;
height:100px;
border:dotted #FF0000 2px;
left: 116px;
top: 94px;
z-index:100;
}
</style>
</head>
<body onLoad="remplirInput">
<table width="800px" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff">
<tr>
<td>
<div class="menu">
<a href="index.php">Accueil</a>
</div>
<div class="menu">
<a href="teetext.php" id="activ">Ajouter texte</a>
</div>
<div class="menu" >
<a href="teemot.php">Ajouter motif</a>
</div>
<div class="menu" >
<a href="teetexmot">Texte et motif</a>
</div>
<div style=" width:800px; position:relative; float:left">
<div style="position:relative; float:left" >
<img src="images/01.jpg" width="400" id="img">
</div>
<div style="width:190px; margin-left:5px; float:left">
<div class="police" id="zone" contenteditable>Votre texte</div>
<!-- <textarea onkeyup="change_cellule(this.value)"> </textarea><br><br>
<a href="#" onclick="regleStyle('01'); return false">police1</a>
<a href="#" onclick="regleStyle('02'); return false">police2</a>
<a href="#" onclick="regleStyle('03'); return false">police3</a><br><br>-->
<b>POLICE</b>
<div id="cont1">
<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Verdana'); return false">Verdana</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Cursive'); return false">Cursive</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Verdana'); return false">Verdana</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Cursive'); return false">Cursive</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','most_waztedregular'); return false">Mostwasted</a>
</div>
<br>
<b>TAILLE_DU_TEXTE</b>
<div id="cont1">
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','15px'); return false">Taille 15</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','20px'); return false">Taille 20</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','25px'); return false">Taille 25</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','30px'); return false">Taille 30</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','35px'); return false">Taille 35</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','40px'); return false">Taille 40</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','45px'); return false">Taille 45</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','50px'); return false">Taille 50</a><br>
</div>
<br>
<b>COULEUR_DU_TEXTE</b>
<div id="cont1">
<a class="fenetre" href="#" onclick="setZoneCSS('color','red'); return false">Texte en rouge</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('color','white'); return false">Texte en blanc</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('color','yellow'); return false">Texte en jaune</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('color','black'); return false">Texte en noir</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('color','green'); return false">Texte en vert</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('color','orange'); return false">Texte en orange</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('color','grey'); return false">Texte en gris</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('color','blue'); return false">Texte en bleu</a>
</div>
<br>
<div style="width:190px; float:left">
<div class=" lar">
<a class="fenetre" href="#" onclick="setZoneCSS('fontStyle','italic'); return false">Italique</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontStyle',''); return false">Supprimer</a></div>
<div class="lar">
<a class="fenetre" href="#" onclick="setZoneCSS('fontWeight','bold'); return false">Gras</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontWeight',''); return false">Supprimer</a></div>
</div>
</div>
<div>
<div style="clear:both"></div>
<div>
<img src="images/01.jpg" height="110" onClick="ChangeImage(this.src);">
<img src="images/02.jpg" height="110" onClick="ChangeImage(this.src);">
<img src="images/03.jpg" height="110" onClick="ChangeImage(this.src);">
</div>
</div>
<script type="text/javascript">
function change_cellule(texte)
{
texte = document.getElementById('zone').textContent; {
alert(texte);
}
}
</script>
<div style="clear:both"></div>
<form name="" id="remplirInput()" action="traitement.php" method="post">
<input type="hidden" name="text" id="text" value="">
<input type="hidden" name="texte" id="texte" value="">
<input type="hidden" name="fontSize" id="fontSize" value="" >
<input type="hidden" name="fontColor" id="fontColor" value="" >
<input type="hidden" name="fontFamily" id="fontFamily" value="" >
<input type="hidden" name="fontStyle" id="fontStyle" value="" >
<input type="hidden" name="fontWeight" id="fontWeight" value="" >
<!-- Etc.. -->
<input type="submit" value="envoyer">
</form>
<A href="javascript:;" onClick="change_cellule();">Texte1</A><br>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<form name="" id="remplirInput()" action="traitement.php" method="post">
<input type="hidden" name="text" id="text" value=""> <input type="hidden" name="texte" id="texte" value="">
echo "<pre>Variables POST :<br>"; print_r($_POST); echo "</pre>";
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>Document sans titre</title>
<link rel="stylesheet" href="css/font.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript">
function change_cellule(texte)
{
document.getElementById('zone').innerHTML = texte;
}
</script>
<script type="text/javascript">
function setZoneCSS(propriete, valeur){
var zone = document.getElementById("zone");
if(zone){
zone.style[propriete] = valeur;
}
}
</script>
<script type="text/javascript">
function ChangeImage(url) {
document.getElementById("img").src = url;
}
</script>
<script type="text/javascript">
function remplirInput() {
var zone = document.getElementById("zone");
var maVariable = zone.textContent ;
document.getElementById('maVariable').setAttribute('value', maVariable);
var fontSize = zone.style.fontSize;
document.getElementById('fontSize').setAttribute('value', fontSize);
var fontColor = zone.style.color;
document.getElementById('fontColor').setAttribute('value', fontColor);
var fontFamily = zone.style.fontFamily;
document.getElementById('fontFamily').setAttribute('value', fontFamily);
var fontStyle = zone.style.fontStyle;
document.getElementById('fontStyle').setAttribute('value', fontStyle);
var fontWeight = zone.style.fontWeight;
document.getElementById('fontWeight').setAttribute('value', fontWeight);
}
</script>
<script type="text/javascript">
function setZoneCSS(propriete, valeur) {
var zone = document.getElementById("zone");
if (zone) {
zone.style[propriete] = valeur;
remplirInput();
}
}
</script>
<script type="text/javascript">
function setZoneTextContent(valeur) {
var maVariable = document.getElementById("zone");
if (zone) {
zone.textContent = valeur;
remplirInput(maVariable);
}
}
</script>
<style>
#zone {
position:absolute;
text-align:center;
width:165px;
height:100px;
border:dotted #FF0000 2px;
left: 116px;
top: 94px;
z-index:100;
}
</style>
</head>
<body onLoad="remplirInput">
<table width="800px" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff">
<tr>
<td>
<div class="menu">
<a href="index.php">Accueil</a>
</div>
<div class="menu">
<a href="teetext.php" id="activ">Ajouter texte</a>
</div>
<div class="menu" >
<a href="teemot.php">Ajouter motif</a>
</div>
<div class="menu" >
<a href="teetexmot">Texte et motif</a>
</div>
<div style=" width:800px; position:relative; float:left">
<div style="position:relative; float:left" >
<img src="images/01.jpg" width="400" id="img">
</div>
<div style="width:190px; margin-left:5px; float:left">
<div class="police" id="zone" contenteditable>Votre texte</div>
<!-- <textarea onkeyup="change_cellule(this.value)"> </textarea><br><br>
<a href="#" onclick="regleStyle('01'); return false">police1</a>
<a href="#" onclick="regleStyle('02'); return false">police2</a>
<a href="#" onclick="regleStyle('03'); return false">police3</a><br><br>-->
<b>POLICE</b>
<div id="cont1">
<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Verdana'); return false">Verdana</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Cursive'); return false">Cursive</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Verdana'); return false">Verdana</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','Cursive'); return false">Cursive</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontFamily','most_waztedregular'); return false">Mostwasted</a>
</div>
<br>
<b>TAILLE_DU_TEXTE</b>
<div id="cont1">
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','15px'); return false">Taille 15</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','20px'); return false">Taille 20</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','25px'); return false">Taille 25</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','30px'); return false">Taille 30</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','35px'); return false">Taille 35</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','40px'); return false">Taille 40</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','45px'); return false">Taille 45</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontSize','50px'); return false">Taille 50</a><br>
</div>
<br>
<b>COULEUR_DU_TEXTE</b>
<div id="cont1">
<a class="fenetre" href="#" onclick="setZoneCSS('color','red'); return false">Texte en rouge</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('color','white'); return false">Texte en blanc</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('color','yellow'); return false">Texte en jaune</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('color','black'); return false">Texte en noir</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('color','green'); return false">Texte en vert</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('color','orange'); return false">Texte en orange</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('color','grey'); return false">Texte en gris</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('color','blue'); return false">Texte en bleu</a>
</div>
<br>
<div style="width:190px; float:left">
<div class=" lar">
<a class="fenetre" href="#" onclick="setZoneCSS('fontStyle','italic'); return false">Italique</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontStyle',''); return false">Supprimer</a></div>
<div class="lar">
<a class="fenetre" href="#" onclick="setZoneCSS('fontWeight','bold'); return false">Gras</a><br>
<a class="fenetre" href="#" onclick="setZoneCSS('fontWeight',''); return false">Supprimer</a></div>
</div>
</div>
<div>
<div style="clear:both"></div>
<div>
<img src="images/01.jpg" height="110" onClick="ChangeImage(this.src);">
<img src="images/02.jpg" height="110" onClick="ChangeImage(this.src);">
<img src="images/03.jpg" height="110" onClick="ChangeImage(this.src);">
</div>
</div>
<div style="clear:both"></div>
<form name="" id="" action="traitement.php" method="post">
<input type="hidden" name="maVariable" id="maVariable" value="">
<input type="hidden" name="fontSize" id="fontSize" value="" >
<input type="hidden" name="fontColor" id="fontColor" value="" >
<input type="hidden" name="fontFamily" id="fontFamily" value="" >
<input type="hidden" name="fontStyle" id="fontStyle" value="" >
<input type="hidden" name="fontWeight" id="fontWeight" value="" >
<!-- Etc.. -->
<input type="submit" value="envoyer">
</form>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<div>
<img src="images/01.jpg" height="110" onClick="ChangeImage(this.src);">
<img src="images/02.jpg" height="110" onClick="ChangeImage(this.src);">
<img src="images/03.jpg" height="110" onClick="ChangeImage(this.src);">
</div>
<script type="text/javascript">
function ChangeImage(url) {
document.getElementById("img").src = url;
}
</script>
je voudrai aussi faire la même chose avec l'image de fond
function ChangeImage(url,id_input_hidden) { document.getElementById("img").src = url; }
<input type="hidden" id="id_image_1" name="image_1" value="" > <input type="hidden" id="id_image_2" name="image_2" value="" > <input type="hidden" id="id_image_3" name="image_3" value="" >
<img src="images/01.jpg" height="110" onClick="ChangeImage(this.src,'image_1');"> <img src="images/02.jpg" height="110" onClick="ChangeImage(this.src,'image_2');"> <img src="images/03.jpg" height="110" onClick="ChangeImage(this.src,'image_3');">
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionfunction remplirInput2() {
document.getElementById('monImage').value = document.getElementById("img").src;
}
<input type="hidden" name="monImage" id="monImage" value="" >
<input type="submit" id="" value="Envoyer" onClick="remplirInput2()">