Créer des zone réactives avec un éditeur visuel

**sami_c** · 15/11/2005, 17h51

Bjr,
Mon but est d'avoir une page web (que je developperais en PHP) qui permette d'uploader un fichier JPG (ça je peux le faire

. La principale fonction de la page est de permettre de créer des zone réactives sur l'image uploadé, je ne vois pas trop comment on peut faire. Est-ce qu'il y a une possibilité de le faire avec la souris (donc une sorte d'éditeur d'image très light) ? sinon on pourra permettre de saisie manuellement les coordonnées de chaque zone

quelqu'un a une idée ??
Merci

**Mr N.** · 15/11/2005, 18h10

Soluce sans javascript :
tu affiche l'image sous forme d'input dans un form

Code :

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

1
2
3
<form ...>
<input type="image" src="ton_image_uploadee.jpg" />
</form>

Tu récupérera ainsi les coordonnées du clic de l'utilisateur (var_dump($_REQUEST)) !
Donc tu peux faire un carré (2 clic, un haut-gauche + un bas-droite)
ce carré sura représenté par un div en position absolute, représentant la zone réactive !

Sinon regarde du côté de javascript...

**siddh** · 15/11/2005, 18h15

le probleme apres va etre de faire en sorte qu elle reste reactive non ?
le but final c est quoi ?
si tu le fais en js, en rentrant les coordonnées a la main car sinon ca est pas impossible mais tres chaud, tes infos apres tu vas en faire quoi ?
le js est volatile, pas d acces aux fichiers.
Tu pourras eventuellemnt transférer vers le serveur grace a xmlhttp.

Dis m'en plus

Selon ce que tu veux faire, ca peut m'interresser donc je peux coder des trucs js pourquoi pas.

**Mr N.** · 15/11/2005, 18h21

oui, ben une image en soi n'est jamais réactive, c'est le fait de la mettre dans un map... Donc une fois les zones définies => on stockes celles-ci pour les futurs affichages !

**siddh** · 15/11/2005, 18h22

oui voila, c est un editeur d image map qu il faut faire.

Je suis sur qu'on peut le faire en js mdr et on delegue le travail d'ecriture de la map a php.

[EDIT]
Comment ca n'importe quoi ?

**Mr N.** · 15/11/2005, 18h38

qui a dit n'importe quoi ?

**Mr N.** · 16/11/2005, 01h40

Je me dépeche avant qu'on me passe devant et qu'on propose un code alors que je me suis arraché pour celui là

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<?php 
$zones = array();
if(isset($_REQUEST['zone'])) {
	foreach($_REQUEST['zone'] as $zone) {
	    $zones[] = array('top' => $zone['top'], 'left' => $zone['left'], 'width'  => isset($zone['width'])?$zone['width']:0, 'height' => isset($zone['height'])?$zone['height']:0);
	}
}
if (count($zones) == 0) {
    $zones[] = array('top' => -1, 'left' => -1, 'width'  => 0, 'height' => 0);
}
$current = count($zones) - 1;
if(isset($_REQUEST['click']) && isset($_REQUEST['x']) && isset($_REQUEST['y'])) {
	if ($zones[$current]['top'] == -1) {
		$zones[$current]['top']  = $_REQUEST['y'];
		$zones[$current]['left'] = $_REQUEST['x'];
	} else { 
		if ($_REQUEST['y'] < ($zones[$current]['top'] + $zones[$current]['height'] / 2)) {
			$zones[$current]['height'] = $zones[$current]['height'] + $zones[$current]['top'] - $_REQUEST['y'];
			$zones[$current]['top']    = $_REQUEST['y'];
		} else {
			$zones[$current]['height'] = $_REQUEST['y'] - $zones[$current]['top'];
		}
		if ($_REQUEST['x'] < ($zones[$current]['left'] + $zones[$current]['width'] / 2)) {
			$zones[$current]['width'] = $zones[$current]['width'] + $zones[$current]['left'] - $_REQUEST['x'];
			$zones[$current]['left']    = $_REQUEST['x'];
		} else {
			$zones[$current]['width'] = $_REQUEST['x'] - $zones[$current]['left'];
		}
	}
}
 
if (isset($_REQUEST['save'])) {
    $current++;
    $zones[] = array('top' => -1, 'left' => -1, 'width'  => 0, 'height' => 0);
}
 
$can_save = $zones[$current]['width'] && $zones[$current]['height'];
 
 
?>
<html>
    <head>
        <style type="text/css">
        #map {
            position:relative;
        }
        #image {
            position:absolute;
        }
        .zone {
            position:absolute;
            border:1px solid blue;
        }
        .zone div {
            width:100%;
            height:100%;
            background:blue;
            opacity:0.2;
	    filter: alpha(opacity=20);
        }
        .done {
            border:1px solid orange;
        }
        .done div {
            background:yellow;
        }
	area {
		border:1px solid red;
	}
        </style>
    </head>
    <body>
    <div>
    <?php
    if (isset($_REQUEST['generate'])) {
	    ?> <img src="Nenuphars.jpg" usemap="#test_map" />
	    <map name="test_map">
            <?php $nb = count($zones);
	    for ($i = 0 ; $i < $nb - 1 ; $i++) { //On saute la dernière qui n'est jamais inachevée
		    ?><area href="zone_<?=$i?>.html" alt="zone <?=$i?>" title="zone <?=$i?>" shape="rect" coords="<?=$zones[$i]['left']?>,<?=$zones[$i]['top']?>,<?=$zones[$i]['left']+$zones[$i]['width']?>,<?=$zones[$i]['top']+$zones[$i]['height']?>" />
		    <?php
	    } ?>
	    </map><?php
    } else {
	    ?>
    <form action="" method="GET">
	<input type="hidden" name="click" value="1" />
        <input type="submit" name="save" value="save" <?=($can_save?'':'disabled="disabled"')?> />
        <input type="submit" name="generate" value="generate" />
        <?php foreach($zones as $key => $value) { ?>
		<input type="hidden" name="zone[<?=$key?>][top]" value="<?=$value['top']?>" />
		<input type="hidden" name="zone[<?=$key?>][left]" value="<?=$value['left']?>" />
		<input type="hidden" name="zone[<?=$key?>][width]" value="<?=$value['width']?>" />
		<input type="hidden" name="zone[<?=$key?>][height]" value="<?=$value['height']?>" />
        <?php } ?>
        <div id="map">
            <input id="image" type="image" src="Nenuphars.jpg" />
            <?php foreach($zones as $key => $value) { ?>
                <div class="zone <?php echo $key!=$current?'done':''; ?>" style="top:<?=$value['top']?>;left:<?=$value['left']?>;height:<?=$value['height']?>;width:<?=$value['width']?>;"><div></div></div>
            <?php } ?>
        </div>
    </form>
    <?php } ?>
    </div>
    </body>
</html>

Plus fort que le roquefort, il y a pas besoin de javascript ! 8)

Il faut juste changer les deux chemins vers l'image et c'est marre.
Ensuite l'utilisation est super facile

- On défini une zone (on clique, on clique, on clique,...)
- On la sauvegarde
- On définit la suivante
- etc.
- On génère !
- Si on est pas content on fait back dans le navigateur et on revient à n'importe quelle étape 8)

TODO:
- Nettoyer le code car suite à mes différents tests il reste pleins de cochonneries
- rendre la définition des zones plus intuitives

- gérer les "shape" autres que rectangle (cercle/polynomes)
- donner la possibilité de donner une description+url lors de l'edition de la zone
- ...

Amusez vous bien

**siddh** · 16/11/2005, 01h56

ptdr ^^

vais tester ca, je proposerais pitetre une version js

[EDIT]

chapeau bas c'est superbe, je pense meme que je vais m'en servir

**sami_c** · 16/11/2005, 10h18

Mr N. > Super ton code ... merci

siddh >> Mon but est de créer des zone réactives visuellement, en suite, pour chaque zone je doit permettre de saisie des données (exp : url, ...) le tout sera ensuite enregistré dans une bdd (avec php/mysql)

**siddh** · 16/11/2005, 10h23

ouki, ben t as deja tout la

Mr N. prend la carte bleue, les chèques et les espèces ...

Tu l'as fais travailler toute la nuit tu te rend compte, pendant que je jouais a la ps2 moi