carte cliquable - Forum Discussions générales

La Communauté Webmaster

  Forum-webmaster
  Général
  Discussions générales (Modérateurs: Jey, Dark.Ginger, Lilian, lauryv, ToToMaStEr, Wolf18)
  carte cliquable

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: carte cliquable (Lu 2438 fois)

carte cliquable
« sur: le 13-08-2010 a 18:06:16 »

lulu44
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 84

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...) 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

Rapporter au modérateur

www.bandmusique.fr

Re:carte cliquable
« Répondre #1 sur: le 13-08-2010 a 19:57:23 »

tony35520
Membre récent

Hors-Ligne

Messages: 18

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.

Rapporter au modérateur

Re:carte cliquable
« Répondre #2 sur: le 13-08-2010 a 20:14:09 »

Pad
Modérateur Global

Hors-Ligne

Sexe: Male

Messages: 1391

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)"

Rapporter au modérateur

Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028

Re:carte cliquable
« Répondre #3 sur: le 14-08-2010 a 01:07:05 »

lulu44
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 84

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

Rapporter au modérateur

www.bandmusique.fr

Re:carte cliquable
« Répondre #4 sur: 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

lulu44
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 84

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>

Rapporter au modérateur

www.bandmusique.fr

Re:carte cliquable
« Répondre #5 sur: le 14-08-2010 a 13:30:50 »

Pad
Modérateur Global

Hors-Ligne

Sexe: Male

Messages: 1391

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>

« Dernière Édition: le 14-08-2010 a 13:31:25 par Pad »

Rapporter au modérateur

Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028

Re:carte cliquable
« Répondre #6 sur: le 15-08-2010 a 20:18:44 »

lulu44
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 84

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 ?!
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