18073 sujets

Questions générales et questions de débutants

[Résolu]Carte d'europe avec liens sur chaque ville sans flash

Bonjour à tous,

Je ne sais pas si c'est possible à l'aide du css, mais je tente quand meme ma question parce que j'aimerais bien Smiley bawling :

j'ai cette carte là sur une page, chaque clic sur une ville ouvre une page définie.

http://n.domaindlx.com/karine/carte_europe.jpg

là l'image a été rétrécie evidemment elle est 2 fois plus grosse en temp normal, pour creer cette image, je l'ai découpée en morceau et inséré les liens (avec image ready methode slice). Mais voilà ; c'est beaucoup trop lourd et certaine personnes ont du mal a charger/afficher correctement la page Smiley eek .

Je cherche donc une solution quitte à refaire une autre approche visuelle de la carte Smiley sweatdrop :

j'ai pensée justement à une chose qui pourrait donner ceci Smiley langue :

http://n.domaindlx.com/karine/exemple.jpg
bon alors évidemment ce sera beaucoup plus jolie hein et en html ; c'est juste pour vous montrer le concept que je voudrais.

Le truc c'est quand on clique sur un des pays, cela doit faire apparaitre une image du pays concerné et avec les liens interne (je ne sais pas si je m'exprime bien là Smiley langue , en tout cas, j'espere que vous pourrez m'aiguiller sur la façon technique de procéder Smiley confused .

Merci de ce que vous pourrez faire pour moi.

PS : j'ai oublié de préciser que mon supérieur ne veux absolument pas entendre parler de la technologie Flash.
Modifié par karine (21 Sep 2005 - 15:06)
Merci mail1789,

c'est tres instructif ce site et la methode je m'en resservirais probabmelement plus tard pour mes menus c'est certain ;

cependant, ce n'est pas tout à fais ce que je voudrais, enfin je n'ai peut etre pas assez lu en profondeur le tuto, j'avoue que j'ai survoler pour le moment,

mais tous les exemples representent un lien et l'image au meme endroit finalement non ? or dans mon voeux à moi l'image doit être completement décalée par rapport au lien, enfin je vais continuer à lire le tuto voir...
Administrateur
Salut,

Je ne suis pas sûr d'avoir bien compris.
Ceci peut-il t'aider ?
Modifié par Raphael (19 Sep 2005 - 18:04)
Ouiiiii !! Smiley biggrin
C'est alternative me comvient mieux en effet (la 2eme variante avec le zoom)

C'est parfait tout ça, merci Raphael, je vais me débrouiller avec ce tuto
il faut juste que je trouve comment ils l'ont codé cette variante 2 Smiley cligne
Administrateur
karine a écrit :
il faut juste que je trouve comment ils l'ont codé cette variante 2 Smiley cligne

Ben euh il suffit de me demander par exemple, non ? Smiley cligne
Raphael a écrit :

Ben euh il suffit de me demander par exemple, non ? Smiley cligne


En fait je pensais qu'il y aurait le code de la variante 2 sur le forum "apres - vente" mais je n'ai pas trouvé (j'ai peut etre mal cherché aussi Smiley confused

Alors oui, je veux bien de ton aide Smiley smile
j'imagine que ce procédé est 10 fois moins lourd, et au niveau du code, je vois bien qu'il y a une sacré économie de ligne et un gros gain de clarté !!
Administrateur
karine a écrit :


En fait je pensais qu'il y aurait le code de la variante 2 sur le forum "apres - vente" mais je n'ai pas trouvé (j'ai peut etre mal cherché aussi

Il suffit de faire un clic droit pour afficher le code de l'exemple Smiley smile
Montre-nous comment tu avances (exemple en ligne) pour qu'on te dépanne.
Bon eh bien ce n'est pas si simple que ça en à l'air finalement Smiley eek

Voici l'url du test : image_map.html

Et voici mon code : 
<style type="text/css">

body {
	font: 12px Verdana; 
	color: #000000; 
	bgcolor: #EEEEEE;
}

#europe_map {
	width: 408px;
	height: 382px;
	background:url(europe_map.png) top left no-repeat;
}

#de_koblenz {
	float: left;
	width: 47px;
	height: 15px;
	left: 339px;
	top: 57px;
	border: 1px dotted red;
}
</style>
</head>
<body>

<!--Définition des liens + tooltips-->

<div id="europe_map">
	
	<a id="de_koblenz" href="#" title="Centre de Koblenz"></a>
	<a id="fr_arras" href="#" title="Centre d'Arras"></a>
	<a id="fr_rouen" href="#" title="Centre de Rouen - La Vatine"></a>
	<a id="fr_paris" href="#" title="Centre de Paris"></a>
	<a id="fr_saint-nazaire" href="#" title="Centre de Saint Nazaire"></a>
	<a id="fr_nancy" href="#" title="Centre de Nancy"></a>
	<a id="fr_angouleme" href="#" title="Centre d'Angoulême"></a>
	<a id="fr_bordeaux" href="#" title="Centre de Bordeaux"></a>
	<a id="fr_lyon" href="#" title="Centre de Lyon"></a>
	<a id="fr_toulouse" href="#" title="Centre de Toulouse"></a>
	<a id="fr_pau" href="#" title="Centre de Pau"></a>
	<a id="fr_montpellier" href="#" title="Centre de Montpellier"></a>
	<a id="fr_aix" href="#" title="Centre d'Aix"></a>
	<a id="es_elgoïbar" href="#" title="Centre d'Elgoïbar"></a>
	<a id="dz_alger" href="#" title="Centre d'Alger"></a>
	
</div>



le cadre ne correspond pas du tout à ce que je voulais, il devrait entourer "Koblenz"

Alors voici ce que j'ai fait :

j'ai fais le test sur la ville de Koblenz seulement sur la partie Allemagne de la carte.
Dans photoshop je me suis basée sur l'onglet "info" ; avec mon curseur, je me trouve bien à 339 pixels de la gauche de l'image et à 57 pixels du haut de l'image.
Bon alors manifestement mon calcul n'est pas bon du tout du tout Smiley confused
J'imagine que c'est un truc tout bête que j'ai homis de faire mais là je suis fatiguée, et j'avoue être un peu saoulée de chercher pour ce soir Smiley confus
Alors vi, je veux bien un ch'tit coup de pouce des spécialistes. Smiley ravi
Modifié par karine (21 Sep 2005 - 12:22)
Administrateur
Les propriétés top, right, bottom et left ne s'appliquent qu'aux éléments positionnés (absolu, fixe ou relatif)

Ici, ton élément <a> n'est pas positionné, donc ces propriétés sont sans effets.

Il faut soit utiliser les marges (margin-top et margin-left), soit positionner tes liens en absolu et non en flottant.
J'ai re-positionné mon lien en absolu, et tout de suite cela va beaucoup mieux !! Smiley confused

Merci Raphaël ! Smiley ravi

Mais à la relecture de ton tutoriel, finalement pour mon image il sera plus approprié d'utiliser les marges et la position float car il risque d'y avoir des "chevauchement" ; je pense notament aux villes Saint-Nazaire et Lyon qui sont côte-côte sur la carte. Merci pour tes conseils !!
Sujet clos
Aller à