Tuto Carte interactive jQuery
vlad
Bonjour,
Je vous écris suite à ma tentative de réaliser la carte interactive décrite dans ce tutoriel: http://www.grafikart.fr/tutoriels/jquery/carte-interactive-177
J'en suis à l'étape où les régions sont censés s'afficher lorsque la souris passe dessus.
Voici mon code html/javascript:
[code]<!DOCTYPE html>
<html lang="fr">
<head>
<title> Products</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="texte/javascript" src="jquery-1.8.3.min.js"></script>
<script type="texte/javascript">
jQuery(function($){
$('.map').append('<div class="#overlay">');
$('.map area').mouseover(function(){
var index = $(this).index();
var left = -index*650-650;
$('.map.overlay').css({
backgroundPosition: left+"px 0px"
})
});
});
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="map">
<img src="void.png" width="650" height="697" usemap="#Map"/>
<map name="Map">
<area shape="poly" coords="165,184,169,194,175,197,177,191,185,193,186,203,184,213,188,225,185,233,180,239,175,246,166,243,155,255,144,253,129,264,123,269,115,273,105,264,105,259,92,256,84,260,68,248,50,239,37,233,33,240,23,236,20,219,7,214,25,212,22,202,27,200,22,195,6,193,7,182,20,172,37,169,58,173,68,171,69,164,88,163,98,180,109,192,124,176,134,182,147,180,153,185,164,183" href="#">
<area shape="poly" coords="190,195,183,193,177,192,171,197,166,192,165,184,173,183,165,173,163,144,154,117,149,103,166,105,177,102,183,111,178,115,190,126,222,134,233,137,254,127,258,137,260,149,261,160,261,168,269,168,278,177,278,182,284,189,286,198,286,206,279,210,282,218,276,219,272,216,265,214,259,206,252,200,243,205,235,201,230,193,222,195,208,199,198,196" href="#">
<area shape="poly" coords="265,169,260,163,260,145,255,126,260,122,247,121,252,108,263,100,275,94,287,93,300,89,308,83,311,79,321,89,328,96,324,108,325,126,327,138,323,145,317,156,312,156,314,164,309,171,305,177,297,177,285,181,277,181,273,172" href="#">
<area shape="poly" coords="325,146,335,148,341,144,350,149,357,149,366,152,384,153,392,150,396,156,401,162,408,169,414,164,419,154,419,149,421,142,419,133,425,132,435,127,439,124,437,113,443,109,446,98,445,90,443,84,433,82,424,80,412,79,397,79,385,80,374,78,363,72,353,68,334,64,326,59,317,57,315,71,309,77,318,85,326,95,326,106,324,120,327,132,325,141" href="#">
<area shape="poly" coords="442,84,444,78,439,68,444,65,433,59,418,60,420,50,406,45,400,42,394,27,384,26,379,30,370,20,367,12,363,7,362,3,355,6,347,8,337,9,326,12,321,18,320,28,320,39,320,51,320,57,333,62,352,70,368,76,390,81,411,80,428,83" href="#">
<area shape="poly" coords="447,86,458,88,466,83,469,72,472,68,474,75,474,83,476,92,477,100,485,100,497,107,500,111,498,114,490,114,485,119,485,131,481,144,487,155,482,163,481,170,486,177,489,188,500,194,506,199,512,208,519,214,523,224,532,233,527,242,521,248,520,256,508,257,499,260,491,256,482,250,482,241,471,231,459,236,449,238,440,237,434,236,422,220,415,214,410,209,404,203,413,188,411,180,406,172,412,165,418,154,419,141,421,133,432,131,437,126,441,113,439,109,446,99,445,86" href="#">
<area shape="poly" coords="534,232,544,228,548,233,557,231,565,237,571,234,579,238,584,240,585,232,591,215,593,204,589,189,596,183,600,171,590,163,581,164,579,158,585,147,593,152,607,154,614,146,606,139,601,135,591,141,583,139,577,136,574,140,565,136,558,123,551,116,538,117,526,116,520,111,514,115,503,114,502,111,489,116,485,122,484,134,481,145,486,154,482,166,485,177,488,186,499,192,510,197,509,203,517,209,523,214,522,223,527,229" href="#">
<area shape="poly" coords="614,145,624,144,637,146,639,149,638,160,630,167,625,178,622,189,619,202,615,215,617,222,618,232,614,246,619,255,615,261,609,268,600,271,594,264,589,255,585,244,580,240,592,217,595,200,590,189,592,183,601,175,595,168,586,164,580,154,587,147,598,154,608,154" href="#">
<area shape="poly" coords="534,234,545,229,551,235,555,232,562,238,573,237,584,244,590,252,594,264,586,266,585,272,588,276,585,288,576,296,570,304,563,307,564,316,559,323,551,330,546,342,548,347,547,355,535,361,525,357,519,362,512,356,508,350,511,341,513,330,510,318,505,310,509,301,514,287,512,275,510,268,513,260,510,257,521,249,528,244" href="#">
<area shape="poly" coords="510,257,512,266,508,271,515,281,513,292,509,302,506,309,507,316,510,323,512,336,507,350,503,348,498,346,490,345,483,357,480,368,471,362,463,364,460,372,451,372,435,367,434,362,438,355,438,347,429,342,423,333,417,330,412,337,409,334,395,332,392,326,388,320,392,311,388,300,387,288,382,283,384,271,384,267,385,261,383,258,383,253,388,249,393,240,393,232,391,227,391,221,387,218,394,210,401,206,404,205,414,213,421,218,428,228,432,234,437,238,446,238,453,238,460,236,469,234,472,233,483,238,486,248,490,253,495,257,504,261" href="#">
<area shape="poly" coords="388,222,391,214,397,208,405,203,411,194,412,182,407,170,399,161,390,154,378,154,366,150,345,145,335,145,324,145,319,152,313,156,314,167,322,181,322,190,331,199,339,209,347,213,356,213,365,220,370,224,377,225,383,223,387,223" href="#">
<area shape="poly" coords="313,169,304,178,291,177,287,182,281,182,288,190,288,196,286,203,282,209,281,213,281,220,283,226,278,235,277,242,276,249,271,253,266,259,258,266,250,268,248,275,245,285,242,293,241,298,248,303,252,309,256,317,263,316,270,310,277,321,280,330,283,337,284,345,285,348,291,354,301,361,303,361,313,354,327,354,332,355,337,355,350,355,354,355,356,351,359,347,367,342,369,336,369,333,371,330,377,329,384,328,390,325,390,319,392,310,392,303,387,294,382,283,382,274,382,268,382,260,382,255,386,249,391,244,392,236,392,224,384,222,380,223,378,226,364,223,360,220,356,214,352,211,344,211,340,212,335,208,334,203,327,195,321,192,322,182,318,173" href="#">
<area shape="poly" coords="283,224,280,235,275,244,272,252,265,258,258,264,251,270,243,278,241,291,236,301,226,304,205,305,196,309,192,316,199,325,202,337,201,350,203,357,186,360,178,360,169,358,152,351,141,344,135,335,129,317,135,308,133,297,128,293,133,285,122,283,115,282,112,274,122,267,134,261,148,254,154,254,167,249,169,245,175,245,185,238,187,231,188,219,188,209,188,199,188,191,200,193,211,200,230,195,232,200,240,206,253,203,259,207,267,214,275,217,281,219" href="#">
<area shape="poly" coords="295,358,286,350,284,341,281,332,278,322,270,312,257,317,253,316,252,308,243,302,228,300,221,305,209,306,198,308,193,312,196,321,198,331,200,345,206,353,207,358,193,360,181,360,174,372,181,377,179,386,176,392,168,397,173,403,188,410,193,420,196,431,201,435,208,438,216,445,217,448,228,450,235,448,240,442,246,439,248,431,259,423,263,416,264,410,272,406,279,399,281,391,283,387,281,380,278,378,279,371,282,364,288,360,293,359" href="#">
<area shape="poly" coords="271,410,274,419,283,415,291,425,299,429,301,442,300,447,312,459,327,462,336,467,350,455,350,448,350,444,357,436,359,430,367,430,362,417,360,408,358,402,363,397,372,386,369,375,363,367,354,360,349,355,335,354,326,353,320,353,308,357,300,360,291,356,282,361,275,366,278,375,280,384,281,390,275,401" href="#">
<area shape="poly" coords="349,488,344,472,340,463,351,456,346,447,357,437,364,429,364,421,362,407,360,399,370,388,370,378,365,361,355,357,356,349,367,345,373,330,382,328,389,324,396,329,405,332,415,336,422,332,427,340,431,345,435,349,438,355,436,364,432,372,435,381,433,386,423,387,428,396,426,401,433,413,439,419,440,428,438,435,453,437,455,431,462,437,466,445,466,456,457,462,452,470,444,477,434,478,424,472,417,474,411,471,411,466,408,463,401,466,396,475,391,482,377,468,374,474,364,476,367,484,362,487,352,487" href="#">
<area shape="poly" coords="437,482,443,498,447,508,456,512,467,515,476,513,490,511,492,504,500,506,507,513,520,520,531,522,534,515,525,503,527,495,534,489,534,485,542,477,548,473,558,466,566,459,563,452,565,448,573,450,583,447,593,443,599,434,606,421,604,413,593,405,589,399,586,391,593,381,592,372,586,361,583,352,579,346,569,347,558,354,554,358,550,367,544,367,542,358,545,352,535,360,528,357,520,359,511,355,506,348,494,346,486,347,486,362,480,368,469,360,458,364,456,371,440,369,431,368,436,380,431,386,426,395,428,404,434,410,439,419,440,428,445,434,457,434,464,439,468,447,464,454,455,462,449,472,441,477" href="#">
<area shape="poly" coords="583,451,593,462,600,465,608,475,598,481,595,493,596,501,603,508,613,514,624,515,632,517,638,514,643,517,642,526,632,534,634,544,628,549,617,552,600,565,596,571,595,576,588,581,586,593,574,594,564,597,558,599,550,600,543,600,535,598,524,593,512,589,506,582,502,581,507,575,508,571,498,568,496,576,488,577,486,583,474,576,475,569,475,560,467,573,462,570,465,562,470,557,478,549,481,542,485,538,488,532,485,522,481,516,480,511,495,507,501,511,518,523,523,523,533,517,533,507,525,503,526,495,533,490,536,483,555,470,565,467,572,464,581,454" href="#">
<area shape="poly" coords="456,572,469,558,475,550,483,542,489,531,483,524,477,517,465,513,457,513,449,508,444,503,441,495,434,484,433,478,422,473,414,471,411,468,405,464,403,473,389,477,390,485,394,492,398,500,400,510,402,518,406,521,410,527,413,534,404,544,398,552,390,554,385,560,375,564,371,568,373,575,369,580,358,580,348,577,341,582,335,581,326,583,321,591,324,596,330,601,334,610,337,620,329,626,337,631,349,631,345,640,324,641,323,646,324,655,336,658,351,660,360,657,365,659,372,655,374,653,382,656,392,649,400,651,396,644,393,638,395,614,396,602,398,596,413,587,428,585,434,575,439,572,449,569,457,570" href="#">
<area shape="poly" coords="390,481,396,494,402,504,400,513,413,521,412,532,405,541,387,556,384,562,369,565,368,575,366,579,352,575,340,575,325,578,325,583,321,593,327,604,335,606,333,616,330,626,337,633,345,633,343,639,327,640,318,641,312,637,307,637,300,633,294,632,286,630,284,626,278,625,271,625,261,623,260,632,254,633,247,633,237,630,228,630,225,631,218,627,212,618,211,610,216,601,222,593,227,578,220,564,218,557,223,544,220,537,228,537,245,528,264,528,276,525,283,514,282,506,290,505,284,496,288,495,295,487,304,477,307,469,309,462,306,452,316,459,328,464,336,465,343,466,346,478,350,487,356,488,366,488,369,481,370,478,372,476,384,473,391,478" href="#">
<area shape="poly" coords="211,621,216,603,228,591,226,580,223,565,218,562,220,555,224,539,227,536,246,530,259,528,272,526,284,513,285,506,290,499,292,492,306,479,310,463,308,453,302,448,300,434,297,426,291,424,281,418,273,418,269,411,262,420,250,429,248,434,245,442,231,447,226,451,219,449,208,441,198,436,196,449,205,458,195,454,192,439,188,429,178,415,170,432,167,454,164,484,162,504,159,530,154,552,147,571,135,579,148,586,150,596,152,603,160,604,175,609,190,612,198,619,199,626,205,623,213,623" href="#">
<area shape="poly" coords="597,657,603,645,595,638,595,630,597,625,591,614,601,609,610,605,619,597,632,593,636,596,633,576,640,570,645,588,644,600,647,610,646,621,647,634,644,644,642,649,637,659,637,664,633,680,630,693,625,694,620,691,613,687,604,681,610,677,606,672,598,670,602,662,599,654" href="#">
</map>
</div>
</body>[/code]Et voici mon code css:
[code].map{
width:650px;
height:697px;
background:url(map.png) left top no-repeat;
position:relative;
}
.map.overlay{
width:650px;
height:697px;
background:url(map.png) 650px top no-repeat;
position:absolute;
top:0;
left:0;
z-index:1;
}
.map.img{
position:absolute;
top:0;
left:0;
z-index:2;
}[/code]
J'ai déjà résolu le problème avec usemap (ça ma pris un moment pour comprendre que c'était ça le problème XD) mais là, tout le code jss ne fonctionne pas, je ne comprends pas d'où vient l'erreur.
J'ai la dernière version de javascript avec le script se trouvant dans le fichier www de easyphp avec l'html, le css, les 2 png.
La seule chose qui change par rapport au tuto est la taille de la carte qui est 650*697
Voilà, merci d'avance :)