Imprimer la Page

Forum-webmaster

Général => Discussions générales => Message commencé par: lulu44 le le 13-08-2010 a 18:06:16

Titre: carte cliquable
Posté par: lulu44 le le 13-08-2010 a 18:06:16

bonjour a tous :)

il y a un mois j'ai commencer mon premier vrai grand site et je me suis heurter a un problème que je n'arrive vraiment pas a résoudre ??? :-\

je souhaite réaliser une carte cliquable des régions française (comme celle du bon coin) je me suis donc rendu sur un site ou j'en ai pus trouver une gratuite (une image avec area,poly...) :P mais voila je voudrait que quand l'on passe la souris dessus les régions change de couleur
j'ai essayer beaucoup de chose visiter des *centaines* de forum sans succès
a chaque fois il me propose juste un site ou je dois me débrouiller pour regarder le code source
j'ai bien compris qu'il faut utiliser du java-script mais je ne connais pas trop ce langage juste xhtml et css
es que quelqun sait comment faire
ps:désolé pour la longueur de ce message mais je veu être précis :)
merci d'avance :)

Titre: Re:carte cliquable
Posté par: tony35520 le le 13-08-2010 a 19:57:23

J'ai vu un site avec une carte pas mal qui correspond à ce que tu cherche : www.trouverunpro.fr
Demande leur comment ils ont eu leur carte mais je crois que c'est du flash, avec les liens codés en AS.

Titre: Re:carte cliquable
Posté par: Pad le le 13-08-2010 a 20:14:09

Tout est dans le fichier javascript du site leboncoin :

Code:

/*
* Preload onmouseover images
*/
function preload_image(_image) {
   var image = new Image;
   image.src = _image;
}

/*
* Change county image onmouseover on index page
* Change l'image au survol de la souris : on récupère le numéro de l'item et on lui dit de chercher l'image dans /img/ et qui s'appelle map_numérorégion.gif (/img/map_18.gif)
*/
function change_image(region) {
   var ShowItem = document.getElementById("area_image");
   var LinkItem = document.getElementById("county_" + region);
   ShowItem.style.backgroundImage = 'url(/img/map_' + region + '.gif)';
   LinkItem.style.textDecoration = "underline";
   return true;
}

/*
* Change back county image onmouseout on index page
* On remet une image transparente pour virer le rollover de la région et revenir à l'état normal
*/
function hide_image(region) {
   var ShowItem = document.getElementById("area_image");
   var LinkItem = document.getElementById("county_" + region);
   ShowItem.style.backgroundImage = 'url(/img/none.gif)';
   LinkItem.style.textDecoration = "none";
   return true;
}

Et les images sont à récupérer en tappant les différents liens :
http://www.leboncoin.fr/img/map_17.gif (attention ces images sont la propriété du site)
http://www.leboncoin.fr/img/map_18.gif

Et dans chaque area de la map : onmouseover="change_image(17)" nmouseout="hide_image(17)"

Titre: Re:carte cliquable
Posté par: lulu44 le le 14-08-2010 a 01:07:05

;D ;D ;D
Alors la merci beaucoup c'est la réponse la plus rapide que j'ai jamais eu
je vais tout de suite essayer mais par contre es possible qu'au lieu d'utiliser les image de le bon coin je puisse utiliser des image que j'ai crée en png ce sont toutes les régions que j'ai découper sur photoshop et colorer je les ais appelées bretagne.png ect... ou dois-placer les noms ???
merci encors :)

Titre: Re:carte cliquable
Posté par: lulu44 le le 14-08-2010 a 01:57:52

je ne sais absolument pas ou et comment inserer le code javascript et ou mettre le nom de mes photos.png jai beau regarder encor et encor le code je ne trouve pas il n'y aurai pas quelqun qui conaiterai un tutoriel ou quelque chose comme ca
merci d'avance

Je suis vraiment désoler mais je n'y arrive vraiment pas
j'ai fait 2 pages une html et une css sur la html j'ai mis ceci

<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="500"><img src="France.png" width="650" height="650" border="0"usemap="#Map">
<map name="Map">
<area shape="poly" coords="..." href="bretagne recherche.html" target="_self" title="Bretagne">
<area shape="poly" coords="..."pays-de-la-loire recherche.html" target="_self" title="Pays de la Loire">
<area shape="poly" coords="..." href="basse-normandie recherche.html" target="_self" title="Basse Normandie">
<area shape="poly" coords="..." href="poitou-charentes recherche.html" target="_self" title="Poitou Charentes">
<area shape="poly" coords="..." href="aquitaine recherche.html" target="_self" title="Aquitaine">
<area shape="poly" coords="..." href="#">
<area shape="poly" coords="..."midi-pyrenées recherche.html" target="_self" title="Midi Pyrénées">
<area shape="poly" coords="..." href="corse recherche.html" target="_self" title="Corse">
<area shape="poly" coords="..." href="languedoc-roussillon recherche.html" target="_self" title="Languedoc Roussillon">
<area shape="poly" coords="..." href="provence-alpes-cote-d'azur recherche.html" target="_self" title="Provence Alpes Côte d'Azur">
<area shape="poly" coords="..." href="rhones-alpes recherche.html" target="_self" title="Rhône Alpes">
<area shape="poly" coords="..."href="auvergne recherche.html" target="_self" title="Auvergne">
<area shape="poly" coords="..." href="limousin recherche.html" target="_self" title="Limousin">
<area shape="poly" coords="..." href="franche-comte recherche.html" target="_self" title="Franche Comté">
<area shape="poly" coords="..." href="centre recherche.html" target="_self" title="Centre">
<area shape="poly" coords="..." href="bourgogne recherche.html" target="_self" title="Bourgogne">
<area shape="poly" coords="..."alsace recherche.html" target="_self" title="Alsace">
<area shape="poly" coords="..." href="lorraine recherche.html" target="_self" title="Lorraine">
<area shape="poly" coords="..." href="champagne-ardenne recherche.html" target="_self" title="Champagne Ardenne">
<area shape="poly" coords="..." href="nord-pas-de-calais recherche.html" target="_self" title="Nord Pas-de-Calais">
<area shape="poly" coords="..."href="ile-de-france recherche.html" target="_self" title="Ile de France">
<area shape="poly" coords="..." href="haute-normandie recherche.html" target="_self" title="Haute Normandie">
<area shape="poly" coords="..." href="picardie recherche.html" target="_self" title="Picardie">
</map>
</td>
</tr>

Titre: Re:carte cliquable
Posté par: Pad le le 14-08-2010 a 13:30:50

Voilà pour toi, y'a le fonctionnement tu n'a plus qu'a le comprendre pr rajouter les autres régions. Je ne l'ai fait que pour l'alsace ;)

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.Map {
   background:url(http://193.164.196.50/img/map.gif) no-repeat;
   width:410px;
   height:480px;
}
</style>
<script type="text/javascript">
/*
* Preload onmouseover images
*/
function preload_image(_image) {
var image = new Image;
image.src = _image;
}
/*
* Change l'image au survol de la souris : on récupère le numéro de l'item
* et on lui dit de chercher l'image dans /img/ et qui s'appelle map_numérorégion.gif (/img/map_18.gif)
*/
function change_image(region) {
var ShowItem = document.getElementById("area_image");
ShowItem.style.backgroundImage = 'url(http://193.164.196.50/img/map_'+region+'.gif)';
return true;
}
/*
* On remet une image transparente pour virer le rollover de la région et revenir à l'état normal
*/
function hide_image(region) {
var ShowItem = document.getElementById("area_image");
ShowItem.style.backgroundImage = 'url(http://193.164.196.50/img/none.gif)';
return true;
}
</script>
</head>
<body>
<table id="TableContentBottom" cellspacing="0" cellpadding="0">
<tr>
   <td align="right">
      <div class="Map MapContainer">
         <div style="background-image:url(http://193.164.196.50/img/transparent.gif);" class="Map" id="area_image">
            <img src="http://193.164.196.50/img/transparent.gif" alt="" usemap="#france_map">
         </div>
      </div>
   </td>
</tr>
</table>
<map name="france_map">
   <area shape="poly" title="Alsace" coords="383,88,381,92,372,93,367,89,361,92,364,98,369,99,371,
108,365,114,370,124,362,146,370,149,366,154,369,161,378,162,
385,157,381,151,385,122,397,96,397,89,385,87" href="http://www.leboncoin.fr/annonces/offres/alsace/" onmouseover="change_image(1)" onmouseout="hide_image(1)">
</map>
<script type="text/javascript" language="JavaScript">

</script>
</body>
</html>

Titre: Re:carte cliquable
Posté par: lulu44 le le 15-08-2010 a 20:18:44

merci beaucoup pour cette réponse je comprend un ptit peu mieu mais en essayant rien ne se passe :-\
si je comprend bien je dois remplacer les nom présent par les mien ?! :P
je résume:
j'ai crée 22 fichier png qui n'ont chacun pas la même taille, par exemple pour la bretagne c'est juste la silhouette orange de taille 152 sur 88 pixel qui s'appelle exactement bretagne.png
et qui est placer dans le même dossier que la page html qui contient la carte cliquable
j'ai essayer au endroit de remplacer les nom par bretagne.png mais rien :'(
merci de ta patiente je sais je suis nul sa doit te paraitre evident mais je commence les site depuis a peine un an et le java-script pour moi c inconnu :) :P