Masquage de DIV et affichage d'image en fonction de la résolution

**Gryzly** · 29/11/2019, 09h51

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

**ProgElecT** · 29/11/2019, 10h38

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

**Gryzly** · 29/11/2019, 11h09

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

**NoSmoking** · 29/11/2019, 17h07

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

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.
↪ document.getElementsByClassName

Il te faut déjà corriger tout cela

Invité · 29/11/2019, 18h18

Bonjour,

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

Utiliser la balise Map dans une conception de site adaptatif -> III - Rendre l'image et la zone sensible Responsive Web Design
plugin : jQuery-rwdImageMaps "permettant de recalculer la zone des coordonnées et la faire correspondre à la taille de l'image redimensionnée"

**Gryzly** · 29/11/2019, 19h21

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

**Gryzly** · 03/12/2019, 01h02

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,

Masquage de DIV et affichage d'image en fonction de la résolution

CSS

Discussions similaires

Partager

Partager