Map monde avec liens sur pays

Résolu

caro777 Messages postés 147 Statut Membre -
Aurélien - 16 nov. 2007 à 17:11

hello,

j'aimerai bien mettre en ligne une carte du monde ou on pourrait cliquer sur les pays et aisni se retrouver sur une autre page du site consacrée à ce pays.

Alors est ce que je dois faire la carte sous flash mais alors je dois mettre le code du lien sous flash?? ou sinon est ce que je dois m'y prendre autrement...

tte suggestion est la bienvenue

merci

Configuration: Windows XP
Firefox 2.0.0.1

Afficher la suite

A voir également:

Map monde avec liens sur pays
Roole map - Guide
Partager des photos avec un lien - Guide
Google map satellite gratuit - Guide
0035 quel pays - Forum Mobile
Indicatif 447 quel pays - Forum Mobile

65 réponses

Résumé de la discussion

La solution simple consiste à remplacer Flash par HTML en utilisant une image du monde et une carte réactive, afin que chaque pays soit cliquable et mène à une page dédiée. On y déclare les zones cliquables avec la balise <map> et les zones actives <area>, en associant des href vers les pages pays et des attributs shape/coords pour délimiter les régions. Pour l’accessibilité et la compatibilité, il convient d’ajouter des textes alternatifs dans l’attribut alt et, si nécessaire, des scripts simples pour précharger et changer l’image au survol. D’autres échanges évoquent l’ajout de petits scripts JavaScript pour changer l’image lors du survol ou pour maintenir la réactivité sans dépendre d’un navigateur récent ou de préférer une solution purement HTML.

Réponse 1 / 65

Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention 923

on peux fêter notre 50ème message!!! ;-)
je ne refuse jamais une invitation au café !!!
d'ailleurs tu n'as pas respecté la tradition qui veut que les nouveaux membres se présenter au café et paient la tournée…
la honte !!!
-:op
mais bon ! moi j'dis ça, j'dis rien…

j'en ai parcouru du chemin depuis alors merci à toi de me faire partager tes compétences en la matiére et de prendre le temps pour m'expliquer tout ca...
est-ce que tu veux de la doc ? les cours et les tutos c'est un passage obligé, surtout si tu veux partir sur des bases saines.

sinon ca fonctionne toujours pas....:-(

hum, hum (quinquies)…
-;op
je viens de regarder ton code plus sérieusement, dans un éditeur en fait.
et je me suis un peu abimé les yeux quand même !
comment veux-tu que ça fonctionne ?! c'est un vrai b***del !

il faut que tu saches comment s'articule un document html sinon tu vas galérer à longueur de temps.
allez hop, un p'tit tuto sur html !
et un aut' sur css !
ce ne sont que des introductions, c'est vite lu et ça pose pas mal de choses.

voici une version arrangée de ton code. ça tourne à part que les images des pays ne sont pas à la place que tu as indiquée. la carte du monde s'affiche et réagit au survol.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>

<script type="text/javascript">
if(document.images)
{

preload = false;

url = new Array();
url[0] = "images/projets/monde.gif";
url[1] = "images/projets/bolivie.gif";
url[2] = "images/projets/bresil.gif";
url[3] = "images/projets/burkina.gif";
url[4] = "images/projets/colombie.gif";
url[5] = "images/projets/haiti.gif";
url[6] = "images/projets/inde.gif";
url[7] = "images/projets/madagascar.gif";
url[8] = "images/projets/mali.gif";
url[9] = "images/projets/perou.gif";
url[10] = "images/projets/senegal.gif";
url[11] = "images/projets/uruguay.gif";

var i = 0;
for(i=0; i<12; i++)
{
tmp = new Image(640, 480);
tmp.src = url[i];
}

preload = true;

}

function changeImage(img_index) {

if (document.images && (preload == true)) {
document.plan.src = url[img_index];
}

}
</script>
	</head>

	<body>
		<p>
			<img border="0" id="plan" alt="carte du monde" src="images/projets/monde.gif" width="651" height="386" usemap="#map"/>
			<map name="map" id="map">
				<area shape="poly" coords="193,286,190,285,188,289,179,276,182,270,183,263,189,263,196,269,200,273,194,287" alt="bolivie" href="index.php?lang=fr&page=pro.bol" onmouseover="changeImage(1);return false;" onmouseout="changeImage(0);return false;" >
				<area shape="poly" coords="212,232,196,233,185,238,176,259,188,263,202,273,202,290,209,294,204,300,212,309,221,290,237,283,237,272,246,256,223,243,214,244,218,239,210,233" alt="bresil" href="index.php?lang=fr&page=pro.bre" onmouseover="changeImage(2);return false;" onmouseout="changeImage(0);return false;" >
				<area shape="poly" coords="314,230,313,226,324,225,324,235,315,235" alt="burkina" href="index.php?lang=fr&page=pro.bur" onmouseover="changeImage(3);return false;" onmouseout="changeImage(0);return false;" >
				<area shape="poly" coords="167,240,179,249,181,237,188,236,178,227,176,223,168,224,168,244" alt="colombie" href="index.php?lang=fr&page=pro.col" onmouseover="changeImage(4);return false;" onmouseout="changeImage(0);return false;" >
				<area shape="poly" coords="190,214,186,212,189,211,189,214" alt="haïti" href="index.php?lang=fr&page=pro.hai" onmouseover="changeImage(5);return false;" onmouseout="changeImage(0);return false;" >
				<area shape="poly" coords="452,227,442,207,439,198,456,185,459,194,485,200,477,203,457,218,455,227" alt="inde" href="index.php?lang=fr&page=pro.ind" onmouseover="changeImage(6);return false;" onmouseout="changeImage(0);return false;" >
				<area shape="poly" coords="401,288,397,282,401,271,406,272,402,288" alt="madagascar" href="index.php?lang=fr&page=pro.mad" onmouseover="changeImage(7);return false;" onmouseout="changeImage(0);return false;" >
				<area shape="poly" coords="295,209,309,195,305,194,296,205" alt="mali" href="index.php?lang=fr&page=pro.mal" onmouseover="changeImage(8);return false;" onmouseout="changeImage(0);return false;" >
				<area shape="poly" coords="176,270,176,259,170,247,163,253,168,267,173,273" alt="perou" href="index.php?lang=fr&page=pro.per" onmouseover="changeImage(9);return false;" onmouseout="changeImage(0);return false;" >
				<area shape="poly" coords="304,227,306,221,300,220,295,220,302,230" alt="senegal" href="index.php?lang=fr&page=pro.sen" onmouseover="changeImage(10);return false;" onmouseout="changeImage(0);return false;" >
				<area shape="poly" coords="203,317,202,306,205,302,211,310,209,315,202,315" alt="uruguay" href="index.php?lang=fr&page=pro.uru" onmouseover="changeImage(11);return false;" onmouseout="changeImage(0);return false;" >
			</map>
		</p>
		
		<table align="center" border="0" width="510">
			<tr>
				<td align="left" bgcolor="#ffffcc" valign="top">
					<? traduction('texte_proj',__FILE__); ?>
					<p><a href="#top"><img src="/www/images/up.gif" border="0" height="5" width="9"></a></p>
				</td>
			</tr>
			<tr>
				<td width="100%">
					<h1>
						<img src="/www/images/drop.gif" height="21" width="25">
						<? traduction('titre_choix',__FILE__); ?>
						<a name="cho" id="cho"></a>
					</h1>
					<p>
					<? traduction('texte_choix',__FILE__); ?>
					</p>
					<p><a href="#top"><img src="/www/images/up.gif" border="0" height="5" width="9"></a>
					</p>
				</td>
			</tr>
			<tr>
				<td>
					<h1>
						<img src="/www/images/drop.gif" height="21" width="25">
						<? traduction('titre_suiv',__FILE__); ?>
						<a name="sui" id="sui"></a></h1>
						<p>
						<? traduction('texte_suiv',__FILE__); ?>
						</p>
						<p><a href="#top"><img src="/www/images/up.gif"/></a>
					</h1>
				</td>
			</tr>
			<tr>
				<td>
					<h1>
						<img src="/www/images/drop.gif" height="21" width="25">
						<? traduction('titre_bud',__FILE__); ?>
						<a name="bud"></a></h1>
						<? traduction('table_budg',__FILE__); ?>
						<p><a href="#top"><img src="/www/images/up.gif" border="0" height="5" width="9"></a></p>
				</td>
			</tr>
		</table>
	</body>
</html>

mais il va falloir que tu revois sérieusement ton code parce que ça part vraiment dans tous les sens.
(des balises '<h1'> à tout bout de champ, tu rechignes pas sur la dépense, lol !!! )
-:op

je te fais confiance, dans quelques temps tu feras ça en trois copier/coller !
-;o)

Réponse 2 / 65

Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention 923

salut,

tu peux le faire en html avec une simple image (<img>) et tracer des zones réactives avec <map>.

Réponse 3 / 65

caro777 Messages postés 147 Statut Membre 19

ca marche.... a + tard

Réponse 4 / 65

caro777 Messages postés 147 Statut Membre 19

re,

alors je suis sur amaya, j'ai importé ma carte mais ensuite je ne vois pas comment on sélectionne une zone... qd je fais XHTML/Plan/cercle il me met ' pas de position d'insertion definie. selectionner d'abord'

so, je peux avoir un indice..... :-) mais ou on selectionne???

merci

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 65

Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention 923

salut,

pour importer ta carte tu as fait quoi ?

• Fichier/Nouveau/Nouveau document XHTML… (tu indiques où le créer et tu donnes un titre)
• XHTML/Image (tu indiques quelle image et tu donnes un texte 'alt')
• XHTML/Plan/Cercle (le curseur est en croix, tu fais un cliqué/glissé sur l'image pour dessiner le cercle)

ne t'inquiète pas si ton <area> n'est pas au bon endroit ou pas de la bonne taille, tu pourra tout redéfinir ensuite, au pixel près.
pour cela affiche les attributs de l'objet → Vues/Montrer les outils

tu peux aussi regarder dans Aide/Zone Active.

Réponse 6 / 65

caro777 Messages postés 147 Statut Membre 19

ok j'avais pas fait comme ca en fait....normal que ca ne marche pas :-) j'aurai du commencer par l'aide!!

sinon faut-il tjrs mettre 'alt' dans texte de remplacement qd on ouvre l'image et qd on fait une selection???

ensuite lorsque j'ai fais ma selection il me demande d'inserer l'URI, que faire???
ce que je ne comprends tjrs pas c'est qu'il s'agit d'une selection en cercle alors que le pays n'est pas une forme geometrique....
je croyais qu'on avait une baguette magique ou un outil de selction comme il y en a dans photoshop....

merci, a +

Réponse 7 / 65

Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention 923

"faut-il tjrs mettre 'alt' dans texte de remplacement qd on ouvre l'image et qd on fait une selection"
oui, pour que ton code soit valide.
tu dois mettre un texte qui sera affiché à la place de l'image si le fichier n'est pas trouvé ou si le navigateur de l'utilisateur n'affiche pas les images.

"il me demande d'insérer l'URI, que faire?"
tu vas utiliser Amaya uniquement pour faire la <map> donc tu peux te permettre de mettre une valeur farfelue, tu la remplacera après mais en le faisant proprement dès le départ ce sera toujours ça de fais…

quelle valeur mettre ? cela dépend de la façon dont tu organises ton site. en fait il faut mettre l'adresse de la page qui sera affichée quand l'utilisateur cliquera sur le lien.

tu devrais mettre dans l'URI quelque chose qui ressemble à :
https://www.pagesjaunes.fr/" (l'adresse absolue de la page)
ou :
"pays/guatemala.html" (c'est l'adresse relative, plus pratique que l'adresse absolue).

"il s'agit d'une selection en cercle alors que le pays n'est pas une forme geometrique"
tu manques de curiosité !!!
essai avec XHTML/Plan/Polygone
tu cliques à chaque sommet de la figure que tu veux dessiner et tu double cliques pour fermer la figure.
par ailleurs, ce n'est pas grave si quelques pixels par ci par là ne sont pas exactement dans la zone, l'utilisateur avec sa souris n'atteint pas cette précision !

une fois que tu as fait toutes tes zones il faudra modifier le code source à la main pour ajouter le comportement en JavaScript.

Réponse 8 / 65

caro777 Messages postés 147 Statut Membre 19

dacodac....merci

en fait je ne savais qu'on pouvais s'y prendre de cette manière....j'ai cru au départ qu'il fallait tracer direct un cercle ou un poly et qu'ensuite on prenait chauque point pr le déplacer... passons.....

maintenant que j'ai fais ma sélection j'ai une partie attributs dans laquelle s'affiche
alt alt
coords 140,21,140,39,148...bref c'est assez long car j'ai mis pas mal de point (burkina :-))
href www/pages/pro.bur.php/

j'ai fais une autre selection mais maintenant comment ca se passe pr la suite.....jsuis prête pr la suite des instructions :-)

Réponse 9 / 65

Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention 923

pour l'url il faut enlever 'www'.

pour la suite il faut que tu regardes le code source de la page que je t'ai montré comme exemple et faire pareil...

as-tu fais une carte pour chaque pays avec le pays d'une couleur différente ?
si non, il faut le faire.

ensuite il faudra ajouter le JavaScript de la page exemple à ta page "carte générale". puis ajouter l'évènement à chaque <area>.

moi je vais déjeuner, j'espère pour toi que quelqu'un prendra le relais !

Réponse 10 / 65

Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention 923

re,

un exemple qui te permettra de faire le reste, il n'y a qu'à afficher le code source et à s'en inspirer !

Réponse 11 / 65

caro777 Messages postés 147 Statut Membre 19

c tt à fait ce qu'il me fallait....

merci ca va bcp m'aider mais j'ai tt d'abord une question....le roll-over tu le fais sous amaya??? et comment? tu crées une autre image?? tu remplis ta selection d'une couleur....bref concretement comment tu t'y prends??? ca peut paraitre un peu bête mais finalement la je suis concée!!!

gracias

Réponse 12 / 65

caro777 Messages postés 147 Statut Membre 19

pr le roll over je ne connais pas du tt amaya....est ce que tu fais un remplacement d'image avec une autre image pas forcement crée sous amaya et que tu mets dans le même dossier à la racine du site...bref je ne sais pas...

Réponse 13 / 65

Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention 923

salut,

le rectangle principal (jaune) est une balise '<img>' associée à une carte de zones réactives ('<map>'), le comportement au survol est codé en Javascript.

<img
	id="plan"
	alt="Carré jaune bordé de orange avec trois motifs tracés en trait orange : un cercle, un triangle et un rectangle."
	src="ressources/map_default.png"
	width="640"
	height="480"
	usemap="#map" />

• 'id' : permet d'identifier de façon unique la balise dans le document html, sert pour le Javascript ;
• 'alt' : texte qui sera affiché si l'image ne peut l'être (mauvaise url, bitmap déplacé ou supprimé, navigateur n'affichant pas les images) ;
• 'src' : ulr du bitmap affiché. dans ce cas un 'png' nommé 'map_default.png' dans le dossier 'ressources' ;
• 'width et 'height' : dimensions de la balise, doivent être égales aux dimensions du bitmap ;
• 'usemap' : identifiant ('id') de la carte ('<map>') à utiliser.

<map name="map" id="map">
  <area 
	shape="circle"
	coords="500,360,100"
	alt="Cercle orange sur fond jaune"
	href="img_map_circle.html" 
	onmouseover="changeImage(1); return false;"
	onmouseout="changeImage(0); return false;" />
[&hellip;]
</map>

la zone réactive à été codée avec Amaya (beaucoup plus rapide, qu'à la main).
j'ai ajouté le comportement au survol du curseur. pour cela j'associe une fonction Javascript aux évènements html 'onmouseover' (quand le curseur survole la zone) et 'onmouseout' (quand le curseur quitte la zone).
les autres attributs :
• 'shape' : la forme de la zone ;
• 'coords' : les coordonnées de la zone ;
• 'alt' : idem que pour <img> ;
• 'href' : la cible affichée au clic.

le Javascript, d'abord je définis un tableau contenant les url des fichiers bitmap, ensuite je précharge les images pour éviter une latence au premier survol due au temps de téléchargement du fichier. en fait, on met toutes les images dans le 'cache' du navigateur.

if (document.images)
{
	preload = false;

	url = new Array();
	url[0] = "ressources/map_default.png";
	url[1] = "ressources/map_circle.png";
	url[2] = "ressources/map_poly.png";
	url[3] = "ressources/map_rect.png";

	var i = 0;
	for(i=0; i<4; i++)
	{
		tmp = new Image(640, 480)
		tmp.src = url[i];
	}
	preload = true;
}
}

enfin la fonction qui va changer la valeur de l'attribut 'src' de notre balise <img>. le changement se fait instantanément.

function changeImage(img_index) {
	if (document.images && (preload == true)) {
		document.plan.src = url[img_index];
	}
}

dans chaque '<area>' j'exécute à l'entrée du curseur le changement vers le bitmap survolé, à la sorti j'exécute le changement vers l'image par défaut.

pour les images, il y a l'image par défaut et une image (identique hormis une mise en valeur avec de la couleur) pour chaque forme.

les cibles des liens sont des fichiers html bateaux où j'ai mis un bitmap représentant chaque forme pour que l'on puisse les différencier mais cela pourrait être n'importe quoi d'autre.

donc Amaya m'a servi pour définir les coordonnées des <area>. le reste est fait avec un éditeur de texte.

voili, voila ! tu n'as plus qu'à…
-;o)

bon courage !

Réponse 14 / 65

caro777 Messages postés 147 Statut Membre 19

aie!!!! c bien compliqué tt ca....mais bon j'ai mis le code sur ma page avec la carte du monde et effectivement lorsque je survol la zone définie mon curseur change...c donc ma zone active jusqu'ici tt va bien....

par contre le code "if..." tu le mets dans des balises <script></script> n'est ce pas??? je ne connais pas le javascript...et tu mets le code ou tu veux dans ta page??

ensuite lorsque je clique sur ma zone je ne me rends pas à la page souhaitée mais j'ai :

Fatal error:call to undefined function:
traduction() in c:\program files\easyphp1-7
\www\www\pages\pro.bur.center.php on line 9

en effet a cette page j'ai une fonction traduction pr le titre car c un site multilingue mais qu'est ce que ca vient faire la dedans???

merci en tt cas pr tte ces explications...ca m'aide bcp et ca simplifie nettement la chose!!!

a bientôt

Réponse 15 / 65

caro777 Messages postés 147 Statut Membre 19

mais comment tu défini ces zones réactives...
il faut pouvoir selectionner le pays (roll over ou quelque chose du genre pr que l'utilisateur sache bien sur quel pays il va cliquer) et donc il s'agit d'image independantes et en html je ne vois pas comment on fait ca...

merci :-)

Réponse 16 / 65

caro777 Messages postés 147 Statut Membre 19

j'ai été regarder le système mais il ne peut s'agir que de rectangle,cercle, poly..... comment fait on pour cliquer sur l'ensemble de la zone....est il possible de le faire sous html ou alors sous flash mais ou met on le code??

tte réponse est la bienvenue

Réponse 17 / 65

Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention 923

re,

désolé je cherchais depuis plus d'une demie heure une discussion à laquelle j'ai participé et où l'on a parlé de roll over sur une image mappée.

regarde cet exemple et dis nous si tu veux quelque chose comme çà.

caro777 Messages postés 147 Statut Membre 19

yes, c'est tt a fait ca!!!! et tu fais ca avec des images map???

j'ai été voir la discussion....bon il faut que je t'avoue....je suis encore novice en prog alors j'ai pas tt suivi mais faut-il utiliser imageReady? jamais utilisé....mais bon quelque soit la solution je suis preneuse ;-)

merci

Réponse 18 / 65

Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention 923

en fait, il y une carte nue qui est mappée.
chacune des <area> qu'elle contient réagit au survol de la souris par un JavaScript qui affiche la même carte mais avec le canton mis en évidence plus le texte d'affiché.

donc une carte de fond + une carte par zone active, du JavaScript pour précharger toutes ces images et les afficher/masquer au survol.

pour faire les <area> si il y a beaucoup de zones ou si les zones ont des contours compliqués mieux vaut utiliser un logiciel, sinon tu vas galérer.

Réponse 19 / 65

caro777 Messages postés 147 Statut Membre 19

ok je vois le pricipe mais concrêtement.......heu......pas du tt!!!
mais j'ai des tonnes de questions à te poser....
voila il me faut ma carte de base mais ensuite comment fais-tu pr mapper la carte?? ce que je ne comprend pas c'est que ce systeme de map ne peut fonctionner qu'avec des formes geometriques??
comment faire pr le roll over car il s'agit bien d'une zone défini ....manuellement??? enfin je veux que c'est moi qui vais récupérer cette zone (photoshop?)???

c'est peut être pas trés clair car j'ai du mal à voir comment réaliser ce systéme de map....

peux tu m'expliquer quelles st les étapes à suivre, les programmes à utiliser (simple et detaillé ;-))....que je sache par ou commencer

merci bcp.... :-)

Réponse 20 / 65

Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention 923

tu récupères ta carte, ensuite tu utilises un logiciel qui te permets de dessiner les <area> à la main.

essaies Amaya, crée un document, insère une image puis XHTML/Plan/Ellipse.
tu vois comment ça tourne et on en reparle ?

Discussions similaires

Retrouver liens copiés sur le téléphone

je cherche l'indicatif du numéro 00393

Numéro à 14 chiffres commençant par 0035...

SMS qui commence par 447

Quel pays indicatif +14 ?

Discussions similaires

Newsletters