Deplacement - copie d'image

**pinpin_** · 21/11/2006, 15h45

Bonjour,
je vous explique mon petit soucis.

Je dois créer une page web permettant de générer un formulaire à l'aide de glissement d'image.

Actuellement voila ou j'en suis; les déplacements se passe bien ainsi que la recuperation des coordonnées et nom de l'image.
ors j'ai besoin de dupliquer certains de ceux ci.

Arrivé a la duplication des composants blocage des recuperations

voila un bout de code pour aider à comprendre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
 
<html>
<head>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<title>Drag&amp;Drop</title>
<link rel="stylesheet" type="text/css" href="../../newwalterzorn.css">
<style type="text/css">
<!--
body {
  padding:40px;
}
-->
</style>
</head>
<body>
<script type="text/javascript" src="wz_dragdrop.js"></script>
  <br>
  <h3 align="center">Suivre des images et les redimensionnes</h3>
  <p align="center">
    <img src="image.jpg" name="Image 1" alt="">
  </p>
  <p align="center">
    <img src="image2.jpg" name="Image 2" alt="">
  </p>
  <p align="center">
    <img src="image3.jpg" name="Image 3" alt="">
  </p>
  <form name="myForm">
    <center>
      <table>
        <tr>
          <td align="right">name = </td>
          <td><input name="NAME" type="text" size="12"></td>
          <td align="right">&nbsp;&nbsp;x = </td>
          <td><input name="X" type="text" size="12"></td>
          <td align="right">&nbsp;&nbsp;y = </td>
          <td><input name="Y" type="text" size="12"></td>
		  <td align="right">&nbsp;&nbsp;W = </td>
          <td><input name="W" type="text" size="12"></td>
		  <td align="right">&nbsp;&nbsp;H = </td>
          <td><input name="H" type="text" size="12"></td>
        </tr>
      </table>
    </center>
  </form>
 
 
<script type="text/javascript">
<!--
 
SET_DHTML(CURSOR_HAND, TRANSPARENT, RESIZABLE,"Image 1","Image 2"+COPY+5,"Image 3"+CLONE);
 
// permet de copie les images,
// mais les caches automatiquement -> permet de faire du glissé
for (var i = 0; i < 3; i++)
{
    dd.elements[i].copy();
    dd.elements[i].copies[0].hide();
}
 
// The following two functions override their empty namesakes predefined in wz_dragdrop.js.
// They are automatically invoked from wz_dragdrop.js when a drag operation starts
// and ends, respectively.
 
// Here we make the non-transparent 'placeholder' copy of the dragged image visible
// and move it to the place where the drag operation starts*/
function my_PickFunc()
{
    dd.obj.copies[0].moveTo(dd.obj.x, dd.obj.y);
}
 
// Here we hide the 'placeholder' again
function my_DropFunc()
{
    dd.obj.copies[0].hide();
 
    // Write the name and coordinates of the dropped item into form inputs:
    document.myForm.NAME.value = dd.obj.name;
    document.myForm.X.value = dd.obj.x;
    document.myForm.Y.value = dd.obj.y;
	document.myForm.W.value = dd.obj.w;
	document.myForm.H.value = dd.obj.h;
}
//-->
</script>
</body>
</html>

vous aurez juste besoin de trois fichiers image.jpg image2.jpg et image3.jpg à mettre à la racine ainsi que cet applet
http://walterzorn.com/scripts/wz_dragdrop.zip

merci d'avance.
je suis preneur d'autres solutions evidemment

**SpaceFrog** · 22/11/2006, 08h54

cloneNode(true) suivi d'un appendChild ...

Deplacement - copie d'image

JavaScript

Discussions similaires

Partager

Partager