Door
Dennis Anderson
op 03-01-2013 01:04
gewijzigd op 03-01-2013 12:33
1.428 views
Beste forum leden,
Ik zoek op het internet ik google een beetje ik probeer dingen maar het lukt niet !
Mijn doel is om images op elkaar te laten gooien.
Mijn site gaat als volgt.. je wilt een t-shirt designen. Je hebt een plaatje van een tshirt met daarin een div waar je van alles mee kan doen.
Daarbuiten staan wat plaatjes als je op een plaatje klikt komt het plaatje in het div waar je van alles mee kan doen. Maar klik je op nog een plaatje dan komt dat plaatje ONDER de vorige te staan.. Doe dat 5x en de plaatjes gaan uit de DIV.
Dus is er een manier om plaatjes op te stapelen? meerdere dus niet 2 maar zoveel als je wilt?
position: fixed werkt niet want dan staan de plaatjes niet in de div en is niet liquid.
Dit kan wel met CSS hoor.
Het stapelen wel.
Maar het 'invoegen' in de <div> kan je beter met Javascript (danwel jQuery) doen.
Met position: relative; en z-index: ?; kan je heel wat voor elkaar krijgen.
Invoegen (Javascript) is dan niet meer dan een nieuw element aanmaken in die <div> met een class, die naar de CSS wijst:
Makkelijkste zou zijn als de plaatjes die je invoegt gewoon transparante PNG's zijn die hetzelfde formaat hebben als de <div> (zeg: t-shirt).
Je kan ze dan niet verplaatsen op het t-shirt, maar ze staan gelijk goed.
Anders moet je toch meer met jQuery doen (position: relative; top: ...; left: ...;).
Is het niet makkelijker om zoiets met JavaScript te gaan schrijven? Denk dat je stukken verder komt dan wanneer je het puur met css wilt gaan doen.
Het mag ook met Javascript !
Henze Berkheij op 03/01/2013 09:12:40
jQueryUI...en dan even kijken naar de drag & drop functionaliteit..
Dat wil ik niet, als ik het plaatje ga dragen en droppen dan werkt het inderdaad goed. Maar ik wil het plaatje meerdere keren gebruiken ! tuurlijk ik zou een functie kunnen schrijven om het plaatje bij het draggen te verdubbelen maar ik wil het graag op deze manier opgelost hebben :)
[size=xsmall]Toevoeging op 03/01/2013 12:33:57:[/size]
[size=xsmall]Toevoeging op 03/01/2013 14:06:34:[/size]
het is mij gelukt !! toen ik met javascript de div aanmaakte waar de plaatjes inzitten, dus niet dat gestippelde kader.. toen heb ik daar meteen een class aan gegeven en daarachter de position relative of absolute of fixed blabla
DAT DEED HET NIET
toen ik de position in CSS bij de class neerzette toen werkte het wel :) en heb gebruik gemaakt van Z-index :)
