javascript widget

[hahalol]

Beste mensen,

ik moet voor een school opdracht een 'widget' maken waarin je kleding kan kiezen en wijzigen, en op een poppetje(plaatje) kan projeceteren. Zeg maar een poppetje kleden. Dus eigenlijk wat ik vraag is hoe je plaatjes op andere plaatjes krijgt, en dat ook onthoud als je bijvoorbeeld verder met een ander kledingstuk gaat.

Het moet in css, html en javascript. De website is al ongeveer af.

Kunnen jullie mij misschien helpen hoe ik dit moet aanpakken?

Met vriendelijke groet,

hahalol

 

[Glest]

Aangezien het een schoolopdracht is kunnen we geen script schrijven, maar helpen mag natuurlijk altijd

Om plaatsen boven andere plaatjes te plaatsen kun je met CSS iets doen als dit:

img#poppetje
{
  position: abosulte;
  top: 200px;
  left: 200px;
  z-index: 0;
}

img#tshirt1
{
  position: aboslute;
  top: 220px;
  left: 200px;
  z-index: 1;
}

De "position: absolute" en "top/left" zorgt voor de positie van de plaatjes, "z-index" bepaalt welk element voor een ander element moet. Een hogere z-index betekent dat het plaatje meer op de voorgrond zit.

Met javascript kun je ook nog de plaatjes sleepbaar maken door imgelement.style.top/left aan te passen in het juiste mouse-element. Optioneel kun je dan ook imgelement.style.zIndex hoger zetten dan de rest van de plaatjes zodat het laatst gesleepte plaatje boven de andere plaatjes komt (let wel op dat je niet eindeloos de z-index gaat verhogen).

 

[hahalol]

Oke bedankt voor je antwoord! Hier kan ik wat meer mee.

Alleen nog een vraagje..
Ik zat te denken aan een menu met kleren zoals:
-Mutsen en petten
-T-shirts
-Broeken
-Schoenen

ALs je dan bijvoorbeeld een muts hebt gesleept naar dat poppetje (want ik weet hoe ik een plaatje moet slepen en vergroten/verkleinen), en je gaat verder met een t-shirt, blijft die muts dan op de gewenste plek staan?

Hoe zou je dat doen?

ALvast bedankt !!!

 

[Glest]

Ja, hij verplaats niet zomaar. Wel als je de pagina afsluit natuurlijk, maar als je iets hebt gesleept blijft het staan zolang de pagina open is

 

[hahalol]

Oke bedankt voor je antwoorden Glest! :thumb:Ik ga er mee aan de slag, en ik laat wel weten als het niet lukt..

Goeienavond!