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 :

[POO] onmouseover et DIV


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    36
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2007
    Messages : 36
    Par défaut [POO] onmouseover et DIV
    Bonjour,
    Je suis dans la situation suivant :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div onmouseover="alert('toto');" onmouseout="alert('tata');" >
    Salut
            <div>Kikou</div>
    </div>

    quand je met ma sourie sur le texte 'Salut' j'ai le message 'toto' mais quand je met ma sourie sur 'Kikou' j'ai le message 'tata' qui s'affiche.

    J'aimerais afficher le message 'tata' uniquement quand ma sourire quitte ma div principal (là où j'ai écrit 'Salut' )

    Merci de votre aide.
    Martin MAGAKIAN

  2. #2
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2008
    Messages : 5
    Par défaut
    Le problème qui se pose pour ton exemple c'est que pour confirmer la première alert il te faut sortir de ton div pour apuyer sur OK. Ensuite il t'affiche la dexième alert TATA. Ainsi de suite....

    voici ce que je te propose :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <script>
    <div onmouseover="document.getElementById('message').innerHTML='Toto';return false;" onmouseout="document.getElementById('message').innerHTML='Tata';return false;" style="width: 49px; height: 38px">
    Salut
            <div>Kikou</div>
    </div>
    <div id="message"></div>
    </script>

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    36
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2007
    Messages : 36
    Par défaut
    FAUX :-(

    Ta technique semble marcher mais en réalité elle est fause...


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div onmouseover="document.getElementById('message').innerHTML +=' | dedans';" onmouseout="document.getElementById('message').innerHTML +=' | dehors ';">
    Salut
            <div>Kikou</div>
    </div>
    <div id="message"></div>
    Quand on passe de 'Salut' a 'Kikou' etc... Voila le rendu visuel :
    dedans | dehors | dedans | dehors | dedans | dehors | dedans | dehors | etc...

    Comme si il y avait un espace invisible entre mes deux div...

  4. #4
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2008
    Messages : 5
    Par défaut
    Dis moi si c'est Ok.

    <script>
    function sSurvolObj(e, handler) {
    if (e.type != 'mouseout' && e.type != 'mouseover') return false;
    var reltg = e.relatedTarget ? e.relatedTarget :
    e.type == 'mouseout' ? e.toElement : e.fromElement;
    while (reltg && reltg != handler) reltg = reltg.parentNode;
    return (reltg != handler);
    }
    </script>

    <div onmouseout="if (sSurvolObj(event,this)) document.getElementById('message').innerHTML = 'dehors';" onmouseover="if (sSurvolObj(event,this)) document.getElementById('message').innerHTML = 'dedans';" style="width: 350px; border: 1px solid black; background: #eef">
    Ton texte de début
    <div style="width: 160px; border: 5px solid black; margin: 20px; background: #efe">
    ton div interne</div>
    fin de ton texte
    </div>

    <div id="message"></div>

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    36
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2007
    Messages : 36
    Par défaut
    >Tous simplement GENIAL !


    Merci fabiano13 pour ce code JavaScript il marche a merveille !




    Martin MAGAKIAN

  6. #6
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    Citation Envoyé par diva_69 Voir le message
    Comme si il y avait un espace invisible entre mes deux div...
    non il n'y a pas d'espace invisible entre les div. Tu as cette alternance des événements car tu passes d'un objet à l'autre.

Discussions similaires

  1. OnMouseOver sur div répété plusieurs fois
    Par Khleo dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 30/10/2009, 10h07
  2. [POO] id de div sous firefox javascript
    Par mirounet dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 20/02/2009, 14h30
  3. Onmouseover et div
    Par archimede49 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 15/12/2008, 11h23
  4. [POO] modif graphique div
    Par franfr57 dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 13/10/2008, 11h05
  5. [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

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