update en code
net beginnend en wil graag een voorbeeld scriptje om mee te beginnen. Wie kan mij er aan 1 helpen?
Onderstaande is de bedoeling:
Het moet allemaal op 1 pagina gebeuren.
Ten eerste wordt er op die pagina een afbeelding getoond.
Onder die afbeelding moet een form komen te staan die gebruikt moet gaan worden om de width, height, en border te bepalen van de afbeelding.
Bij elke wijziging wil ik graag dat dit direct bij de afbeeling wordt uitgevoerd (onchange update of zoiets??)
Onder de form moet een textarea komen te staan waar ook direct (na elke wijziging in de form) een html-plaatsings code komt te staan.
Wie kan mij op weg helpen en zonodig een voorbeeldje maken?
Mijn voorkeur gaat uit naar volledig Php en het liefst niks/zo weinig mogelijk in javascript.
Ben net 3 weekjes bezig om zelf het e.e.a. te leren. En dit moet voor mij een begin worden om verder zelf ideeen te kunnen uitvoeren.
Jessica
Alles is het best uit te voeren met alleen maar javascript.
Uiteindelijk als de afbeelding 'ingesteld' is, zou je een submit kunnen doen en dan met php alles opslaan.
als werken met javascript voor zoiets de enigste/beste oplossing zou zijn dan maar met javascript.
Weet u ergens een voorbeeld waarmee ik aan de slag kan of kunt u mij verder op weg helpen met een voorbeeldje?
Jessica
Als je niets van javascript weet, zou ik een gaan rondneuzen op http://www.w3schools.com/ , daar staat veel uitgelegd en is ruimte om zelf te experimenteren.
Je zult merken dat javascript niet zomaar overal hetzelfde reageert, daarom geef ik de voorkeur aan het gebruik van een bibliotheek ( persoonlijk: mootools. Maar er zijn ook prototype, jQuery, dojo). Ik geef mijn voorbeeld maar in javascript icm met mootools, dat zal je op weg helpen:
http://tuincentrum.dyndns.info:81/_test/phphulp/img_resize.html
de broncode kun je gewoon bekijken.
( met mijn je-moet-js-maar-aan-hebben-staan opmerking, schop ik vast mensen tegen het zere been, mocht je daar een discussie over willen houden, dan doen we dat lekker in een ander topic!).
Gewijzigd op 01/01/1970 01:00:00 door storeman storeman
Dat is mede de reden dat ik zelf maar verder ben ga puzzelen en er nu bijna uit ben op 1 klein dingetje na.
Bij onderstaande script is het nu zo dat men de afbeelding pas te zien krijgt als ik bijv de breedte van de betreffende afbeelding heb gewijzigd.
Echter ik wil graag dat betreffende afbeelding al te zien is als ik de pagina binnenkom, en dat vervolgens elke wijziging die ik middels de form zal ga doen op diezelfde afbeelding zichtbaar is.
Wie kan mij een oplossing/tip geven waar,wat,hoe ik in de onderstaande script moet wijzigen?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
function generateHTMLCode(){
var url ="http://phphulp.nl/imgs/header/logo.gif";
var width = document.getElementById("width").value
code = ""
code += "<img\n"
code += "src=\""+url+"\" \n"
code += "width=\""+width+"\" height=\"150\">\n"
document.getElementById("code_text").value = code;
document.getElementById("preview").innerHTML = code;
}
</script>
<form method="post" name="demo">
<select id="width" onChange="generateHTMLCode();">
<option value="100" selected>100</option>
<option value="150">150</option>
<option value="200">200</option>
</select>
<br />
<input type="button" value="Code" onClick="generateHTMLCode()" />
<br />
PREVIEW: <div id="preview"></div>
<br />
<textarea id="code_text" rows="8" cols = "88"></textarea>
</form>
function generateHTMLCode(){
var url ="http://phphulp.nl/imgs/header/logo.gif";
var width = document.getElementById("width").value
code = ""
code += "<img\n"
code += "src=\""+url+"\" \n"
code += "width=\""+width+"\" height=\"150\">\n"
document.getElementById("code_text").value = code;
document.getElementById("preview").innerHTML = code;
}
</script>
<form method="post" name="demo">
<select id="width" onChange="generateHTMLCode();">
<option value="100" selected>100</option>
<option value="150">150</option>
<option value="200">200</option>
</select>
<br />
<input type="button" value="Code" onClick="generateHTMLCode()" />
<br />
PREVIEW: <div id="preview"></div>
<br />
<textarea id="code_text" rows="8" cols = "88"></textarea>
</form>
Gewijzigd op 01/01/1970 01:00:00 door Jessica
Meer info: http://mootools.net/
OK. Had ook al gezien dat middels mootools een heel hoop mogelijk is.
Maar daar ga ik mij later eens in verdiepen :)
Gewoon tussen de div-id-preview-tags de url v/d afbeelding plaatsen, latere wijzigingen in de form worden over die andere afbeelding heengezet.
<div id="preview"><img scr="http://phphulp.nl/imgs/header/logo.gif"> </div>
Of is dit een niet correcte oplossing???
Ik plak de code hier even, ik verkas nog wel eens, dus mijn localhost is niet altijd bereikbaar vanaf die url. Ik heb het even online gezet:
http://phphulp.storeman.nl/jsresize/
die heb ik idd gezien. Zie ook mijn post van: 24.02.2009 14:36
Oplossing is precies wat ik toen zocht echter vond ik de achterliggende javascript (mootools.js) voor mij nog wat gecompliceerd in elkaar zitten.
Maar ik ga er zeker nog eens mee stoeien. Ook met name de andere scripts+tutorials die via mootools worden aangeboden. Moet zeggen dat dat zeer leerzame stof is.
Heb nu in ieder geval mijn wensen werkende via wat eigen gepuzzel :)
Is na te lezen in 24.02.2009 14:36 & 24.02.2009 14:51