Position & alignements !

**Casio** · 29/07/2021, 10h03

Salutations,

la grosse quiche en CSS que je suis à réussi à pondre un semblant de code pour afficher en temps réel les domiciles de bénévoles d'une association, mais je n'arrive pas maintenant à centrer cette map.

En effet, elle utilise des "TOP" et "LEFT" pour afficher les coordonnées des bénévoles, mais si je centre la carte, les points de localisations restent collés au bords de la fenêtre et ne suivent pas la carte.

Voici la page de test actuelle.

Voici ce que cela donne dans un include type de test.

A terme, elle doit remplacer cette carte.

Comment faire ?

Merci de votre aide ...

**jreaux62** · 29/07/2021, 15h37

bonjour,

déjà, on peut séparer la carte des adresses.
ensuite, il faut un container (position:relative, qui sera la référence des top/left) en display:inline-block pour les images :

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
57
58
59
60
61
62
63
<div style="text-align:center;">
<figure id="France" style="position: relative;display:inline-block;margin:10px auto;">
 
    <img src="https://wda-fr.org/pict/France_WDA-clr.png" />
 
	<img
	style="
		top: 78px;
		left: 198px;
		position: absolute;
	"
	src="https://wda-fr.org/pict/wda-circle.png"
	title="Coordonnees du benevole Mathieu CHARREYRE."
	alt="Coordonnees d'un benevole WDA." />
 
	<img
	style="
		top: 82px;
		left: 192px;
		position: absolute;
	"
	src="https://wda-fr.org/pict/wda-circle.png"
	title="Coordonnees du benevole Cyrille ROBIN."
	alt="Coordonnees d'un benevole WDA." />
 
	<img
	style="
		top: 87px;
		left: 202px;
		position: absolute;
	"
	src="https://wda-fr.org/pict/wda-circle.png"
	title="Coordonnees du benevole Gérard NICOLAS."
	alt="Coordonnees d'un benevole WDA." />
 
	<img
	style="
		top: 78px;
		left: 198px;
		position: absolute;
	"
	src="https://wda-fr.org/pict/wda-circle.png"
	title="Coordonnees du benevole Bruno SANCHEZ."
	alt="Coordonnees d'un benevole WDA." />
 
	<img
	style="
		top: 56px;
		left: 152px;
		position: absolute;
	"
	src="https://wda-fr.org/pict/wda-circle.png"
	title="Coordonnees du benevole Association BIOS."
	alt="Coordonnees d'un benevole WDA." />
</figure>
</div>
 
<div id="France-Adresses" style="position: relative;text-align:center;">
	<br />B&eacute;n&eacute;vole : Mathieu CHARREYRE<br />Adresse : c/o WDA, 3 villa Jacquemont, 75017 Paris<br />Ordonnee : 78<br />Abscisse : 198<br />    
	<br />B&eacute;n&eacute;vole : Cyrille ROBIN<br />Adresse : 1 Avenue Eugène FREYSSINET, 78061 Saint-Quentin en Yvelines<br />Ordonnee : 82<br />Abscisse : 192<br />    
	<br />B&eacute;n&eacute;vole : Gérard NICOLAS<br />Adresse : 39 allée de Bréviande, 77350 Le Mée sur Seine<br />Ordonnee : 87<br />Abscisse : 202<br />    
	<br />B&eacute;n&eacute;vole : Bruno SANCHEZ<br />Adresse : 8 rue Marbeau, 75116 Paris<br />Ordonnee : 78<br />Abscisse : 198<br />    
</div>

**NoSmoking** · 29/07/2021, 15h49

Bonjour,

Comment faire ?

de bien des façons

• Tu pourrais passer par un fichier SVG ce qui me paraît à priori le plus adapté.

• Quoiqu'il arrive il ne te faut pas utiliser des unités fixes, le px, mais plutôt passer le positionnement en % dans un même conteneur dimensionné.

Par exemple dans ton cas :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<img style="
  top: 19.9488%;
  left: 52.1053%;
  position: absolute;"
  src="https://wda-fr.org/pict/wda-circle.png"
  title="Coordonnees du benevole Mathieu C$$$$$$$E."
  alt="Coordonnees d'un benevole WDA.">

à la place de

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<img style="
  top: 78px;
  left: 198px;
  position: absolute;"
  src="https://wda-fr.org/pict/wda-circle.png"
  title="Coordonnees du benevole Mathieu C$$$$$$$E."
  alt="Coordonnees d'un benevole WDA.">

Nota : ta page à quand même une construction calamiteuse en ce qui concerne la liste

**Casio** · 30/07/2021, 09h01

Merci de vos retours !

ATTENTION, les données brutes proviennent d'une BDD MySQL contenant BEAUCOUP d'autres infos.
J'ai juste rajouté des coordonnées que je me suis embêté à calculer une par une en fonction des adresses des bénévoles.

Une fois les coordonnées dans la BDD, la carte affiche dynamiquement sa position.
Il me suffit de changer les coordonnées pour changer le point.

C'est vraiment au niveau du centrage potentiel de la carte que j'ai un pb.

**Casio** · 30/07/2021, 10h18

Bon, visiblement, c'était le "figure" qui me sauve la vie ... Merci

Voici le code actuel :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<?php
        // Serveur
        require __DIR__ . "/../moteurs/app-data.php";
 
        // Connexion SQL
        require __DIR__ . "/../moteurs/cnx-moteur.php";
 
        // Check benevoles
        $req = $connexion->query ("SELECT * FROM $table4 WHERE Actif = 'Oui' AND debarras <> '' ORDER BY Date ASC");
 
        // Nombre de benevoles
        //$aboadh = $req->num_rows;
 
        // Antennes officielles WDA
        $coord_Ant_Paris = explode(",", "62,194");
        $coord_Ant_PACA = explode(",", "285,295");
        $coord_Ant_Normandie = explode(",", "39,152");
        $coord_Ant_Vendee = explode(",", "146,78");
        $coord_Ant_Charente = explode(",", "198,130");
        $coord_Ant_Belgique = explode(",", "0,257");
        $coord_Ant_Bretagne = explode(",", "95,85");
?>
 
<div style="text-align:center;">
	<figure id="France" style="position: relative;display: inline-block;margin: 10px auto;">
 
    <img src="https://wda-fr.org/pict/France_WDA-clr.png" />
 
    <?php while ($donnees = $req->fetch_assoc()):
    
        $nom = utf8_encode($donnees['Prenom']) . " " . utf8_encode($donnees['Nom']);
        $adresse = utf8_encode($donnees['Adresse']);
        $coordonnees = $donnees['maps'];
        if ($coordonnees != "") {
            $axe = explode(",", $coordonnees);
            ?>
 
            <img
            style="
                top: <?php echo $axe[0] . "px"; // Ordonnee ?>;
                left: <?php echo $axe[1] . "px"; // Abscisse ?>;
                position: absolute;
            "
            src="https://wda-fr.org/pict/wda-circle.png"
            title="Coordonnees du benevole <?php echo $nom; ?>."
            alt="Coordonnees d'un benevole WDA." />
 
            <?php
            // Debugg
            //echo "<br />B&eacute;n&eacute;vole : " . $nom . "<br />"; // Nom
            //echo "Adresse : " . $adresse . "<br />"; // Adresse
            //echo "Ordonnee : " . $axe[0] . "<br />"; // Oordonnee
            //echo "Abscisse : " . $axe[1] . "<br />"; // Abscisse
        }
        endwhile
    ?>
 
    <img
        style="
            top: <?php echo $coord_Ant_Paris[0] . "px"; // Ordonnee ?>;
            left: <?php echo $coord_Ant_Paris[1] . "px"; // Abscisse ?>;
            position: absolute;
        "
        src="https://wda-fr.org/pict/Local-point.png"
        title="Coordonnees d'une antenne WDA."
        alt="Coordonnees d'une antenne WDA." />
    <img
        style="
            top: <?php echo $coord_Ant_PACA[0] . "px"; // Ordonnee ?>;
            left: <?php echo $coord_Ant_PACA[1] . "px"; // Abscisse ?>;
            position: absolute;
        "
        src="https://wda-fr.org/pict/Local-point.png"
        title="Coordonnees d'une antenne WDA."
        alt="Coordonnees d'une antenne WDA." />
    <img
        style="
            top: <?php echo $coord_Ant_Normandie[0] . "px"; // Ordonnee ?>;
            left: <?php echo $coord_Ant_Normandie[1] . "px"; // Abscisse ?>;
            position: absolute;
        "
        src="https://wda-fr.org/pict/Local-point.png"
        title="Coordonnees d'une antenne WDA."
        alt="Coordonnees d'une antenne WDA." />
    <img
        style="
            top: <?php echo $coord_Ant_Vendee[0] . "px"; // Ordonnee ?>;
            left: <?php echo $coord_Ant_Vendee[1] . "px"; // Abscisse ?>;
            position: absolute;
        "
        src="https://wda-fr.org/pict/Local-point.png"
        title="Coordonnees d'une antenne WDA."
        alt="Coordonnees d'une antenne WDA." />
    <img
        style="
            top: <?php echo $coord_Ant_Charente[0] . "px"; // Ordonnee ?>;
            left: <?php echo $coord_Ant_Charente[1] . "px"; // Abscisse ?>;
            position: absolute;
        "
        src="https://wda-fr.org/pict/Local-point.png"
        title="Coordonnees d'une antenne WDA."
        alt="Coordonnees d'une antenne WDA." />
    <img
        style="
            top: <?php echo $coord_Ant_Belgique[0] . "px"; // Ordonnee ?>;
            left: <?php echo $coord_Ant_Belgique[1] . "px"; // Abscisse ?>;
            position: absolute;
        "
        src="https://wda-fr.org/pict/Local-point.png"
        title="Coordonnees d'une antenne WDA."
        alt="Coordonnees d'une antenne WDA." />
    <img
        style="
            top: <?php echo $coord_Ant_Bretagne[0] . "px"; // Ordonnee ?>;
            left: <?php echo $coord_Ant_Bretagne[1] . "px"; // Abscisse ?>;
            position: absolute;
        "
        src="https://wda-fr.org/pict/Local-point.png"
        title="Coordonnees d'une antenne WDA."
        alt="Coordonnees d'une antenne WDA." />
 
	</figure>
</div>

**NoSmoking** · 31/07/2021, 16h57

En fait j'avais également compris que tu avais en plus une dimension variable de ta carte !

Envoyé par Casio

ATTENTION, les données brutes proviennent d'une BDD MySQL contenant BEAUCOUP d'autres infos.
J'ai juste rajouté des coordonnées que je me suis embêté à calculer une par une en fonction des adresses des bénévoles.

cela n'est pas un soucis dans le sens où tu peux tout à fait faire le calcul côté serveur, une simple règle de trois.

Tout cela n'est donc effectivement pas utile si ta carte a des dimensions invariables et donc n'a pas a être « responsive ».

Envoyé par Casio

c'était le "figure" qui me sauve la vie

Non c'est le fait d'avoir un même contenant référent « ajusté » pour toutes tes images.

PS : si c'est résolu alors merci de passer cette discussion en résolue

**Casio** · 03/08/2021, 10h20

Pour une raison inconnue, la map est plus grosse que l'originale, et sort donc de mon gabarit responsive du coup.

Comment je peux l'adapter ?

**jreaux62** · 03/08/2021, 11h12

bonjour,

j'ai retrouvé ça dans mes archives :

https://codepen.io/jreaux62/pen/BVyoBY
la carte est responsive, et les coordonnées indiquées en %

Dans ton cas, une simple règle de trois permet de passer des coordonnées en px -> en %

Les dimensions de ta carte de france (https://wda-fr.org/pict/France_WDA-clr.png) sont :

380 x 391px

soit :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?php
// dimensions de la carte de france
$W_map = 380;
$H_map = 391;
?>

et en reprenant ton code :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
            <img
            style="
                top: <?php echo ($axe[0]*100/$H_map) . "%"; // Ordonnee ?>;
                left: <?php echo ($axe[1]*100/$W_map) . "%"; // Abscisse ?>;
                position: absolute;
            "

Tu peux aussi :

enregistrer les coordonnées en % en bdd (au lieu des px)
choisir une carte plus grande (960px de large, par exemple, pour peu que les proportions soient les même)

**Casio** · 04/08/2021, 10h02

Le passage ne pourcentage fonctionne bien pour les pastilles W (quelques mm de décalage mais c'est jouable).

Par contre, si je mets un width sur l'Img de la France ou sur son DIV, tout est décalé :

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
<div style="text-align:center;">
	<figure id="France" style="position: relative;display: inline-block;margin: 10px auto;">
 
    <img src="https://wda-fr.org/pict/France_WDA-clr.png" width="80%" />
 
    <?php while ($donnees = $req->fetch_assoc()):
    
        $nom = utf8_encode($donnees['Prenom']) . " " . utf8_encode($donnees['Nom']);
        $adresse = utf8_encode($donnees['Adresse']);
        $coordonnees = $donnees['maps'];
        if ($coordonnees != "") {
            $axe = explode(",", $coordonnees);
            ?>
 
            <img
            style="
                top: <?php echo ($axe[0]*100/$H_map) . "%"; // Ordonnee ?>;
                left: <?php echo ($axe[1]*100/$W_map) . "%"; // Abscisse ?>;
                position: absolute;
            "
            src="https://wda-fr.org/pict/wda-circle.png"
            title="Coordonnees du benevole <?php echo $nom; ?>."
            alt="Coordonnees d'un benevole WDA." />

**jreaux62** · 04/08/2021, 10h46

bonjour,

comme je l'ai dit plus haut, c'est la balise <figure> qui, ici, sert de référence aux top/left.
C'est donc elle qu'il faut dimensionner.
ET, évidemment; la carte doit "suivre, avec width:100%;

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<figure id="France" style="position: relative;display:inline-block;margin:10px auto;width:80%;">
 
    <img src="https://wda-fr.org/pict/France_WDA-clr.png" style="width:100%;" />

**jreaux62** · 04/08/2021, 11h19

Je te propose une amélioration : affichage de l'adresse au survol

CSS (dans le <head>, entre balises <style></style>) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#carteFrance { text-align:center; }
#carteFrance > div { position:relative; display:inline-block; margin:10px auto; width:80%; }
#carteFrance > div > img { width:100%; } /* la carte de France */
#carteFrance > div figure { position:relative; display:inline-block; }
/* tooltip : coordonnées au survol */
#carteFrance > div figure figcaption { position:absolute; width:200px; bottom:130%;/*tooltip au dessus*/ left:50%; transform:translate(-50%); 
   background:#fff; border:1px solid #ccc; padding:5px;
   display:none; /*on masque*/ }
#carteFrance > div figure:hover figcaption { display:block; }

Code php :

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
<section id="carteFrance">
	<div>
 
    <img src="https://wda-fr.org/pict/France_WDA-clr.png" style="width:100%;" />
 
<?php while ($donnees = $req->fetch_assoc()):
 
	$nom = utf8_encode($donnees['Prenom']) . " " . utf8_encode($donnees['Nom']);
	$adresse = utf8_encode($donnees['Adresse']);
	$coordonnees = $donnees['maps'];
	if ($coordonnees != "") 
	{
		$axe = explode(",", $coordonnees); // $axe[0] : Ordonnee - $axe[1] : Abscisse
?>
		<figure style="top:<?php echo ($axe[0]*100/$H_map); ?>%; left:<?php echo ($axe[1]*100/$W_map); ?>%;">
			<img
			src="https://wda-fr.org/pict/wda-circle.png"
			title="Coordonnees du benevole <?php echo $nom; ?>."
			alt="Coordonnees d'un benevole WDA." />
			<figcaption><?php echo $adresse; // adresse ?><figcaption>
		</figure>

A NOTER : dans mon dernier code, j'ai remplacé :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div style="text-align:center;">
	<figure id="France" style="position: relative;display: inline-block;margin: 10px auto;">

par :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<section id="carteFrance">
	<div>

-> C'est CE <div> qui sert de référence
Explication :

comme il est en display:inline-block; il prend les mêmes dimensions que la carte de France.
il sert de référence, car il est en position:relative;

**Casio** · 04/08/2021, 15h38

Envoyé par jreaux62

Je te propose une amélioration : affichage de l'adresse au survol

(...)

Houlà, je venais à peine de comprendre des trucs, que tout change

Les coordonnées des pastilles sont du coup toutes fausses :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<?php
        // Serveur
        require __DIR__ . "/../moteurs/app-data.php";
 
        // Connexion SQL
        require __DIR__ . "/../moteurs/cnx-moteur.php";
 
        // Check benevoles
        $req = $connexion->query ("SELECT * FROM $table4 WHERE Actif = 'Oui' AND debarras <> '' ORDER BY Date ASC");
 
        // Nombre de benevoles
        //$aboadh = $req->num_rows;
 
        // dimensions de la carte de France
        $W_map = 380;
        $H_map = 391;
 
        // Antennes officielles WDA
        $coord_Ant = array (
                array("Paris",62,194),
                array("PACA",285,295),
                array("Normandie",39,154),
                array("Vendee",146,78),
                array("Charente",198,130),
                array("Belgique",0,257),
                array("Bretagne",95,85)
        );
?>
 
<style>
        #carteFrance { text-align:center; }
        #carteFrance > div { position:relative; display:inline-block; margin:10px auto; width:80%; }
        #carteFrance > div > img { width:100%; } /* la carte de France */
        #carteFrance > div figure { position:relative; display:inline-block; }
        /* tooltip : coordonnées au survol */
        #carteFrance > div figure figcaption { position:absolute; width:200px; bottom:130%;/*tooltip au dessus*/ left:50%; transform:translate(-50%); 
           background:#fff; border:1px solid #ccc; padding:5px;
           display:none; /*on masque*/ }
        #carteFrance > div figure:hover figcaption { display:block; }
        /*#France{
                position:relative;
                display:inline-block;
                margin: 10px auto;
                width: 50%;*/
                /*cursor: -moz-zoom-in; 
                cursor: -webkit-zoom-in; 
                cursor: zoom-in;*/
                /* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
                /*-webkit-transition: all 1s ease; /* Safari et Chrome */
                /*-moz-transition: all 1s ease; /* Firefox */
                /*-ms-transition: all 1s ease; /* Internet Explorer 9 */
                /*-o-transition: all 1s ease; /* Opera */
                /*transition: all 1s ease;
        }
        #France:hover {
                /* L'image est grossie de 25% */
                /*-webkit-transform:scale(1.25); /* Safari et Chrome */
                /*-moz-transform:scale(1.25); /* Firefox */
                /*-ms-transform:scale(1.25); /* Internet Explorer 9 */
                /*-o-transform:scale(1.25); /* Opera */
                /*transform:scale(1.25);*/
        }
</style>
 
<section id="carteFrance">
	<div>
 
    <img src="https://wda-fr.org/pict/France_WDA-clr.png" style="width:100%;" />
 
    <?php while ($donnees = $req->fetch_assoc()):
    
        $nom = utf8_encode($donnees['Prenom']) . " " . utf8_encode($donnees['Nom']);
        $adresse = utf8_encode($donnees['Adresse']);
        $coordonnees = $donnees['maps'];
        if ($coordonnees != "") {
            $axe = explode(",", $coordonnees);
            ?>
 
            <figure style="top:<?php echo ($axe[0]*100/$H_map); ?>%; left:<?php echo ($axe[1]*100/$W_map); ?>%; position: absolute;">
                <img src="https://wda-fr.org/pict/wda-circle.png" title="Coordonnees du benevole <?php echo $nom; ?>." alt="Coordonnees d'un benevole WDA." />
				<figcaption><?php echo $adresse; // adresse ?><figcaption>
            </figure>
 
            <?php
                }
        endwhile;
 
                foreach ($coord_Ant as $CA) {
                        ?>
			<figure style="top: <?php echo ("$CA[1]"*100/$H_map) . "%"; ?>; left: <?php echo ("$CA[2]"*100/$W_map) . "%"; ?>; position: absolute;
                                ">
                <img src="https://wda-fr.org/pict/Local-point.png" title="Antenne WDA <?php echo "$CA[0]"; ?>." alt="Coordonnees d'une antenne WDA." />
			</figure>
			<?php
                }
    ?>
 
	</div>
</section>

Sinon, j'vais avancé sur le code :

Envoyé par jreaux62

(...)

comme je l'ai dit plus haut, c'est la balise <figure> qui, ici, sert de référence aux top/left.
C'est donc elle qu'il faut dimensionner.
ET, évidemment; la carte doit "suivre, avec width:100%;

(...)

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<?php
        // Serveur
        require __DIR__ . "/../moteurs/app-data.php";
 
        // Connexion SQL
        require __DIR__ . "/../moteurs/cnx-moteur.php";
 
        // Check benevoles
        $req = $connexion->query ("SELECT * FROM $table4 WHERE Actif = 'Oui' AND debarras <> '' ORDER BY Date ASC");
 
        // Nombre de benevoles
        //$aboadh = $req->num_rows;
 
        // dimensions de la carte de France
        $W_map = 380;
        $H_map = 391;
 
        // Antennes officielles WDA
        $coord_Ant = array (
                array("Paris",62,194),
                array("PACA",285,295),
                array("Normandie",39,154),
                array("Vendee",146,78),
                array("Charente",198,130),
                array("Belgique",0,257),
                array("Bretagne",95,85)
        );
?>
 
<style>
        #France{
                position:relative;
                display:inline-block;
                margin: 10px auto;
                width: 50%;
                /*cursor: -moz-zoom-in; 
                cursor: -webkit-zoom-in; 
                cursor: zoom-in;*/
                /* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
                /*-webkit-transition: all 1s ease; /* Safari et Chrome */
                /*-moz-transition: all 1s ease; /* Firefox */
                /*-ms-transition: all 1s ease; /* Internet Explorer 9 */
                /*-o-transition: all 1s ease; /* Opera */
                /*transition: all 1s ease;
        }
        #France:hover {
                /* L'image est grossie de 25% */
                /*-webkit-transform:scale(1.25); /* Safari et Chrome */
                /*-moz-transform:scale(1.25); /* Firefox */
                /*-ms-transform:scale(1.25); /* Internet Explorer 9 */
                /*-o-transform:scale(1.25); /* Opera */
                /*transform:scale(1.25);*/
        }
</style>
 
<div style="text-align:center;">
	<figure id="France">
 
    <img src="https://wda-fr.org/pict/France_WDA-clr.png" style="width:100%;" />
 
    <?php while ($donnees = $req->fetch_assoc()):
    
        $nom = utf8_encode($donnees['Prenom']) . " " . utf8_encode($donnees['Nom']);
        $adresse = utf8_encode($donnees['Adresse']);
        $coordonnees = $donnees['maps'];
        if ($coordonnees != "") {
            $axe = explode(",", $coordonnees);
            ?>
 
            <img
            style="
                top: <?php echo ($axe[0]*100/$H_map) . "%"; // Ordonnee ?>;
                left: <?php echo ($axe[1]*100/$W_map) . "%"; // Abscisse ?>;
                position: absolute;
            "
            src="https://wda-fr.org/pict/wda-circle.png"
            title="Coordonnees du benevole <?php echo $nom; ?>."
            alt="Coordonnees d'un benevole WDA." />
 
            <?php
                }
        endwhile;
 
                foreach ($coord_Ant as $CA) {
                        ?>
			<img
				style="
                                        top: <?php echo ("$CA[1]"*100/$H_map) . "%"; // Ordonnee ?>;
                                        left: <?php echo ("$CA[2]"*100/$W_map) . "%"; // Abscisse ?>;
                                        position: absolute;
                                "
				src="https://wda-fr.org/pict/Local-point.png"
				title="Antenne WDA <?php echo "$CA[0]"; ?>."
				alt="Coordonnees d'une antenne WDA." />
			<?php
                }
    ?>
 
	</figure>
</div>

**NoSmoking** · 05/08/2021, 17h30

• Sans redimensionnement :
Si ton but est de présenter, sans redimensionnement, l'image simplement centrée, la solution t'a été donnée, en unités fixes, et de plus tu peux directement mettre la width sur le conteneur et pour une méthode de centrage il existe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
ton-conteneur {
  display: block;
  position: relative;
  width: 480px;
  margin: auto;
}

sans déclaration de la largeur tu peux également faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
ton-contneur {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}

• Adaptable :
Maintenant si tu souhaites que l'ensemble s'adapte à son conteneur, donc en passant par des dimensions en pourcentage, il est des choses à prendre en compte.

Le conteneur doit être positionné pour servir de référent, ça tu l'as compris ;
Le conteneur et l'image « principale » doivent avoir les mêmes dimensions, fixes ou relatives ;
L'image « principale » doit être en display:block afin de ne pas présenter d'espace en dessous d'elle. Les images « secondaires » étant redimensionnées par rapport à celle-ci mais positionnées par rapport au conteneur il pourrait donc apparaître un décalage dans le positionnement.
Les dimensions des images « secondaires » doivent également être exprimées en pourcentage afin d'éviter les distorsions et décalages lors d'un redimensionnement.

Ce dernier point est important si tu ne veux pas tout cassé !

• Bonus :
J'ai finalisé un fichier de démo qui montre la démarche, celui-ci fait appel à JavaScript pour l'affectation des dimensions et des positions mais cela est facilement transposable côté serveur pour peu que tu définisses les dimensions de chacune des images utilisées.

Le fichier en ligne : Superposition d'images positionnées

**Casio** · 06/08/2021, 10h03

Oki, j'ai mis à jour ne virant figure, et en simplifiant.

Cela me donne ceci :

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
<style>
        #France{
                display: inline-block;        /* occupe la place nécessaire à son contenu dans le flux */
                position: relative;           /* pour servir de référent */
                width: 80%;
                max-width: 50em;
                left: 50%;                    /* centrage horizontal */
                transform: translate(-50%);
        }
 
        #France img:first-child {
                width: 100%;                  /* 100% du conteneur */
                position: relative;           /* rétabli dans le flux */
                display: block;               /* pour supprimer l'espace sous image */
        }
 
        #France img {
                position: absolute;
        }
</style>
 
<div id="France">
 
    <img src="https://wda-fr.org/pict/France_WDA-clr.png" />
 
    <?php while ($donnees = $req->fetch_assoc()):
    
        $nom = utf8_encode($donnees['Prenom']) . " " . utf8_encode($donnees['Nom']);
        $adresse = utf8_encode($donnees['Adresse']);
        $coordonnees = $donnees['maps'];
        if ($coordonnees != "") {
            $axe = explode(",", $coordonnees);
            ?>
            <img
            style="top:<?php echo ($axe[0]*100/$H_map) . "%"; ?>;left:<?php echo ($axe[1]*100/$W_map) . "%"; ?>;"
            src="https://wda-fr.org/pict/wda-circle.png"
            title="Coordonnees du benevole <?php echo $nom; ?>."
            alt="Coordonnees d'un benevole WDA." />
            <?php
                }
        endwhile;
 
                foreach ($coord_Ant as $CA) {
                        ?>
			<img
				style="top:<?php echo ("$CA[1]"*100/$H_map) . "%"; ?>;left:<?php echo ("$CA[2]"*100/$W_map) . "%"; ?>;"
				src="https://wda-fr.org/pict/Local-point.png"
				title="Antenne WDA <?php echo "$CA[0]"; ?>."
				alt="Coordonnees d'une antenne WDA." />
			<?php
                }
    ?>
 
</div>

Mais les marqueurs secondaires (Antennes) sont bizarrement imprécis par rapport au premiers marqueurs (Benevoles).

**jreaux62** · 06/08/2021, 10h23

bonjour,

ta carte de France fait 380 x 391px.
Normal que tu sois précis "à une vache près".

Carte de France gratuite

**Casio** · 06/08/2021, 10h36

J'ai calibré l'ensemble des 41 bénévoles par rapport à cette carte.

J'avoue ne pas avoir le courage de tout refaire.

Ceci étant, je ne comprends pas pkoi les marqueurs antenne ne sont pas précis comme ceux des bénévoles.

**jreaux62** · 06/08/2021, 10h42

Question subsidiaire :

as-tu enregistré les coordonnées GPS de chaque antenne/adresse ?
(tu peux aller sur Google Maps pour les trouver)

car il suffit alors de connaitre celles des 4 coins de la carte pour faire une règle de trois.

N.B. 41 adresses à trouver/positionner, ce n'est pas la mer à boire...

**Casio** · 06/08/2021, 10h47

Envoyé par jreaux62

Question subsidiaire :

as-tu enregistré les coordonnées GPS de chaque antenne/adresse ?
(tu peux aller sur Google Maps pour les trouver)

car il suffit alors de connaitre celles des 4 coins de la carte pour faire une règle de trois.

N.B. 41 adresses à trouver/positionner, ce n'est pas la mer à boire...

Je serais totalement incapable de faire cela.

J'ai tout fait à la main, en zoomant ... Presque 2 hrs.

**jreaux62** · 06/08/2021, 11h05

Obtenir ou indiquer la latitude et la longitude

https://www.google.fr/maps

copier l'adresse à chercher
sur l'icone rouge : "clic droit" -> on obtient les coordonnées GPS

Nom : google-maps-coords-gps.jpg
Affichages : 194
Taille : 360,8 Ko

La seule "difficulté" sera de trouver les coordonnées des coins de la carte de France que tu auras choisie.

Si je prends celle-ci (Carte de France gratuite), on peut extrapoler les coordonnées des coins (en vert) avec les longitudes/latitudes des "limites" en rouge.

Nom : carte-de-france-coords-gps.jpg
Affichages : 105
Taille : 77,5 Ko