Discussion :

[mickado]

Bonjour

Je ne trouve pas réponse a mon probléme où que ce soit

J'aimerais savoir comment créer une zone cliquable sur une image, que toute l'image enfaite soit une zone cliquable.

Et que l'orsque l'internaute clique sur cette image, alors un petit carrer s'affiche sur l'endroit cliquer et que les informations de la zone cliquer soit enregistrer.


EXEMPLE : http://worldwide.tilllate.com/picpag...3&fid=43399483

quelqu'un sais faire ça ?

Merci.

[Shinuza]

Une zone cliquable c'est simple, il suffit de mettre un lien autour de ton image. Pour le reste il faut mieux t'expliquer /donner un exemple.

[olymat]

je ne suis pas certain d'avoir compris ton problème .... non j'ai pas compris, faut réexpliquer avec un exemple à l'appui.

[Navyel]

Pour creer une "zone cliquable" sur l'image il suffit de mettre un lien classique.

Apres si tu veux afficher des informations comme tu met l'evenement "onclick" sur ton image et si t'as quelques notions de javascript il te suffit de creer une div en position absolute là ou est positionnée ta souris, et eventuellement faire une requête ajax qui va chercher les informations nécessaires dans une base de donnée.

C'est très simple, mais si tu n'as aucune notion de javascript/ajax, tu risque d'avoir un peu de mal.

Si tu veux que je sois plus précis, donne moi plus de détails, sois plus explicite et n'hésite pas à envoyer les codes que tu auras essayé.

[martel]

Bonjour,

Et bien si j'ai bien compris ce que tu désires faire, ressemble a ce que j'ai fait, et voici la méthode html classique.

Tout d'abord il te faut un formulaire dont l'action est le nom de cette même page ci, où tu placeras ceci :
<input type="image" src="/cheminimage/image.jpg" name="pi" />

au moment ou tu cliques sur l'image, si tu es en GET tu verras dans l'url, deux champs (pi_x et pi_y) qui sont les coordonnées en pixels de l'endroit cliqué.

a partir de là tu fais ce que tu veux.. voilà j'espère que c'est bien ce que tu désirais faire.

[mickado]

oui enfaite une page est afficher a mes utilisateurs avec une photo sur celle-ci.

et je voudrais que ceux ci puisse cliquer sur n'importe quel endroit de la photo pour indiquer qu'il sont présent sur cette photo a l'endroit où ils on cliquer.

Et je voudrais aussi que les autre utilisateurs puisse voir des petit carrer blanc aux endroit cliquer sur la photo par les utilisateurs.

Exemple : http://worldwide.tilllate.com/picpag...3&fid=43399483

Et malheuresement je n'est AUCUNE conaissance en Java & AJAX mais seulement en php.

Que pourriez vous me conseiller ?

[mickado]

Voila j'ai trouver un exemple de ce que je veux faire :

http://worldwide.tilllate.com/picpag...3&fid=43399483

Vous voyez le petit carer rose avec le nom de la personne qui a cliquer sur la photo ?
C'est exactement ça que je voudrais !

[martel]

Bon a mon avis , le plus simple c'est que lorsqu'un utilisateur enregistrer clique sur l'image il affiche a cette endroit un DIV avec ce que tu veux comme icone, la position doit être centré par rapport a ton pi_x et pi_y (suit a mon petit bout de code)

<input type="image" src="/cheminimage/image.jpg" name="pi" />
tu mémorises les coordonnées x et y et l'id de la personne qui a cliqué tout ça dans une base de données, et quand tu reload la page, tu affiches tous les points stockés dans ta db, sur ton image avec tes DIV icones

genre une fois généré un point donne ceci :
<div id="IDdelutilisateur" style="left:valeurenX ; top:valeurenY"> <img scr="imageicone.gif"/> </div>

mais tout ceci sans être en AJAX c'est toujours la méthode classique, mais pour bien comprendre c'est plus facile.

moi j'avais fait ce système en PHP.

[mickado]

Bon a mon avis , le plus simple c'est que lorsqu'un utilisateur enregistrer clique sur l'image il affiche a cette endroit un DIV avec ce que tu veux comme icone, la position doit être centré par rapport a ton pi_x et pi_y (suit a mon petit bout de code)

<input type="image" src="/cheminimage/image.jpg" name="pi" />
tu mémorises les coordonnées x et y et l'id de la personne qui a cliqué tout ça dans une base de données, et quand tu reload la page, tu affiches tous les points stockés dans ta db, sur ton image avec tes DIV icones

genre une fois généré un point donne ceci :
<div id="IDdelutilisateur" style="left:valeurenX ; top:valeurenY"> <img scr="imageicone.gif"/> </div>

mais tout ceci sans être en AJAX c'est toujours la méthode classique, mais pour bien comprendre c'est plus facile.

moi j'avais fait ce système en PHP.

Oui mais comment récupére tu les coordonnées X et Y ? de la personne qui a cliquer ?

[martel]

as tu déjà simplement fait une page HTML tout simple avec ceci :

<form action="nomdelapage.html">
<input type="image" src="/cheminimage/image.jpg" name="pi" />
</form>

et puis quand tu vois l'image sur la page, tu cliques dessus n'importe où. Et puis tu regardes dans l'url tu verras ceci :
&pi_x=234.54&pi_y=124.233

ce sont les pixels dans l'image, et non de toute la fenetre de ton browser.

et voila

[mickado]

Exellent !!!! je ne l'avais pas compris de cette façon ! merci.

Ensuite je fais comment pour appeller les emplacement sur mon image ?

Comme ça ? :

Code :

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

1
2
3
4
5
<div id="IDdelutilisateur" style="left:111px ; top:23px ;">lol
<form name="zonec" action="e.php">
<input type="image" src="Tagng.png" name="pi" />
</form>
</div>

[mickado]

ok j'ai réussi merci pour ton aide !!!!

[mickado]

je re up mon sujet avec un nouveau probléme :

voici ma conditon si quelqu'un a cliquer sur la photo :

Code :

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

1
2
3
4
5
 if ( isset($_GET['pi.x']) && isset($_GET['pi.y']) )
 
{
/// ma requête sql ici
}

le probléme c'est que cette condition ne s'éxécute pas si quelqu'un clique sur l'image....

Probléme régler :

Code :

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

1
2
3
4
5
 if ( isset($_GET['pi_x']) && isset($_GET['pi_y']) )
 
{
/// ma requête sql ici
}