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 :

onMouseOver sur un div caché sous un autre


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2011
    Messages
    33
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2011
    Messages : 33
    Par défaut onMouseOver sur un div caché sous un autre
    Bonjour,

    Je rencontre un problème car je souhaite ajouter l'évènement onMouseOver sur des éléments "div" cachés sous un autre.
    En effet j'ai un div qui couvre la quasi totalité de l'écran et plusieurs "div" plus petits au même niveau.
    Mon objectif est de savoir quel objet de mon grand "div" est survolé par la souris. Pour cela, j'ai créer un certain nombre de "div" qui recouvrent chacun un objet appartenant à mon grand "div". Ainsi en ajoutant l'évènement onMouseOver sur chaque petit "div", j'étais capable de détecter sur quel objet de mon grand "div" la souris se trouve.
    Le problème est que mon div principale cache les autres et donc inactive le onMouseOver sur ces derniers.
    Est-il possible de contourner ce problème en réactivant les évènements sur ces div cachés d'une quelconque façon SVP ?

    Je fonctionne de cette manière car je ne peux pas directement scinder le contenu de mon grand div en plusieurs div plus petits, pas de faux débats ^^

    Merci de vos réponses

    Cordialement

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    L'utilisation de <map> et <area> semble plus approprié que des div cachées.

  3. #3
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2011
    Messages
    33
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2011
    Messages : 33
    Par défaut
    <area> et <map> semblent être une bonne idée merci
    A ce que j'ai pu comprendre il faut spécifier les coordonnées des area en chiffré absolu. Quel est le référentiel pour ces coordonnées ? Le coin supérieur gauche de l'objet map ou de la page ?

    N'est il pas possible de donner des coordonnées relative?

    Indiqué par exemple que la première area prendra 33% de map en largeur et 50% de map en hauteur.
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    area1
    {
    	width : 33.3%;
    	height : 50%;
    	display: inline-block;
    	position: absolute;
    	right: 0%;
    	Top: 0%;
    }

  4. #4
    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 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    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 659
    Billets dans le blog
    1
    Par défaut
    les areas se positionnent en coordonnées par rapport au coin supérieur gauche de l'image et l'unité n'est pas précisée mais ce sont des pixels.
    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 !

  5. #5
    Invité
    Invité(e)
    Par défaut
    Mode d'emploi :
    => HTML <map> Tag
    => HTML <area> Tag

    Voici un exemple d'utilisation.
    Dans ton cas, des zones rectangulaires (ou polygonales ?) seraient plus adaptées :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
        <area shape="rect" coords="X1,Y1,X2,Y2" title="" alt="" href="" />

  6. #6
    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 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    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 659
    Billets dans le blog
    1
    Par défaut
    Selon la théorie on devrait pouvoir mettre des pourcentages, dans la pratique aucun des browsers communs que j'ai pu tester ne comprennent les % et les interprètent comme des pixels ...
    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 !

  7. #7
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2011
    Messages
    33
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2011
    Messages : 33
    Par défaut
    D'accord, mais dans ce cas, si je positionne mes objets <area> au sein de mon objet <map> avec des coordonnées chiffrées, si ma fenêtre est réduite, ou si j'ouvre mon application sur une tablette android ou un téléphone par exemple, tout vas être décalé, déformé, caché ou mal ajusté ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Flex4] MouseEvent sur un composant situé sous un autre composant
    Par gere34 dans le forum Flex
    Réponses: 0
    Dernier message: 14/11/2012, 00h51
  2. Onmouseover d'un div qui contient d'autres elements
    Par achem94 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 02/10/2008, 12h37
  3. div redimentionnables les uns sous les autres
    Par PierreBTSIG dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 27/06/2008, 13h33
  4. [JS + CSS] Onmouseover sur div marche pas sur ie6
    Par NeedYourHelp dans le forum Général JavaScript
    Réponses: 18
    Dernier message: 23/04/2008, 17h49
  5. Réponses: 4
    Dernier message: 28/06/2006, 15h32

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