Coordonnées souris [Résolu]

babe59 189 Messages postés vendredi 28 mai 2004Date d'inscription 27 novembre 2015 Dernière intervention - 3 févr. 2012 à 17:44 - Dernière réponse : cs_Megafan 390 Messages postés dimanche 7 avril 2002Date d'inscription 23 septembre 2016 Dernière intervention
- 4 févr. 2012 à 11:37
Bonjour
je développe en ASP.NET C#.
Je dessine dynamiquement dans une page WEB une image avec des instructions comme "graphics = Graphics.FromImage(bitmap);..."
puis j'affiche cette image


L'image est composée de carrés et j'aimerai affiche un tooltiptext particulier pour chaque carré


J'aimerai dessiner un carré supplémentaire lorsque l'utilisateur clique sur l'image. J'aurai donc besoin de récupère le position de la souris lors du click dans l'image pour modifier mon dessin.

Comment puis je faire?
Slts

DT
Afficher la suite 

Votre réponse

1 réponse

Meilleure réponse
cs_Megafan 390 Messages postés dimanche 7 avril 2002Date d'inscription 23 septembre 2016 Dernière intervention - 4 févr. 2012 à 11:37
3
Merci
Bonjour,

Point 1 : 2 solutions
- Utiliser une fonction ajax et en transférant les coordonnées de la souris sur l'image et avoir en retour le contenu du toolTip à afficher
- le serveur génère directement toutes les zones et en fonction de la position de la souris un script devra afficher le bon tooltip

Point 2 :
- sur le onclick de l'image, faites un document.location.href ='la page actuelle' et en passant les coordonnées de la souris pour que le serveur génère la bonne image.

Pour les fonctions de positions de la souris il en existe des centaines
Celle que j'utilise régulièrement (par contre à placer avant la fin du body

<script type="text/javascript">

        var IE = document.all ? true : false
        if (!IE) {
            document.captureEvents(Event.MOUSEMOVE)
            document.addEventListener('DOMMouseScroll', WheelHidePopup, false);
        } else {
            window.onmousewheel document.onmousewheel WheelHidePopup;
        }
        document.onmousemove = getMouseXY;


        function WheelHidePopup() {
            MouseX MouseY 0;            
        }

        var MouseX = 0;
        var MouseY = 0;

        function getMouseXY(e) {

            var target;
            if (IE) {
                MouseX = event.clientX
                MouseY = event.clientY
            } else {
                MouseX = e.pageX
                MouseY = e.pageY
            }
            if (MouseX < 0) { MouseX = 0 }
            if (MouseY < 0) { MouseY = 0 }

            return true
        }
    </script>


Utilisez une fonction pour déterminer le décalage de l'image cliquée en cas de scroll de l'écran.
function calculeOffset(element, attr) {
            // Description : La fonction calcule la position du coin haut/gauche horizontale ou verticale d'un lment HTML
            // Paramtres
            // - element : Element dont on doit calculer la position
            // - attr (2 valeurs possibles) : 'offsetLeft' ou 'offsetTop'
            var offset = 0;
            while (element) {
                offset += element[attr];
                element = element.offsetParent;
            }
            return offset;
        }


Dans la fonction qui gère le click, il suffit donc de récupérer les valeurs
si l'image cliquée s'appelle : MonImage

function MonImageClick() {            
            if (MouseX 0 && MouseY 0) return;
            var obj = document.getElementById("MonImage");
            var Nx = MouseX - calculeOffset(obj, "offsetLeft");
            var Ny = MouseY - calculeOffset(obj, "offsetTop");            
            document.location.href = "MapageAréafficher.aspx?X=" + Nx  + "&Y=" + Ny
        }





Megafan

Développeur de http://www.o10c.eu (Lien)


La nouvelle référence en matière de jeu de stratégie spatiale.

Merci cs_Megafan 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 117 internautes ce mois-ci

Commenter la réponse de cs_Megafan

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.