g3x123
Gebruiker
- Lid geworden
- 23 mrt 2009
- Berichten
- 204
Hi everybody!
ik ben bezig met een onepager, een soort digitale schets.
velden moeten kunnen worden veranderd van kleur door middel van kleurcodes in te typen,
achteraf ga ik er nog een drag en drop systeem in steken, deze code werkt al gedeeltelijk maar hoeft geen aandacht aan besteed worden.
Nu is het probleem dat elke div een text area heeft met een submit button, maar je kan ze niet allemaal van kleur veranderen, 1 van de 3 kunnen slechts worden veranderd.
Kan iemand me helpen om het mogelijk te maken dat ze ALLEMAAL een aparte kleur kunnen krijgen?
Alvast bedankt!!
Dit is de code:
ik ben bezig met een onepager, een soort digitale schets.
velden moeten kunnen worden veranderd van kleur door middel van kleurcodes in te typen,
achteraf ga ik er nog een drag en drop systeem in steken, deze code werkt al gedeeltelijk maar hoeft geen aandacht aan besteed worden.
Nu is het probleem dat elke div een text area heeft met een submit button, maar je kan ze niet allemaal van kleur veranderen, 1 van de 3 kunnen slechts worden veranderd.
Kan iemand me helpen om het mogelijk te maken dat ze ALLEMAAL een aparte kleur kunnen krijgen?
Alvast bedankt!!
Dit is de code:
PHP:
<!DOCTYPE HTML>
<html>
<head>
<style>
body{background-color:#e7e7e7;}
#container{width:100%; margin:0 auto; height:1000px; padding:10px; background-color:white; border: 2px solid #888888; box-shadow:#999999 5px 5px 5px; text-align:center;}
#div_top{width:95%; margin:0 auto !important; height:350px; padding:10px; border:2px solid #aaaaaa; text-align:center;}
#div1 {width:29%;height:250px; margin:5px; padding:10px;border:1px solid blue; float:left;}
#div2 {width:29%;height:250px; margin:5px; padding:10px;border:1px solid red; float:left; position:absolute; left:50%; margin-left:-14.5%;}
#div3 {width:29%;height:250px; margin:5px; padding:10px;border:1px solid green; float:right;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="container">
<div id="div_top">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
if (isset($_POST['submit'])) {
$kleurlb = $_POST['kleur1'];
}
?>
<form method="post" name="div1">
Soort: <input name="kleur1" type="text" />
<input name="submit" type="submit" />
</form>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
if (isset($_POST['submit'])) {
$kleurmb = $_POST['kleur2'];
}
?>
<form method="post" name="div1">
Soort: <input name="kleur2" type="text" />
<input name="submit" type="submit" />
</form>
</div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
if (isset($_POST['submit'])) {
$kleurrb = $_POST['kleur3'];
}
?>
<form method="post" name="div3">
Soort: <input name="kleur3" type="text" />
<input name="submit" type="submit" />
</form>
</div>
</div>
<img id="drag1" src="cpt.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
<br /><br /><br /><br /><br />
<?php
echo $kleurlb;
echo $kleurmb;
echo $kleurrb;
?>
<style>
#div1{background-color: #<?php echo $kleurlb;?>;}
#div2{background-color: #<?php echo $kleurmb;?>;}
#div3{background-color: #<?php echo $kleurrb;?>;}
</style>
</html>
