Soucis Map interactive
Fermé
Pachmina
-
7 août 2014 à 14:14
Bonjour,
J'essaye de créer une map interactive des arrondissements de paris pour mon site, la map et créée les coordonnées des zones le hover fonctionne parfaitement.
J'aimerai à côté de cette map qu'on retrouve sous forme de liste les arrondissements qu'on ai le choix entre utiliser la map ou sélectionner directement le numéro mais j'aimerai que lorsque on survol la map l'élément de la liste soit aussi en mode hover (en gros même fonctionnement que leboncoin.)
Si vous pouviez m'aider à résoudre ce problème merci d'avance.
Mon code :
J'essaye de créer une map interactive des arrondissements de paris pour mon site, la map et créée les coordonnées des zones le hover fonctionne parfaitement.
J'aimerai à côté de cette map qu'on retrouve sous forme de liste les arrondissements qu'on ai le choix entre utiliser la map ou sélectionner directement le numéro mais j'aimerai que lorsque on survol la map l'élément de la liste soit aussi en mode hover (en gros même fonctionnement que leboncoin.)
Si vous pouviez m'aider à résoudre ce problème merci d'avance.
Mon code :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.map').append('<div class="overlay">').append('<div class="tooltip">Salut les gens</div>')
$('.map .tooltip').hide();
var N=new Array();for(var i=0;i<20;i++){N[i]=i+1;}
var regions = [
{name : '16éme Arrondissements', slug: '16'},
{name : '17éme Arrondissements', slug: '17'},
{name : '18éme Arrondissements', slug:'18'},
{name : '19éme Arrondissements', slug : '19'},
{name : '20éme Arrondissements', slug : '20'},
{name : '12éme Arrondissements', slug : '12'},
{name : '13éme Arrondissements', slug: '13'},
{name : '14éme Arrondissements', slug:'14'},
{name : '15éme Arrondissements', slug:'15'},
{name : '7éme Arrondissements', slug:'7'},
{name : '6éme Arrondissements', slug:'6'},
{name : '5éme Arrondissements', slug:'5'},
{name : '8éme Arrondissements', slug: '8'},
{name : '9éme Arrondissements', slug : '9'},
{name : '10éme Arrondissements', slug : '10'},
{name : '11éme Arrondissements', slug : '11'},
{name : '2éme Arrondissements', slug : '2'},
{name : '3éme Arrondissements', slug : '3'},
{name : '1er Arrondissement', slug: '1'},
{name : '4éme Arrondissements', slug: '4'},
];
// Tooltip qui suit la souris
$(document).mousemove(function(e){
$('.map .tooltip').css({
top:e.pageY-$('.map .tooltip').height()-20,
left:e.pageX-$('.map .tooltip').width()/2-10
});
});
// On met les liens sur les aréa
$('.map area').each(function(){
var index = $(this).index();
$(this).attr('href','pages-arr.php?arr='+regions[index].slug);
});
// On passe sur une région
$('.map area').mouseover(function(){
var index = $(this).index();
var left = -index * 558 - 558;
$('.map .tooltip').html(regions[index].name).stop().fadeTo(500,0);
$('.map .overlay').css({
backgroundPosition : left+"px 0px",
});
$('.my_map_'+N[4]).css({
backgroundColor : "#E74C3C"
});
});
// On sort de la map
$('.map').mouseout(function(){
$('.map .overlay').css({
backgroundPosition : "558px 0px"
});
$('.map .tooltip').stop().fadeTo(500,0);
$('.my_map_'+N[4]).css({
backgroundColor : "grey"
});
});
});
</script>
<div class="slide" id="slide1">
<div id="content" class="grid_5">
<h3>Par arrondissements :</h3>
<ul><?php
for($i=1;$i<=20;$i++) echo '<li class="my_map_'.$i.'"><a href="pages-arr.php?arr='.$i.'">'.$i.'</a></li>';
?></ul>
</div>
<div id="decorative" class="grid_7 omega">
<div class="map" style="float:right;">
<img src="../images/map/void.png" alt="map" border="0" usemap="#Map" />
<map name="Map">
<area shape="poly" coords="79,120,105,127,131,143,141,185,116,192,104,200,93,208,85,218,75,232,66,245,54,262,45,282,38,293,27,308,24,314,15,314,9,311,4,301,1,295,1,286,1,271,16,247,27,228,38,197,47,173,63,142" href="#" class="green">
<area shape="poly" coords="264,13,252,46,245,66,244,83,231,88,207,93,186,99,165,103,151,108,141,111,135,119,131,130,125,137,113,130,102,124,89,120,79,119,80,109,81,95,85,91,101,80,125,67,153,50,182,33,198,24,214,18" href="#">
<area shape="poly" coords="419,10,418,28,421,35,417,41,409,48,404,57,399,76,398,80,382,81,365,82,348,82,337,84,322,85,308,85,295,84,281,80,268,77,261,75,254,79,247,84,246,78,246,70,248,61,253,49,256,39,259,30,263,21,265,15,265,12" href="#">
<area shape="poly" coords="420,10,435,11,447,13,463,15,475,17,481,17,488,18,492,22,494,31,494,45,495,60,496,72,504,86,514,99,522,110,530,122,525,123,516,124,507,126,497,127,484,128,475,131,465,134,453,137,442,140,434,128,428,115,424,103,417,92,409,83,405,79,399,79,404,61,411,50,417,43,422,38,420,23" href="#">
<area shape="poly" coords="531,123,539,141,544,156,548,173,548,192,546,201,547,216,551,229,553,241,554,253,554,264,543,265,533,264,523,263,508,257,506,243,500,229,487,208,470,176,453,151,445,141,463,136,482,130,504,127" href="#">
<area shape="poly" coords="554,278,548,296,536,319,526,335,518,344,505,357,491,361,466,366,453,353,443,339,432,323,423,313,412,301,402,288,407,274,411,264,413,255,415,245,417,241,436,249,456,251,479,253,498,256,514,261,532,266,546,266,552,266" href="#">
<area shape="poly" coords="395,297,455,368,410,391,378,404,353,405,329,399,302,404,298,387,293,368,293,346,297,330,300,322,310,326,326,328,352,328,370,321,385,310" href="#">
<area shape="poly" coords="224,294,235,301,246,304,261,311,274,316,298,323,292,339,289,352,290,363,294,379,301,405,287,406,264,404,241,400,227,397,209,390,189,378,167,367,158,363,178,343,188,328,203,312,208,303,218,303" href="#">
<area shape="poly" coords="34,315,46,300,55,284,63,270,71,253,84,236,95,219,106,210,113,218,118,226,125,234,133,241,142,249,148,259,157,266,163,269,176,267,181,272,184,278,189,278,195,274,199,277,205,284,214,289,222,293,217,301,210,301,205,306,195,317,190,324,182,334,174,343,166,352,161,357,157,363,133,352,113,341,92,329,74,319,55,313" href="#">
<area shape="poly" coords="107,209,124,200,148,194,172,192,198,193,213,197,226,200,242,205,256,209,261,211,254,219,247,225,244,233,241,241,237,249,230,253,219,258,206,264,197,271,188,275,183,274,178,265,167,266,161,266,154,259,143,246,129,233,119,222" href="#">
<area shape="poly" coords="262,210,276,214,289,220,298,226,306,233,318,241,313,250,307,258,301,269,293,276,288,288,283,296,277,307,275,313,259,308,247,302,236,298,225,293,214,286,206,279,198,273,206,267,216,263,230,258,238,251,246,232,253,223" href="#">
<area shape="poly" coords="318,241,335,252,352,258,364,265,377,273,389,286,394,295,388,302,379,312,364,320,348,326,333,325,315,323,297,319,275,313,284,299,292,282,301,272,310,260" href="#">
<area shape="poly" coords="246,84,245,97,242,109,240,124,239,135,241,146,232,150,227,161,224,175,220,189,205,184,187,183,173,184,156,184,144,185,141,185,137,165,133,151,132,143,125,138,130,133,137,120,147,110,168,104,200,96,226,90" href="#">
<area shape="poly" coords="331,147,303,144,288,141,269,145,258,148,242,147,241,133,241,121,244,109,247,98,247,85,256,81,261,77,274,81,291,85,310,88,325,86,336,86,337,101,332,113,331,131" href="#">
<area shape="poly" coords="338,85,359,84,379,83,394,82,406,83,415,93,421,102,425,111,427,124,435,133,442,141,431,148,419,153,402,164,386,161,372,159,356,155,343,150,332,146,332,129,333,114,338,97" href="#">
<area shape="poly" coords="402,164,406,177,411,191,411,207,412,227,412,237,421,242,432,245,442,248,455,249,466,248,475,251,488,252,498,254,506,257,506,250,502,240,498,228,491,215,482,200,473,185,463,169,454,155,444,142,431,150,416,157" href="#">
<area shape="poly" coords="249,148,255,157,267,163,282,166,295,170,319,175,348,180,354,169,357,156,341,151,329,150,319,147,304,146,295,144,284,143,267,147" href="#">
<area shape="poly" coords="345,189,359,193,371,198,379,207,387,213,398,218,412,221,410,211,409,199,409,191,404,177,401,167,389,163,377,161,369,159,359,156,354,168,350,181" href="#">
<area shape="poly" coords="221,188,235,193,252,198,271,203,287,207,306,213,321,216,329,218,335,207,341,193,345,183,329,179,314,177,296,172,277,168,266,165,255,161,249,152,241,148,233,153,229,166" href="#">
<area shape="poly" coords="344,190,356,194,367,197,375,204,383,213,392,218,402,221,411,222,411,231,410,236,412,240,415,241,414,247,411,259,407,268,402,286,392,273,376,264,368,260,360,253,341,245,324,236,313,228,300,219,312,219,321,222,328,225,338,206" href="#">
</map>
</div>
</div>
</div>
.map{
width:558px;
height:410px;
background:url(images/map/map.png) left top no-repeat;
position:relative;
float:right;
}
.map .overlay{
width:558px;
height:410px;
background:url(images/map/map.png) 558px top no-repeat;
position:absolute;
top:0;
left:0;
z-index:1;
}
.map img{
position:absolute;
top:0;
left:0;
z-index:2;
}
.map .tooltip{
position:fixed;
border-radius:5px;
color:#FFF;
background:#000;
padding:0 10px;
display:inline-block;
top:0;
left:0;
z-index:3;
text-align:center;
}