Créer une carte cliquable

Résolu
Mickael86480 Messages postés 698 Statut Membre -  
Mickael86480 Messages postés 698 Statut Membre -
Bonjour, je fais appel à vous car je souhaiterai créer une carte cliquable dans ce style suivant pour mon site.

http://www.leboncoin.fr/

Je ne vois pas comment faire donc je m'en remets à vous. Merci de bien vouloir m'aider.

A voir également:

4 réponses

Réponse 1 / 4
Atropa Messages postés 2051 Statut Membre 274
 
bonjour,

regarde le code source de la page, ce n'est pas très compliqué

une image de carte de france mappé et ca change les images au passage de la souri. mais ca doit être très long a mapper toutes les régions
0
Mickael86480 Messages postés 698 Statut Membre 35
 
Tout d'abord merci pour ta réponse. Ensuite j'ai besoin d'un peu d'aide pour ma compréhension. 

<area shape="poly" title="Guyane" coords="227,431,234,436,252,442,259,452,252,461,250,471,243,480,239,478,237,477,228,480,220,477,222,472,223,465,228,463,220,454,221,448,219,445,218,442,223,437,227,432" href="http://www.leboncoin.fr/annonces/offres/guyane/" onmouseover="change_image('http://static.leboncoin.fr', 25)" onmouseout="hide_image('http://static.leboncoin.fr', 25)" alt="Guyane">


Ceci correspond bien à la définition de la zone cliquable? Pour le onmouseover, sa c'est bon, mais pour le 
change_image('http://static.leboncoin.fr', 25)
 je n'est pas très bien saisie à quoi cela sert?

Enfin je ne comprends pas non plus ceci : 

preload_image('http://static.leboncoin.fr/img/map_1.png');
0
Atropa Messages postés 2051 Statut Membre 274
 
change image ca change certainement l'image de la carte pour que la region soit en orange

et preload_image c'est pour pré charger toutes les images des différentes région pour que le changement d'image soit instantané
0
Réponse 2 / 4
Mickael86480 Messages postés 698 Statut Membre 35
 
Voici ce que j'ai réalisé : 

<!DOCTYPE html> 
<html lang="fr"> 
    <head> 
        <meta charset="iso-8859-15" /> 
<link TYPE="text/css" REL="stylesheet" HREF="plan.css"> 
<link TYPE="text/css" REL="stylesheet" HREF="style.css"> 
</head> 
<body id="all"> 
<script type="text/javascript"> 
    preload_image('img/carte/eu.png'); 
</script> 
<map name="imagemap" id="Map">
  <area shape="poly" title="Etats-Unis" coords="10,170,100,170,100,220,10,220" href="drapeau.php" onmouseover="change_image('img/carte/eu.png', 1)" onmouseout="hide_image('img/carte/carte-monde-vierge.png', 1)" alt="USA"> 
</map> 
<script type="text/javascript"> 
    preload_image('img/carte/eu.png'); 
</script> 
<img src="img/carte-monde-vierge.png" usemap="#imagemap">  
</body> 
</html>


Le problème est que "la seconde image" ne se charge pas lorsque l'on survole la zone cliquable. Merci de bien vouloir m'aider.
0
Atropa Messages postés 2051 Statut Membre 274
 
ne prend pas les images du bon coin sans leur autorisation....
0
Atropa Messages postés 2051 Statut Membre 274
 
sans les fonctions ça risque d'etre difficile de t'aider
0
Mickael86480 Messages postés 698 Statut Membre 35
 
J'ai enlevé les coms pour que se soit plus de clair. Ensuite de quelles fonctions parles-tu? preload_image(), change_image(), ... n'existe pas déjà?

Désolé je suis un peu perdu
0
Atropa Messages postés 2051 Statut Membre 274
 
non c'est a toi de les faire....
0
Mickael86480 Messages postés 698 Statut Membre 35
 
D'accord, ceci explique donc le problème. Comment dois-je m'y prendre stp?
0
Réponse 3 / 4
Mickael86480 Messages postés 698 Statut Membre 35
 
Donc j'ai recherché sur internet et voici ce que j'ai fais : 

<HTML>
 <HEAD>
       <script language="JavaScript">
<!-- Begin
bouton = new Image();
bouton.src = "eu_on.png";
end -->
</script>
  </HEAD>
  <BODY>
   <a href="#" onmouseover="bouton.src = 'eu.png';" onmouseout="bouton.src = 'carte-monde-vierge.png';">
   <img src="carte-monde-vierge.png" border=0 name=bouton> </a>
  </BODY>
</HTML>


Cela fonctionne, sauf que l'image s'affiche lors du survole de toute la carte or j'aimerai faire cela lorsque l'on survole une partie de la carte, je pensais donc rajouter 
<area shape="poly" coords="10,40,100,40,100,140,10,140" title="Amérique" href="amerique.php" />
mais est-ce possible? Si oui où dois-je ajouter ceci?
0
Atropa Messages postés 2051 Statut Membre 274
 
il faut faire des fonctions je vais essayer de te donner un exemple
0
Mickael86480 Messages postés 698 Statut Membre 35
 
merci
0
Atropa Messages postés 2051 Statut Membre 274
 
voilà un exemple copie ca dans un fichier html vierge et regarde essais de comprendre le fonctionnement 

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test Image</title>
	<script>
	function changeImg(e,id,newImg) {
	
		var img = document.getElementById(id);
		var realSrc = img.src;
		e.target.addEventListener('mouseout',function() {img.src = realSrc;},false);
		img.src = newImg;
	}
	
	</script>
	<style type="text/css">

	</style>
</head>
<body>

<img id="imagemap" src="test.jpg" width="200" height="200" usemap="#map" />

<map name="map">
	<area shape="poly" coords="10,10,50,70,10,50" href="" onmouseover="changeImg(arguments[0],'imagemap','gggg.png');" />
</map>
</body>
</html>
0
Mickael86480 Messages postés 698 Statut Membre 35
 
Ok donc cela fonctionne merci, pour ce qui est de la compréhension, la partie html c'est ok, mais pour le JS c'est plus compliqué.
0
Réponse 4 / 4
Mickael86480 Messages postés 698 Statut Membre 35
 
Problème inattendu, le code que tu m'as fournit fonctionne en local mais pas en ligne, merci de ton aide.
0
Mickael86480 Messages postés 698 Statut Membre 35
 
Autant pour moi, le problème est bien résolu.
0

Discussions similaires

Supprimer conversation messenger pour tout le monde
mercidemaider -
sd -

7 réponses