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

  1. #1
    Membre à l'essai
    Homme Profil pro
    Eternel étudiant
    Inscrit en
    octobre 2019
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Eternel étudiant

    Informations forums :
    Inscription : octobre 2019
    Messages : 29
    Points : 15
    Points
    15
    Par défaut Masquage de DIV et affichage d'image en fonction de la résolution
    Bonjour à tous,

    Voilà, je suis confronté à un problème d'affichage/masquage de div et d'image en fonction de la résolution (pourquoi je me répète : c'est dans le titre !).

    Je vais essayé d'être clair dans mes explications :

    le principe était de construire des zones cliquables sur une photo et d'afficher une image au passage de la souris. Tout fonctionnait grâce à un <map><area> et du CSS et le rendu était bon.
    Sauf que les zones cliquables étaient décalées par rapport à la résolution de l'écran de l'internaute : forcément !!

    Donc, ma 1ère réaction a été d'ajouter des div avec des <map><area> avec des coordonnées différentes en fonction des résolutions.

    Cela ne fonctionne que sur la première DIV et absolument pas sur les autres.

    Donc, si vous aviez une explication, je suis preneur, et si vous avez des idées de solutions, je le suis aussi. Je pensait le traiter en CSS dans la mesure du possible car j'ai bien pensé à JS mais n'ai pas encore suffisamment de maîtrise pour cela.

    L'adresse de la page en question (qui fonctionne avec une largeur d'écran en 1366 mais pas plus : http://contes-a-rebours.fr/index.php...sionnelsEquipe

    Le HTML : (je n'en mets que 2 (celle qui fonctionne et la première qui ne fonctionne pas car elles sont toutes construites sur le même principe et qu'in n'y a que l'id et les coordonnées des <map><area> de la div qui changent :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
            <div id="width1366To1439">
                <article id="professional_member_list_width1366To1439"><!-- Picture Space For Screen Width Between 1366px To 1439px -->     
                    <img src="<?php echo SITE_URL_WWW; ?>/src/web/images/team/Photo_Equipe_Pro" alt="L'équipe Professionelle" width="100%" usemap="#trombine"/>
                    <map name="trombine" id="trombine_width1366To1439">
                        <area id="brossier_width1366To1439" class="toLoad" shape="circle" coords="175,160,110" href="<?php echo SITE_URL_WWW; ?>index.php?page=professionnelsEquipeDetail&last_name=BROSSIER" alt="Benjamin BROSSIER">
                            <img id="arrow_brossier_width1366To1439" class="hide" src="<?php echo SITE_URL_WWW; ?>/src/web/images/arrow professional/Arrow_Benjamin_Brossier.png" alt="Benjain BROSSIER Contes A Rebours">
                        </area>
     
                        <area id="mallard_width1366To1439" class="toLoad" shape="poly" coords="275,150, 275,400, 450,400, 450,150" href="<?php echo SITE_URL_WWW; ?>index.php?page=professionnelsEquipeDetail&last_name=MALLARD" alt="Aurélien MALLARD">
                            <img id="arrow_mallard_width1366To1439" class="hide" src="<?php echo SITE_URL_WWW; ?>/src/web/images/arrow professional/Arrow_Aurelien_Mallard.png" alt="Aurélien MALLARD Contes A Rebours">
                        </area>
     
                        <area id="lemarie_width1366To1439" class="toLoad" shape="poly" coords="530,100, 460,140, 460,330, 530,350, 600,330, 600,140" href="<?php echo SITE_URL_WWW; ?>index.php?page=professionnelsEquipeDetail&last_name=LEMARIE" alt="Céline LEMARIE">
                            <img id="arrow_lemarie_width1366To1439" class="hide" src="<?php echo SITE_URL_WWW; ?>/src/web/images/arrow professional/Arrow_Celine_Lemarie.png" alt="Céline LEMARIE Contes A Rebours">
                        </area>
     
                        <area id="ain_width1366To1439" class="toLoad" shape="circle" coords="705,270,95" href="<?php echo SITE_URL_WWW; ?>index.php?page=professionnelsEquipeDetail&last_name=AIN" alt="Caroline AIN">
                            <img id="arrow_ain_width1366To1439" class="hide" src="<?php echo SITE_URL_WWW; ?>/src/web/images/arrow professional/Arrow_Caroline_Ain.png" alt="Caroline AIN Contes A Rebours">
                        </area>
     
                        <area id="chevalier_width1366To1439" class="toLoad" shape="circle" coords="700,95,90" href="<?php echo SITE_URL_WWW; ?>index.php?page=professionnelsEquipeDetail&last_name=CHEVALIER" alt="Sébastien CHEVALIER">
                            <img id="arrow_chevalier_width1366To1439" class="hide" src="<?php echo SITE_URL_WWW; ?>/src/web/images/arrow professional/Arrow_Sebastien_Chevalier.png" alt="Sébastien CHEVALIER Contes A Rebours">
                        </area>
                    </map>
     
                </article>
            </div>
     
            <div id="width1440To1599">
                <article id="professional_member_list_width1440To1599"><!-- Picture Space For Screen Width Between 1440px To 1599px -->
                    <img src="<?php echo SITE_URL_WWW; ?>/src/web/images/team/Photo_Equipe_Pro" alt="L'équipe Professionelle" width="100%" usemap="#trombine"/>
                    <map name="trombine" id="trombine_width1440To1599">
     
                        <area id="brossier_width14 40To1599" class="toLoad" shape="circle" coords="200,290,180" href="<?php echo SITE_URL_WWW; ?>index.php?page=professionnelsEquipeDetail&last_name=BROSSIER" alt="Benjamin BROSSIER">
                            <img id="arrow_brossier_width1440To1599" class="hide" src="<?php echo SITE_URL_WWW; ?>/src/web/images/arrow professional/Arrow_Benjamin_Brossier.png" alt="Benjain BROSSIER Contes A Rebours">
                        </area>
     
                        <area id="mallard_width1440To1599" class="toLoad" shape="poly" coords="400,170, 400,620, 640,620, 640,170" href="<?php echo SITE_URL_WWW; ?>index.php?page=professionnelsEquipeDetail&last_name=MALLARD" alt="Aurélien MALLARD">
                            <img id="arrow_mallard_width1440To1599" class="hide" src="<?php echo SITE_URL_WWW; ?>/src/web/images/arrow professional/Arrow_Aurelien_Mallard.png" alt="Aurélien MALLARD Contes A Rebours">        
                        </area>
     
                        <area id="lemarie_width1440To1599" class="toLoad" shape="poly" coords="710,150, 650,210, 650,480, 710,500, 820,480, 820,210" href="<?php echo SITE_URL_WWW; ?>index.php?page=professionnelsEquipeDetail&last_name=LEMARIE" alt="Céline LEMARIE">
                            <img id="arrow_lemarie_width1440To1599" class="hide" src="<?php echo SITE_URL_WWW; ?>/src/web/images/arrow professional/Arrow_Celine_Lemarie.png" alt="Céline LEMARIE Contes A Rebours">
                        </area>
     
                        <area id="ain_width1440To1599" class="toLoad" shape="circle" coords="990,380,120" href="<?php echo SITE_URL_WWW; ?>index.php?page=professionnelsEquipeDetail&last_name=AIN" alt="Caroline AIN">
                            <img id="arrow_ain_width1440To1599" class="hide" src="<?php echo SITE_URL_WWW; ?>/src/web/images/arrow professional/Arrow_Caroline_Ain.png" alt="Caroline AIN Contes A Rebours">
                        </area>
     
                        <area id="chevalier_width1440To1599" class="toLoad" shape="circle" coords="970,120,110" href="<?php echo SITE_URL_WWW; ?>index.php?page=professionnelsEquipeDetail&last_name=CHEVALIER" alt="Sébastien CHEVALIER">
                            <img id="arrow_chevalier_width1440To1599" class="hide" src="<?php echo SITE_URL_WWW; ?>/src/web/images/arrow professional/Arrow_Sebastien_Chevalier.png" alt="Sébastien CHEVALIER Contes A Rebours">
                        </area>
                    </map>
     
                </article>
            </div>

    Et le CSS de la 1ère div qui fonctionne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    /********PROFESSIONAL TEAM*******/
     
        main#professional_content div#mobileAndPads,
        main#professional_content div#width1440To1599,
        main#professional_content div#width1600To1680,
        main#professional_content div#width1681To1919,
        main#professional_content div#width1920  {
            display: none;
            z-index: 0;
        }
     
        main#professional_content div#width1366To1439 {
            width: 70%;
            margin: 0 auto;
            position: relative;
            display: block;
            z-index: 10;
        }
     
        main#professional_content div#width1366To1439 article#professional_member_list_width1366To1439 map area#brossier_width1366To1439:hover ~ img#arrow_brossier_width1366To1439 {
            z-index: 5;
            position: absolute;
            top: 0%;
            width: 200px;
            right: 55%;
            display: block;
        }
     
        main#professional_content div#width1366To1439 article#professional_member_list_width1366To1439 map area#mallard_width1366To1439:hover ~ img#arrow_mallard_width1366To1439 {
            z-index: 5;
            position: absolute;
            top: 58%;
            width: 180px;
            right: 62%;
            display: block;
        }
     
        main#professional_content div#width1366To1439 article#professional_member_list_width1366To1439 map area#lemarie_width1366To1439:hover ~ img#arrow_lemarie_width1366To1439 {
            z-index: 5;
            position: absolute;
            top: 50%;
            width: 180px;
            right: 27%;
            display: block;
        }
     
        main#professional_content div#width1366To1439 article#professional_member_list_width1366To1439 map area#ain_width1366To1439:hover ~ img#arrow_ain_width1366To1439 {
            z-index: 5;
            position: absolute;
            top: 30%;
            width: 260px;
            right: -10%;
            display: block;
        }
     
        main#professional_content div#width1366To1439 article#professional_member_list_width1366To1439 map area#chevalier_width1366To1439:hover ~ img#arrow_chevalier_width1366To1439 {
            z-index: 5;
            position: absolute;
            top: 7%;
            width: 300px;
            right: -10%;
            display: block;
        }

    Et le CSS de celle qui ne fonctionne pas :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
        main#professional_content div#mobileAndPads,
        main#professional_content div#width1366To1439,
        main#professional_content div#width1600To1680,
        main#professional_content div#width1681To1919,
        main#professional_content div#width1920  {
            display: none;
            z-index: 0;
        }
     
        main#professional_content div#width1440To1599 {
            display: block;
            z-index: 10;
            width: 70%;
            margin: 0 auto;
            position: relative;
        }
     
        main#professional_content div#width1440To1599 article#professional_member_list_width1440To1599 map area#brossier_width1440To1599:hover ~ img#arrow_brossier_width1440To1599 {
            z-index: 11;
            position: absolute;
            top: 0%;
            width: 200px;
            right: 55%;
            display: block;
        }
     
        main#professional_content div#width1440To1599 article#professional_member_list_width1440To1599 map area#mallard_width1440To1599:hover ~ img#arrow_mallard_width1440To1599 {
            z-index: 11;
            position: absolute;
            top: 58%;
            width: 180px;
            right: 62%;
            display: block;
        }
     
        main#professional_content div#width1440To1599 article#professional_member_list_width1440To1599 map area#lemarie_width1440To1599:hover ~ img#arrow_lemarie_width1440To1599 {
            z-index: 11;
            position: absolute;
            top: 50%;
            width: 180px;
            right: 27%;
            display: block;
        }
     
        main#professional_content div#width1440To1599 article#professional_member_list_width1440To1599 map area#ain_width1440To1599:hover ~ img#arrow_ain_width1440To1599 {
            z-index: 11;
            position: absolute;
            top: 30%;
            width: 260px;
            right: -10%;
            display: block;
        }
     
        main#professional_content div#width1440To1599 article#professional_member_list_width1440To1599 map area#chevalier_width1440To1599:hover ~ img#arrow_chevalier_width1440To1599 {
            z-index: 11;
            position: absolute;
            top: 7%;
            width: 300px;
            right: -10%;
            display: block;
        }
    Par avance : Merci !!

  2. #2
    Rédacteur/Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    décembre 2004
    Messages
    4 989
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : décembre 2004
    Messages : 4 989
    Points : 11 637
    Points
    11 637
    Par défaut
    Salut

    Dans ton premier code HTML, ligne 34, l'id me semble non conforme, id="brossier_width14 40To1599" il y a un espace dans son nom, peut être que .....
    ProgElecT
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.

  3. #3
    Membre à l'essai
    Homme Profil pro
    Eternel étudiant
    Inscrit en
    octobre 2019
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Eternel étudiant

    Informations forums :
    Inscription : octobre 2019
    Messages : 29
    Points : 15
    Points
    15
    Par défaut
    Bonjour et Merci pour la réponse.

    Effectivement je ne l'avais pas vu.
    Mais après correction, cela ne fonctionne pas mieux d'autant que dans le schéma cela devrait fonctionner pour les autres <div> ou <map> <area>.

    Je viens surtout de voir que si je forçait l'était :hover dans les éléments, cela fonctionne Oo !! Qu'est-ce qui pourrait faire que cela fonctionne quand je force l'état et qui bloquerait le fonctionnement sans force l'état ?

    Merci encre !!

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 951
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 951
    Points : 34 254
    Points
    34 254
    Par défaut
    Bonjour,
    je ne sais par quoi commencer !!

    Balise <area>
    la balise fermant n'est pas à mettre, il n'y a aucun contenu pour ce type de balise
       Balise area
    ton code n'est donc pas conforme
       Validation du code HTML

    ID unique
    Il ne sert à rien d'écrire un sélecteur comme
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    main#professional_content div#mobileAndPads,
    un simple
    suffit, mais ce n'est peut être pas toi qui génères les sélecteurs.

    JavaScript
    Il te faut regarder la console, F12, pour voir que tu l'utilises mal, par exemple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    let area = document.getElementsByClassName("toLoad");
     
    area.addEventListener('mouseover', function(event) {   
        // highlight the mouseover target
        event.target.style.display = "block";
    }, false);
     
    area.addEventListener('mouseleave', function(leave) {
        leave.target.style.display = "none";
    }, false);
    getElementsByClassName renvoie une HTMLCollection donc tu ne peux pas faire un addEventListener directement sur une collection.
       document.getElementsByClassName

    Il te faut déjà corriger tout cela

  5. #5
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 037
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 037
    Points : 32 842
    Points
    32 842
    Par défaut
    Bonjour,

    j'ai trouvé un article qui t'évitera tout ce bric-à-brac :

    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  6. #6
    Membre à l'essai
    Homme Profil pro
    Eternel étudiant
    Inscrit en
    octobre 2019
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Eternel étudiant

    Informations forums :
    Inscription : octobre 2019
    Messages : 29
    Points : 15
    Points
    15
    Par défaut
    Bonsoir,

    Merci pour vos retours, conseils et conseils de lectures.

    Je me penche dessus dès demain et vous tiens informé de ma compréhension et de mon avancée.

    Bonne soirée et merci encore !!!

  7. #7
    Membre à l'essai
    Homme Profil pro
    Eternel étudiant
    Inscrit en
    octobre 2019
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Eternel étudiant

    Informations forums :
    Inscription : octobre 2019
    Messages : 29
    Points : 15
    Points
    15
    Par défaut
    Bonsoir Messieurs,

    Je vous renouvelle mes remerciements pour la lecture de mon problème et les solution que vous m'avez soufflées.

    En toute honnêteté, j'avais consulter les ressources que vous m'avez transmises mais je voulais y arriver sans Jquery par challenge perso et aussi pour me confronter encore un peu plus à une réalité et approfondir ma compréhension et mon apprentissage.
    En toute transparence, j'y ait passé beaucoup de temps et pour finir par ne pas y parvenir.

    J'ai donc mis en place Jquery et le script proposé : bah, Ok ! Ca marche et je n'ai plus que quelques petits ajustements à faire. Et ce en un rien de temps.

    Je vais donc finir par m'y mettre à Jquery !!

    Merci et bonne soirée,

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

Discussions similaires

  1. [XL-2010] Affichage d'image en fonction de la valeur d'une cellule
    Par noelgigi dans le forum Excel
    Réponses: 4
    Dernier message: 23/04/2019, 22h00
  2. affichage d'image en fonction d'un mot
    Par Elsouba dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 10/01/2019, 09h29
  3. Réponses: 1
    Dernier message: 13/01/2015, 21h14
  4. Réponses: 4
    Dernier message: 03/04/2007, 14h25
  5. affichage masquage de DIV
    Par bleuerouge dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 31/01/2007, 12h02

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