Afficher masquer div

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 25 Juin 2012.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    Salut à tous,

    Je voudrais afficher une div sur un onmouseover d'un bouton et masquer la div sur un onmouseout mais ça ne marche qu'à moitié :(

    Voici mon code :

    Code:
    <script>
    function affiche(id){
        document.getElementById('Div1').style.display='block';
    }
    function cache(id){
        document.getElementById('Div1').style.display='none';
    }
    </script>
    <div id="Div1" style="display:none">
    Affichage de ma div 1
    </div>
    <input type="submit" name="ok" value="Survol Moi" onmouseover="affiche('Div1')" onmouseout="cache(Div1')" />
    
    Ca affiche bien la div lorsque je passe la souris sur le bouton mais lorsqu'on enlève la souris du bouton la div ne se masque pas, voyez-vous mon erreur ?

    Merci pour votre aide.
     
  2. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    707
    J'aime reçus:
    0
    Code:
    onmouseout="cache(Div1')"
    Il manque une quote.
     
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    Merci beaucoup Blount.... j'ai trop honte.... :oops: :oops: ..... ne me lapidez pas sur la place publique, j'implore votre indulgence :mrgreen:
     
  4. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 192
    J'aime reçus:
    1
    Dans ma grande indulgence j'invoque donc le pal ... a moins que certains préfèrent l'emmurement :D
     
  5. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    Ah merci c'est très gentil mais c'est quoi le pal ? Maman j'ai peur de la réponse :(

    Pour revenir à mon script, je souhaite lorsque la page se charge que le texte de la div1 soit affiché mais le texte de la div2 masqué et lorsque je passe la souris sur le bouton que ce soit l'inverse, mais lorsque je sort du bouton que ça revienne comme avant : affichage de la div1 et masquage de la div 2. J'y arrives pas :?

    Mon code (avec les quotes cette fois :oops: :oops: ) :

    Code:
    <script>
    function affiche(id){
        document.getElementById('Div1').style.display='block';
    }
    function affiche(id){
        document.getElementById('Div2').style.display='block';
    }
    function cache(id){
        document.getElementById('Div1').style.display='none';
    }
    function cache(id){
        document.getElementById('Div2').style.display='none';
    }
    </script>
    <div id="Div1" style="display:block">
    Ma div 1
    </div>
    <div id="Div2" style="display:none">
    Ma div 2
    </div>
    <input type="submit" name="ok" value="Survol Moi" onmouseover="affiche('Div2');cache('Div1');" onmouseout="affiche('Div1');cache('Div2');" />
    
    Quelqu'un peut-il m'aider ?
     
  6. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 192
    J'aime reçus:
    1
    http://fr.wikipedia.org/wiki/Supplice_du_pal un peut de culture sur cette antique pratique.

    Bon déjà faut pas doubler les fonctions et quitte a leur passer un paramètre il faut l'utiliser donc :

    <script>
    function affiche(id){
    document.getElementById(id).style.display='block';
    }
    function cache(id){
    document.getElementById(id).style.display='none';
    }
    </script>

    Et ensuite je ne voie pas mis a part la répétition ce qui empêche ton code de répondre à ta demande.
     
  7. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 192
    J'aime reçus:
    1
    ensuite c'est souvent plus propre de compacter une action :
    <script>
    function swicht(id){
    obj = document.getElementById(id);
    if(obj.style.display=='block'){obj.style.display='none';}else{obj.style.display='block'}
    }
    </script>

    ce qui te permet d'invoquer via : onmouseover="swicht('Div2');swicht('Div1');" onmouseout="swicht('Div1');swicht('Div2');"
     
  8. fran6
    fran6 WRInaute passionné
    Inscrit:
    21 Septembre 2004
    Messages:
    1 167
    J'aime reçus:
    7
    Meuh non c'est ça le supplice du pal (pov bêtes ^^)
     
  9. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    Merci Zeb pour cette petite leçon de javascript et pour ce script qui fonctionne parfaitement bien :mrgreen: à la fois je suis content et à la fois je suis triste : content d'avoir ce script qui répond à tout point à mes attentes mais triste de n'avoir que 3 neurones, de rien paner au javascript e td'avoir incapable de l'écrire :?

    C'est beurk le pal, non pitié pas le pal..... st'plais.... je ferais la vaisselle, le ménage, les courses... ce que vous voudrez mais pas le pal....
     
  10. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 192
    J'aime reçus:
    1
    Non ça c'est "en plus" en attendant le pal ... :lol:
     
  11. frenchhorn
    frenchhorn WRInaute passionné
    Inscrit:
    8 Février 2007
    Messages:
    1 126
    J'aime reçus:
    2
    je te conseille JQUERY: avec JQUERY, plus de soucis ;)
     
  12. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 192
    J'aime reçus:
    1
    Mouais entre apprendre a utiliser une bibliothèque et apprendre a en utiliser une autre il est vrai que c'est forcement plus simple.

    Maintenant si il faut coller un JS de 10 tonnes minifié sur une page pour cacher une div ou la faire apparaitre en fondu la ou 20 lignes de code suffises oui peut être ...

    Ou alors c'est pour faire du copier coller plus facile ... car a la base les gars qui dev sur ce framework ils ont pas de souci avec javascript ... Faut donc peut être pas mettre la charrue avant les bœufs.

    Mon vieux père disait au temps ou j'étais un jeune con (ma femme dit que j'ai juste vieilli, mais pour le reste ... :lol: ), bref il disait que pour faire de l'informatique il fallait que je fasse avant de l'électronique pour comprendre comment ça marche (ce en quoi il avait partiellement raison). On peut mettre l'image au gout du jour et dire qu'un bon pilote automobile (pas monsieur tous le monde) doit être mécano avant tout pour sentir sa mécanique.

    Je pense que ça s'applique bien là. Je le voie a toutes les session d'exam codeur que je dois évaluer. soit le gars a les bases en code et il s'amuse avec un framework sans problème et effectivement il sort des trucs très bien soit il a pas la base et c'est soit du copié collé soit de la m*rd* mais en aucun cas il fait du bon travail.

    Après il faut extrapoler et penser éco-responsabilité. Imagine deux seconde en grossissant le traie que tu as un souci pour adapter un design a une version de navigateur Mac ou Linux. tu fait quoi avec cette logique ? tu propose le download de virtualbox et tu lui fait installer une image XP ou Seven dedans pour profiter de IE qui va bien avec ton design ?

    Sinon si effectivement il travaille sur un projet qui a la base comporte ce framework c'est criminel de pas utiliser ... Mais faut pas oublier non plu que la créativité et l'innovation en prend un coup au passage car on fini par les voir a 100m ces sites "JQuerysés"

    edit -> pas de panique c'est mon coup de gueule habituel sur les surcouches logiciel ...
     
  13. frenchhorn
    frenchhorn WRInaute passionné
    Inscrit:
    8 Février 2007
    Messages:
    1 126
    J'aime reçus:
    2
    jquery est très très simple à utiliser et à apprendre

    tu peut utiliser les librairies jquery hébergé sur google: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

    tu prend le problème à l'envers, jquery et autres librairies te font gagner du temps, un temps fou même car elles sont cross-browser, tu n'a jamais galérer à rendre 5 lignes de codes compatible sur tout les navigateurs???

    en partie d'accord avec toi mais pour faire des truc propres et maintenable les surcouches logiciels sont indispensables...
     
  14. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 192
    J'aime reçus:
    1
    javascript aussi
    ça change quoi côté client ? ... (le problème c'est pas d'avoir ça sur son serveur ou un autre c'est de faire transiter sans cesse des tonnes de truc et le cache je veux bien mais bon c'est pas une généralité)
    Oui, mais ... Quand on connais JS, c'est même pas une question qu'on se pose car quand tu as écarté les deux trois fonctionnalités qui coincent car spécifiques a une plateforme tu n'as aucun problème de compatibilité. De plus tu va avoir des galères (c'est générique) sur tout système mal maitrisé. Qu'est que ça change de les affronter vis a vis d'un langage ou un framework ?
    Après faut être objectif, JS se résume a afficher 3 popup, vérifier des champs, faire apparaitre ou disparaitre deux trois trucs avec plus ou moins de style dans 90% des cas. Bref quand tu prend en main un tuto et que tu te fixe ces cas d'école avec JS tu en a au pire pour une semaine a comprendre et c'est fini pour la vie. Avoir les mêmes truc en JQuery te prendra le même temps (si tu fouille un peu pour comprendre sinon en copiant / collant ....)

    Ensuite mais ça personne n'en parle on en arrive a faire des scripts pour que toutes ces bibliothèques de code soit compatibles entre elles ou pire compatible entre version ... (on a déporté le problème mdr ...)

    Alors là !? sur "propre" a la rigueur, car les ajout CSS fait par des pro sur ce framework sont effectivement très bien ce que ne sera pas capable de faire un codeur pur il est vrai mais "maintenable" pas vraiment car
    1/ si tu as une merde avec cette bibliothèque (ça m'est arrivé) tu ne peut rien faire dedans.
    2/ plus tu as de code plus la maintenance deviens lourde et plus tu as de faille possible.

    Avant la maintenance faut penser debug et avec ces framework c'est pas forcement plus clair.

    Enfin moi ce que j'en dit c'est basé sur l'utilisation et le dev avec les deux principes natif / framework, sur les inconditionnels des framework javascript ici combien peuvent dire qu'ils dev avec les deux (je parle de dev et création pas de copier coller ou 4 lignes) ? 10 sur tout WRI ?

    Ne te méprend pas j'aime bien cet outil mais là sur l'exemple du sujet c'est totalement abusé de préconiser JQuery pour un problème de div tu me voie tu me voie plu (il y a un sujet je sais plus ou sur WRI ou on a un membre qui propose ça pour mettre un lien aussi :D ).
     
  15. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    Bon ben, votre débat est un peu trop technique pour moua :D ..... j'utilise sur mes sites à la fois jquery (pour un caroussel d'images, par exemple) mais dans mon cas sur ce post, il ne m'est pas venu à l'esprit d'utiliser jquery pour réaliser cet affichage/masquage de div. J'avais imaginé qu'on pouvait régler cette affaire avec 4 ou 5 lignes de code javascript, ce qu'à fait merveilleusement bien zeb :) :)

    Après tout ce qui compte c'est pas trop la technique utilisée mais c'est le résultat obtenu : est-ce que ça fonctionne ? Si oui, est-comptatible avec la plupart des navigateurs ? Si oui, alors :) :) :) :)
     
  16. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 192
    J'aime reçus:
    1
    Je pense pas qu'ils aient la même philosophie a Hiroshima :wink: un peut rapide ton raccourci :D
     
  17. frenchhorn
    frenchhorn WRInaute passionné
    Inscrit:
    8 Février 2007
    Messages:
    1 126
    J'aime reçus:
    2
    ah ba voila...

    Code:
    $('#id_de_ta_div').hide();
    $('#id_de_ta_div').show();
    
    $('.class_de_ta_div').hide();
    $('.class_de_ta_div').show();
    
    
    // lire la doc sur toggle également
    
    une ligne suffit donc...plus simple non ? ;)
     
  18. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    707
    J'aime reçus:
    0
    Le pire, c'est d'utiliser un framework pour si peu.
    Je pense que les framework ont un réel intérêt, c'est indéniable. Mais il faut que ce soit justifié.
    De plus, l'utilisation d'un framework ne permet certainement pas de s’affranchir de l'apprentissage du langage de base, ici le JavaScript. C'est tout de même incroyable le nombre de personne utilisant un framework sans connaitre JavaScript.

    Quand c'est possible, il existe des petites bibliothèques qui peuvent rendre bien des services sans devoir utiliser un bazooka. Par exemple, pour faire des animations, il y a moo.fx qui est utilisé par Mootools.

    Et pourquoi jQuery ? Moi je préfère Mootools.
     
  19. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 192
    J'aime reçus:
    1
    Tu ne compte pas les lignes de JQuery bref tu compare des choux et des patates. C'est de la pure mauvaise foi.

    +1 Blount mais bon :cry: ... va faire comprendre que l'art est une question de maîtrise et pas une question de moyens.
     
  20. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 414
    J'aime reçus:
    0
    c'est assez marrant de voir des personnes qui demandent, après avoir utilisé yslow, comment ils peuvent gagner quelques centaines d'octets sur leurs css en supprimant les espaces et, de l'autre côté, incorporer des js de plusieurs centaines de ko alors qu'ils n'ont besoin que de quelques fonctions qui ne prendraient que 1 ou 2 ko en les codant à la main en js
    70,5 ko de fichier sur un ndd externe (qui va appeler lui-même d'autres fichiers externes, qui, eux-même, vont appeler des fichiers externes,...), alors que yslow recommande d'utiliser le moins possible de ndd différents pour télécharger les fichiers utilisés dans une page (images, api, js, css,...)
     
Chargement...
Similar Threads - Afficher masquer div Forum Date
[JS] Masquer / afficher un <div> à la saisie d'un <input> Développement d'un site Web ou d'une appli mobile 2 Novembre 2010
afficher masquer on utilisant Onclick Développement d'un site Web ou d'une appli mobile 21 Janvier 2015
Afficher / Masquer une partie du message Développement d'un site Web ou d'une appli mobile 28 Octobre 2012
bouton + et - pour masquer et afficher un tableau (sql) Développement d'un site Web ou d'une appli mobile 26 Avril 2010
Afficher les produits suivants en ajax Développement d'un site Web ou d'une appli mobile 12 Mai 2020
Google a-t-il le droit d'afficher directement les informations des sites sans leur accord ? Droit du web (juridique, fiscalité...) 21 Février 2020
Afficher un champ dans la page profil Wordpress Développement d'un site Web ou d'une appli mobile 17 Février 2020
API pour afficher les avis Google sur son site Google : l'entreprise, les sites web, les services 10 Novembre 2019
Afficher les tags sur wordpress Développement d'un site Web ou d'une appli mobile 3 Août 2019
Extension Chrome utile pour afficher le code source HTML, JS, CSS Développement d'un site Web ou d'une appli mobile 5 Juillet 2019
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice