Bonjour tout le monde

je suis actuellement débutant dans la programmation et j'aimerais avoir un conseil

je cherche en fait a placer plusieur point sur une carte (par exemple placer paris lyon rennes et marseille) j'aimerais savoir si il me fauut une div par point ou bien si je peux tous les regrouper sous une grande div ?
Modérateur
Bonjour,

Le problème n'est pas très clair.... avez-vous déjà du code en place ? C'est un carte interactive du genre GoogleMap ou bien une image ? Comment voyez-vous le placement de ces points ?
Bonjour

il s'agit d'une image et j'ai décidé de passer par la méthode d'une div par point quin'est pas forcément la plus optimale mais c'est un peu du dépannage pour le moment
euh........
faire une carte avec des divs ?? j'ai pas compris.

Normalement une carte de la France est faite avec les svg.

Montre ton code Smiley smile
Placer des objets aux coordonnées x-y d'une image est enfantin,
prépares tes images et utilise ce petit php vite fait pour toi que tu saura régler a ta mesure !
Résultat ici regardes le FOX en bas de l'image , ce sont deux images incrustées l'une dans l'autre !
http://www.fox-infographie.com/fox_jpg_png.php

<?php
header ("Content-type: image/jpeg"); 
$MonCopyRight = imagecreatefrompng("zzz/fox2.png"); 
$nxCopyRight = imagesx($MonCopyRight);$nyCopyRight = imagesy($MonCopyRight);
$Photo = imagecreatefromjpeg("zzz/foxmauritanie.jpg");
$nxPhoto = imagesx($Photo);$nyPhoto = imagesy($Photo);
$placeX = 0;$placeY =  $nyPhoto - $nyCopyRight;
imagecopymerge($Photo, $MonCopyRight, $placeX, $placeY, 0, 0, $nxCopyRight, $nyCopyRight, 100);
imagejpeg($Photo);
?>
alaryck a écrit :

je cherche en fait a placer plusieurs points sur une carte (par exemple placer Paris Lyon Rennes et Marseille) j'aimerais savoir si il me faut une div par point ou bien si je peux tous les regrouper sous une grande div ?

pour autant que je comprenne ce que cela signifie, c'est semblable à ce que j'ai fait dans http://osirisnet.net/carte/carte_01.htm?fr
Le code:

<div id="map">
	<img id="mapBackground" src="egypt.png" alt="">
	<div class="mapPoint" style="top:7.78%;left:33.58%;">
		<img src="bullet_gray.png" alt="">
		<div class="S">Alexandrie</div>
	</div>
	.......................................
	.......................................
	.......................................
	.......................................
	.......................................
</div>

avec

#map {
	position: relative;  /* pour pouvoir contenir des éléments superposés en absolute */
	float:right; /* dans cette page, la carte est à droite de la légende */
	width:65%; /* largeur de la carte par rapport à son conteneur */
	border:2px solid #990000;
	border-radius:1em;
}
#mapBackground{width:100%;border-radius:1em;} /* image du fond de carte */
.mapPoint {    /* un point sur la carte */
	position:absolute; 
	z-index:100;   /* au dessus du fond de carte */
	width:1px;
	height:1px;
}
.mapPoint > img {    /* le petit rond qui matérialise le point */
	position:absolute;
	top:0;    /* il est positionné sur le point */
	left:0;
	transform: translate(-50%, -50%); /* et décalé pour être centré sur le point */
}
.mapPoint > img[src*="bullet_"] {height:0.5em;} /* la hauteur de l'image */

Explication:
- une <div> contenant toute la carte
- une image de fond de carte
- une <div> par point sur la carte
La difficulté est de positionner les points sur la carte.
Pour ce faire, j'ai défini chaque point comme un objet JavaScript, contenant essentiellement les coordonnées géographiques du point, son nom et quelques informations supplémentaires.
Par ailleurs j'ai défini les coordonnées géographiques du coin en haut à gauche (NW) et du point en bas à droite (SE)
Le script calcule la position du pont en % de la largeur et de la hauteur de la carte et génère le HTML de chaque point par de simples règles de 3.
Modifié par PapyJP (14 Jun 2017 - 10:42)
Christele a écrit :

C'est hyper compliqué, pourquoi ne pas faire une image comme j'ais indiqué Smiley confused

Je pense que c'est le genre de solution qu'il recherche.
De mon côté si j'ai fait cette page de cette façon c'est parce que les points de la carte sont en fait des entrées de menu, avec des liens à plusieurs niveaux, et deux versions français / anglais, plus le fait que le propriétaire du site aura besoin d'ajouter des points, ce qui peut entraîner de déplacer la position des textes.
Mais s'il s'agit de faire une image figée, pourquoi ne pas la faire simplement avec un éditeur d'images ?
PapyJP a écrit :

Je pense que c'est le genre de solution qu'il recherche.
De mon côté si j'ai fait cette page de cette façon c'est parce que les points de la carte sont en fait des entrées de menu, avec des liens à plusieurs niveaux, et deux versions français / anglais, plus le fait que le propriétaire du site aura besoin d'ajouter des points, ce qui peut entraîner de déplacer la position des textes.
Mais s'il s'agit de faire une image figée, pourquoi ne pas la faire simplement avec un éditeur d'images ?

Pa figé du tout, car c'est dynamique et on peut passer les cotes a la demande, j'ais sur le même principe simulé un achat de tableau mis en place a la demande, 10 tableaux 10 intérieurs!
http://www.fox-infographie.com/wblog_tableau_photo_en_place2.php
Pour ta carte tu peux aussi faire une seule image et une MAP car on sait maintenant garder les coordonnées d'une MAP même en media queries !!
Modifié par Christele (14 Jun 2017 - 23:20)