IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Positionner des points sur une image


Sujet :

JavaScript

  1. #1
    Membre actif Avatar de thierrybatlle
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Novembre 2005
    Messages
    618
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Enseignement

    Informations forums :
    Inscription : Novembre 2005
    Messages : 618
    Points : 222
    Points
    222
    Par défaut Positionner des points sur une image
    Bonjour à tous,

    Je souhaite afficher une image dans une page web et sur cette image l'utilisateur doit pouvoir cliquer sur des zones.
    Je dois pouvoir récupérer les coordonnées des clics, les sauvegarder et pouvoir afficher cette image à la demande avec la position des clics.
    Je ne vois vraiment pas comment procéder.
    Merci de votre aide.

    Je vous remercie bien.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 658
    Points
    66 658
    Billets dans le blog
    1
    Par défaut
    Je vois principalement deux possibilités

    la première en utilisant un input type image
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <form method="get" action="#" >
    <input type="image" id = 'carte' src="monimage.jpg" alt="Submit" />
    </form>

    Si tu regardes dans l'url après avoir cliqué sur l'image (après soumission) tu as les coordonnées du click...

    La seconde en récupérant par js les coordonnées du click:
    par exemple avec Jquery https://jsfiddle.net/andrewwhitaker/87NYk/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Expert confirmé
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 451
    Détails du profil
    Informations personnelles :
    Âge : 54
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 451
    Points : 4 600
    Points
    4 600
    Par défaut
    sinon tu charges ton image dans un canvas, et tu recuperes les coordonnes de click dessus comme un event classique
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 235
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 235
    Points : 15 532
    Points
    15 532
    Par défaut
    vous parlez de coordonnées et de zones, de quelle information vous avez besoin ?
    si c'est la zone, il y a la balise "map" :
    https://developer.mozilla.org/fr/doc...ML/Element/map
    et pour les coordonnées, vous pouvez utiliser "input type=image"
    https://developer.mozilla.org/fr/doc...nt/Input/image

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 658
    Points
    66 658
    Billets dans le blog
    1
    Par défaut
    Ou encore, vu que tu évoques des zones... un image map ?
    Tout dépend de si tu dois récupérer les coordonées exactes x et y du click ou si tu dois juste savoir quelle zoné à été cliquée ???
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. Tracer des points sur une image
    Par ocean1313 dans le forum Images
    Réponses: 2
    Dernier message: 30/10/2016, 14h30
  2. Positionner des objets sur une image de façon dynamique
    Par derfez dans le forum Silverlight
    Réponses: 4
    Dernier message: 14/11/2011, 09h44
  3. Relever des points sur une image
    Par PPz78 dans le forum Macros et VBA Excel
    Réponses: 14
    Dernier message: 23/01/2011, 07h28
  4. Placer des points sur une image
    Par vallgui dans le forum WinDev
    Réponses: 9
    Dernier message: 22/01/2008, 15h19
  5. [Javascript Debutant]Comment positionner des boutons sur une Image?
    Par bylka dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 25/07/2007, 13h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo