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
    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

    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 .....
    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.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase 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
    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

    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
      &#8618; Balise area
    ton code n'est donc pas conforme
      &#8618; 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
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    #mobileAndPads

    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.
      &#8618; document.getElementsByClassName

    Il te faut déjà corriger tout cela

  5. #5
    Invité
    Invité(e)
    Bonjour,

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


  6. #6
    Membre à l'essai
    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
    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,

###raw>template_hook.ano_emploi###