Interface permettant de déplacer, augmenter la taille de div placées en absolute sur une image de fond

Bonjour à tous,

Je me tourne vers vous car je ne suis pas une killeuse en javascript, et on me demande aujourd'hui de réaliser une interface permettant de mettre à jour les positions de div placées en absolute sur une image de fond, de pouvoir également augmenter ou diminuer la taille de cette div.
Toutes les informations relatives aux div sont dans un fichier xml.

POur le moment, je parse le fichier en php, j'affiche chaque div avec les positions récupérées via le xml.

Il faut que je créé un formulaire, avec les champs correspondants, ayant les coordonnées pré-replies, et en changeant la valeur, visuellement au dessus on voit la div bouger, et en cliquant sur enregistrer, on va mettre à jour le fichier xml.

Je ne sais pas trop comment procéder.

Je vous mets en pièces jointes la maquette de ce qui est demandé, et la structure du fichier xml.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<images> <image name= [Nom de l’image] > <legendes> <legende> <text /> //texte de la légende <left /> //position gauche en px relative à l’image <top /> //position haute en px relative à l’image <width /> //largeur en px <size /> //taille de la police en px (de 7 à 12px) <align /> //alignement (left, justify, right, center) </legende> <legendes> </image> </images>

---

Si vous avez des idées, de techno (javascript, ou alors tout ajax), n'hésitez pas.

Un grand merci par avance à tous

Bonjour,

Voici la solution que je te propose :
- Parser le fichier xml
- Créer les divs avec les attributs height="xx" width="xx"
- Faire ton formulaire
- Récupérer les valeurs de height et width de ta div avec javascript (document.getElementById("madiv").height ...)
- Remplir les champs du formulaire avec les valeurs retournées
- Affecter une fonction onChange() a tes input avec à chaque fois modification du width et height des divs en fonction de la valeur des champs
- Si formulaire envoyé, modification du xml via php

La modification de cette manière sera "brutale". La div prendra la hauteur et largeur entrée. Pour un effet plus "souple" il faut se tourner vers des fonctions mathématiques ainsi que vers l'utilisation d'un timer.

J'espère t'avoir éclairé un peu?
Si tu rencontres des difficultés dans la mise en place du code n'hésites pas à nous consulter à nouveau.

Dans l'attente de ta réponse, je te souhaite une très bonne fin de journée,
Cdt,

Lenézé