Bonjour,

Voila je rencontre un petit problème avec mon code.

Code HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<title>La belgique et ses Forums</title>
<meta htpp-equiv="Content-Type"content="texte/html; charset=UFT-8">
<script type="texte/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="belgique.css" />
<script type="texte/javascript">
jQuery(function($){
$('.map').append('<div class="overlay">').append(div class="tooltip">La belgique et ses régions</div>')
$('.map.tooltip').hide();
var regions=[
{name: 'flandre occidentale',slug:'Flandre occidentale'},
{name: 'flandre orientale',slug:'Flandre orientale'},
{name: 'hainaut',slug:'Hainaut'},
{name: 'namur',slug:'Namur'},
{name: 'brabant wallon',slug:'Brabant wallon'},
{name: 'brabant flamant',slug:'Brabant flamand'},
{name: 'anvers',slug:'Anvers'},
{name: 'limbourg',slug:'Limbourg'},
{name: 'liege',slug:'Liege'},
{name: 'luxembourg',slug:'Luxembourg'},

];

// tooltip qui suis la souris

$(document).mousemove(function(e){

$('.map.tooltip').css({
top:e.page Y-$('.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','http://spacezen.be/?q='+regions[index].slug);
});

// on passe sur une région

$('.map area').mouseover(function(){
var index=$(this).index();
var left =-index*454-454;
$('.map.tooltip).html(region[index].name).stop().fadeTo(500,0.6)
$('map.overlay').css({
backgroundPosition:left+"px 0px"
});
});

// on sort de la map

$('.map').mouseout(function(){
$('map.overlay').css({
backgroundPosition:"454px 0px"
});
$('.map.tooltip).stop().fadeTo(500,0)
});

});
</script>

</head>

<body>
<div class="map">
<img src="belgique.png" alt="map" border="0" usemap="#Map" />

<map name="Map" id="Map">
<area shape="poly" coords="43,173,59,170,70,155,68,166,75,144,82,126,90,105,96,95,82,82,63,76,50,82,43,81,30,99,22,110,17,126,17,142,13,151,17,162,26,171" href="#" />
<area shape="poly" coords="135,197,134,168,142,145,156,111,160,89,160,64,139,76,118,87,105,95,95,98,86,121,80,136,73,155,67,168,91,178,118,191" href="#" />
<area shape="poly" coords="93,213,97,233,109,255,124,271,115,266,144,278,164,281,175,274,182,263,187,250,176,232,158,217,139,200,115,190,94,180,75,174,62,169,44,171,42,178,51,184,71,195,84,202" href="#" />
<area shape="poly" coords="178,277,195,280,208,274,221,268,229,264,229,276,237,293,243,303,255,310,271,317,284,310,290,297,293,271,292,244,283,227,271,217,257,207,239,203,217,204,196,206,181,211,164,216,183,237,187,255,179,268" href="#" />
<area shape="poly" coords="280,221,288,213,280,200,273,191,264,185,251,177,240,173,228,168,209,166,191,161,173,158,156,151,144,147,138,154,135,173,136,191,136,198,147,208,159,217,180,212,192,206,221,205,243,204,258,208" href="#" />
<area shape="poly" coords="274,192,259,179,233,170,209,165,180,158,161,153,144,148,150,129,159,110,162,86,162,66,184,59,197,65,213,70,229,70,244,77,261,87,281,101,294,114,297,130,294,142,289,155,285,170" href="#" />
<area shape="poly" coords="295,142,309,153,326,163,341,172,332,183,323,196,310,204,297,209,288,212,280,196,274,186,288,163" href="#" />
<area shape="poly" coords="365,284,349,272,331,262,321,265,305,255,294,242,285,230,282,222,293,214,310,207,327,192,341,175,352,177,366,189,382,204,399,217,402,226,393,240,379,252,371,268" href="#" />
<area shape="poly" coords="288,232,295,250,296,274,291,295,284,310,267,313,252,311,256,323,269,338,282,347,296,355,311,357,333,358,349,349,369,350,380,345,388,332,389,318,376,299,361,280,335,262,316,250" href="#" />
</map>

</div>
</body>

.map{
width:454px;
height:368px;
background:url(http://spacezen.be/belgique1.png)left top no-repeat;
position:relative;
}

.map.overlay{
width:454px;
height:368px;
background:url(http://spacezen.be/belgique1.png)left 454px 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;

}
{

Voila ce que ca dois donner https://www.grafikart.fr/demo/jQuery/maparea/ et voila se que sa donne file:///tmp/fz3temp-1/belgique.html

Que la carte sois déja en couleur c'est normal, mais rien se passe quand je passe avec mon curseur, normalent la région dois bouger et elle dois s'afficher dans la bulle comme dans l'exemple pour la france

Aucune réponse