Créer une carte cliquable

Résolu

Mickael86480 Messages postés 698 Statut Membre -
Mickael86480 Messages postés 698 Statut Membre - 30 oct. 2012 à 11:45

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.

Afficher la suite

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
1. Mickael86480 Messages postés 698 Statut Membre 41
  
  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
2. 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 41
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
1. Atropa Messages postés 2051 Statut Membre 274
  
  ne prend pas les images du bon coin sans leur autorisation....
  
  0
2. Atropa Messages postés 2051 Statut Membre 274
  
  sans les fonctions ça risque d'etre difficile de t'aider
  
  0
3. Mickael86480 Messages postés 698 Statut Membre 41
  
  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
4. Atropa Messages postés 2051 Statut Membre 274
  
  non c'est a toi de les faire....
  
  0
5. Mickael86480 Messages postés 698 Statut Membre 41
  
  D'accord, ceci explique donc le problème. Comment dois-je m'y prendre stp?
  
  0

Mickael86480 Messages postés 698 Statut Membre 41

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?

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 41

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>

Mickael86480 Messages postés 698 Statut Membre 41

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 41

Problème inattendu, le code que tu m'as fournit fonctionne en local mais pas en ligne, merci de ton aide.
0
1. Mickael86480 Messages postés 698 Statut Membre 41
  
  Autant pour moi, le problème est bien résolu.
  
  0

Créer une carte cliquable

4 réponses

Discussions similaires

Newsletters