Bonjour,
Je suis en train de créer une carte interactive, le problème étant que je n'arrive pas à donner un couleur quand je survole une région .. Pouvez vous m'aidez à résoudre ce problèmes svp.
Voici mon code HTML :
<!DOCTYPE html>
<html>
<head>
<title>Site d'annonce</title>
<meta charset="utf-8" />
<script type="text/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="accueil.css">
</head>
<body>
<div class="haut">
</div>
<div class="center">
<div class="map">
<img src="imgaccueil/FR.png" width="650" height="650" usemap="Map" />
<map name="Map">
<area shape="poly" coords="306,52,307,22,342,8,348,24,356,29,363,26,371,27,373,36,379,42,387,46,395,50,403,54,411,58,410,66,409,75,385,72,369,73,359,74,347,66,339,69,339,58,334,63,321,56,305,52" href="#">
<area shape="poly" coords="305,52,306,63,300,70,314,86,311,94,314,117,309,124,329,124,337,124,348,132,367,128,382,143,389,136,389,129,391,125,390,117,400,111,405,111,403,96,410,89,412,76,385,72,365,74,353,68,335,66,326,60,320,57,306,52" href="#">
<area shape="poly" coords="296,71,287,77,273,80,264,86,250,91,246,104,253,107,255,114,257,126,259,140,265,143,273,153,287,149,297,149,296,146,302,141,299,131,304,131,309,128,312,124,313,111,313,100,313,91,313,85,306,77,301,72" href="#">
<area shape="poly" coords="413,76,421,75,428,72,430,65,435,64,436,70,436,77,438,86,448,89,455,93,456,98,449,100,448,106,443,112,445,116,442,120,444,130,445,136,443,138,440,141,442,146,444,152,445,157,464,169,461,173,475,181,474,189,480,199,473,214,466,214,461,220,458,218,446,216,442,212,445,207,438,198,430,196,417,200,400,200,394,188,389,189,381,173,382,166,385,163,380,150,383,144,393,126,389,118,399,114,405,111,403,97,412,89" href="#">
<area shape="poly" coords="299,133,312,127,337,124,352,132,365,128,381,143,383,154,386,159,387,163,381,164,381,173,367,176,362,184,342,189,342,187,340,182,334,178,332,175,326,180,323,180,321,170,315,169,313,164,307,157,307,146,303,141" href="#">
<area shape="poly" coords="458,96,463,103,469,99,474,99,480,102,487,105,495,101,502,105,508,107,508,112,516,119,523,117,527,118,534,121,542,117,549,125,550,130,542,132,537,132,530,128,525,133,529,140,531,143,532,140,536,142,536,153,534,158,531,159,530,164,531,170,535,173,533,182,528,190,528,193,526,201,521,201,517,200,514,197,508,197,504,196,501,196,495,196,491,191,487,196,483,199,478,196,475,185,475,182,471,177,464,174,465,169,462,167,459,165,452,161,450,156,444,155,443,150,441,146,441,140,444,137,446,135,446,127,443,125,443,119,445,116,446,109,451,103,453,100,456,98,458,96" href="#">
<area shape="poly" coords="252,108,258,129,255,132,259,135,258,142,264,144,266,145,272,154,272,157,276,162,278,164,280,168,276,172,272,178,273,186,266,181,262,181,258,179,257,178,253,167,241,170,234,167,233,162,227,164,218,164,214,167,212,167,206,167,204,164,201,161,196,161,192,163,186,163,179,163,177,159,178,155,180,152,178,147,176,141,178,134,178,132,178,128,178,124,177,120,174,116,170,106,167,99,167,90,167,85,176,91,180,89,186,89,191,89,193,91,191,98,195,102,195,106,196,111,201,111,204,110,210,111,217,113,223,113,228,115,233,116,237,114,243,111,250,111" href="#">
<area shape="poly" coords="549,125,565,126,566,125,570,128,574,130,572,137,569,141,566,142,563,149,561,150,558,156,558,164,559,168,555,173,554,177,552,182,552,188,552,194,552,200,552,210,553,218,548,218,548,222,547,224,541,225,537,225,534,222,533,217,532,217,531,210,531,205,525,206,527,198,536,174,532,169,532,164,532,157,535,157,537,153,540,146,538,140,533,140,530,137,526,131,530,126,535,131,542,131,548,131,551,125,554,122,557,125,560,125" href="#">
<area shape="poly" coords="135,222,125,219,119,219,123,217,124,214,119,214,115,211,115,215,110,216,107,221,105,215,105,210,102,207,99,202,99,207,95,208,94,202,92,200,87,199,84,198,78,197,73,193,70,190,65,196,61,195,59,190,55,186,50,182,47,179,50,179,56,179,64,179,65,175,62,175,57,173,54,171,50,168,50,165,62,168,69,168,72,168,62,163,55,163,49,163,45,161,47,150,54,150,61,143,65,147,77,143,79,145,83,148,84,145,92,147,94,147,95,140,98,138,105,138,109,138,115,138,118,143,124,149,125,152,129,155,130,161,143,151,149,155,154,155,159,154,159,159,162,151,166,149,166,154,172,155,178,155,180,163,188,163,196,163,197,175,194,177,197,193,192,196,189,206,179,202,175,209,173,209,159,211,151,215,151,220,141,224" href="#">
<area shape="poly" coords="136,225,130,230,133,235,141,237,147,234,153,234,147,244,145,245,153,249,156,254,148,260,139,252,148,267,155,276,166,289,173,295,176,295,179,298,183,303,191,297,196,296,199,298,208,296,213,295,209,292,209,287,209,280,209,271,203,265,201,259,212,257,216,251,229,251,230,251,233,254,236,249,239,248,249,221,256,221,257,216,265,214,273,208,273,199,274,188,267,182,261,179,256,177,253,168,241,170,237,170,233,163,225,163,216,163,214,168,209,168,205,166,202,161,197,163,194,164,199,171,197,174,196,179,195,188,199,192,193,196,189,199,188,206,183,206,181,203,174,210,167,210,161,210,153,212,152,218,145,220,137,226" href="#">
<area shape="poly" coords="276,154,285,149,295,149,301,142,306,147,306,156,308,161,313,166,315,170,321,170,322,176,322,179,325,180,332,177,336,177,339,183,344,186,341,189,348,189,359,188,364,190,366,196,369,200,365,203,363,209,359,211,361,219,361,222,357,227,358,234,361,237,361,244,364,248,366,253,366,259,366,264,366,270,366,274,356,275,352,278,345,279,347,285,344,289,339,289,334,293,333,296,326,295,318,293,310,296,302,296,293,298,283,298,286,293,284,291,281,288,278,283,274,277,274,274,272,268,270,263,266,258,264,258,262,262,259,262,251,259,248,258,248,254,245,249,239,244,247,222,256,222,262,219,271,212,275,204,273,197,276,186,274,181,274,176,282,169,278,164,273,159,270,154" href="#">
<area shape="poly" coords="361,186,365,176,372,176,378,173,384,174,385,181,387,186,388,190,393,189,397,194,398,199,403,200,415,200,425,200,430,197,435,197,441,203,443,204,443,211,448,216,455,218,462,218,468,218,465,227,465,232,467,234,469,239,465,247,461,253,459,259,460,264,467,263,465,269,466,273,467,280,462,283,464,289,458,290,452,287,446,287,439,304,432,300,431,303,428,303,421,303,420,311,412,309,402,305,399,304,405,295,405,289,398,289,393,283,390,274,385,279,378,276,377,278,370,278,367,275,365,272,367,255,360,241,360,233,359,227,363,224,358,217,365,209,368,204,370,199,364,191" href="#">
<area shape="poly" coords="464,217,473,214,476,208,480,201,484,198,489,195,491,194,495,196,507,196,511,199,514,198,521,200,524,204,529,207,530,214,532,220,534,222,531,226,528,229,531,233,528,242,523,244,517,250,509,259,509,269,498,277,493,289,490,295,485,301,483,303,477,302,477,299,473,299,470,303,470,298,465,298,461,289,465,284,467,279,466,272,465,268,470,263,464,262,457,260,462,253,468,246,469,237,465,227,467,217" href="#">
<area shape="poly" coords="184,304,191,297,194,297,204,297,205,299,212,297,209,284,211,273,202,266,202,258,207,258,215,255,219,250,228,251,236,253,242,248,247,251,249,256,251,262,259,260,263,259,267,263,272,270,275,279,277,283,286,298,279,301,273,305,270,311,271,318,275,320,270,328,268,332,266,335,264,337,255,348,252,349,249,355,245,355,244,361,241,367,239,367,235,370,233,370,233,374,229,374,220,373,215,370,215,365,213,361,209,360,206,360,202,362,204,356,203,354,199,344,192,344,188,339,184,333,183,332,185,327,190,325,191,319,190,314,189,308" href="#">
<area shape="poly" coords="266,337,276,324,272,317,271,311,273,304,280,301,285,296,294,296,301,296,307,296,314,294,316,291,317,291,329,296,332,296,339,300,342,305,345,308,345,313,342,314,346,320,339,329,344,343,344,348,342,348,343,354,343,358,336,358,333,361,330,364,330,369,328,373,327,379,325,384,322,385,317,386,313,386,306,380,302,381,296,381,293,378,293,374,290,370,287,364,290,359,292,357,290,352,283,349,275,344,268,344,268,340" href="#">
<area shape="poly" coords="333,295,336,288,341,288,345,288,348,285,348,280,352,277,362,275,370,274,372,280,381,276,384,278,387,276,391,273,394,283,399,289,403,289,405,294,405,300,399,304,399,310,399,316,398,321,393,324,399,326,396,333,396,337,402,343,405,347,405,355,405,361,412,361,418,358,420,359,423,364,427,365,427,368,424,375,422,381,419,383,417,381,416,387,413,391,404,394,403,394,392,390,389,390,389,392,385,390,382,387,376,387,371,389,369,387,364,396,363,398,351,385,343,401,336,403,329,406,328,404,328,400,330,395,327,390,324,389,329,382,331,368,334,364,341,356,345,352,340,347,344,342,342,336,340,332,347,322,343,315,346,311,347,308,338,303,335,299" href="#">
<area shape="poly" coords="401,394,410,392,417,390,421,382,426,375,429,367,426,364,423,364,423,359,422,358,415,357,409,359,402,359,406,350,403,343,398,339,395,334,399,327,392,325,398,321,399,304,418,311,424,303,431,303,437,303,439,308,447,287,462,288,469,295,469,301,475,299,481,299,482,304,490,298,496,291,498,297,495,303,492,306,498,307,505,303,507,297,509,292,517,289,523,289,527,288,527,299,529,304,531,309,540,317,532,330,538,336,541,344,546,350,546,356,542,363,526,370,510,372,508,368,505,376,513,381,511,384,504,387,497,390,493,391,491,394,484,397,484,402,481,407,482,412,474,415,482,422,486,427,479,431,470,431,462,426,456,422,447,428,443,423,439,423,435,424,431,420,420,420,420,427,413,422,410,415,407,408,403,401" href="#">
<area shape="poly" coords="187,346,199,357,200,365,207,359,212,358,215,364,217,371,222,373,230,373,234,370,238,368,241,364,245,360,246,357,249,355,253,349,256,343,260,338,265,338,269,340,267,345,272,345,276,343,280,348,287,353,290,356,290,362,287,369,293,371,294,376,294,380,296,385,292,392,289,397,283,399,281,406,276,410,282,417,274,422,268,426,270,428,264,435,258,437,250,439,240,444,235,446,230,447,225,447,220,450,222,454,223,457,219,461,218,467,227,469,229,470,232,476,230,482,226,490,225,494,219,499,218,501,216,507,215,512,214,514,216,514,209,514,201,514,200,510,193,505,187,507,182,503,180,499,173,495,169,499,165,498,168,490,170,486,165,483,153,478,161,473,164,464,169,456,170,442,174,423,179,399,187,397,183,394,177,397,182,374,185,348" href="#">
<area shape="poly" coords="216,513,218,499,224,494,233,488,233,479,233,472,224,467,219,465,221,457,224,447,236,443,247,443,255,438,261,437,267,436,270,432,274,427,274,422,277,418,281,418,277,411,282,406,284,399,290,397,293,393,293,389,296,381,307,380,314,386,324,385,327,390,331,393,328,403,330,406,338,404,347,399,351,390,354,386,358,394,362,398,369,409,369,413,373,424,372,429,378,432,381,434,376,439,386,444,383,446,376,449,376,454,368,453,368,459,368,465,361,465,354,464,350,465,349,476,347,480,335,476,328,482,320,482,319,479,319,479,316,479,312,487,308,496,311,496,314,498,318,501,317,507,317,514,318,518,319,522,322,523,329,523,319,527,314,533,309,534,305,526,301,527,297,529,293,523,289,522,284,522,279,519,286,522,263,514,260,518,259,524,251,524,240,522,236,521,228,521,220,516" href="#">
<area shape="poly" coords="319,545,319,540,313,537,308,537,315,527,322,525,325,523,319,520,315,518,315,513,318,508,322,499,315,496,312,494,306,486,310,480,313,477,320,478,325,481,332,479,336,478,343,478,348,478,351,464,367,464,368,453,374,453,377,449,386,444,377,439,381,434,372,428,372,410,364,398,372,388,383,388,391,392,394,388,395,392,403,394,405,404,419,426,423,421,432,421,435,426,440,435,447,442,444,447,441,450,439,459,436,461,428,467,425,475,416,470,410,472,404,476,393,483,388,487,378,489,373,497,372,504,368,514,368,527,370,535,373,539,358,539,354,542,351,545,346,547,344,542,336,541,328,542,324,542" href="#">
<area shape="poly" coords="423,474,435,461,440,462,438,454,443,446,447,441,442,437,438,429,436,424,444,421,447,426,455,424,464,426,471,432,476,432,483,429,476,417,479,413,479,407,483,403,494,395,503,389,511,388,513,380,506,372,507,368,515,371,525,371,528,378,533,384,538,386,544,392,543,394,540,398,538,403,533,404,537,410,536,416,541,424,548,425,554,429,564,426,571,425,573,429,573,435,568,439,564,446,567,450,559,453,551,457,549,460,542,465,542,471,535,474,528,480,532,484,532,486,524,492,516,492,510,492,510,500,503,496,497,496,491,496,488,491,482,490,478,490,474,489,471,478,459,483,454,478,451,482,446,483,437,482,436,475,427,474" href="#">
<area shape="poly" coords="579,487,576,469,579,469,585,469,583,480,586,490,588,498,590,505,590,513,592,520,585,532,587,544,587,551,584,555,584,560,582,568,579,570,572,569,568,565,560,560,559,554,563,553,557,552,552,550,556,546,557,539,548,535,556,533,552,527,548,523,549,521,552,518,548,514,543,513,544,508,549,504,549,500,554,497,566,491,568,486,575,487" href="#">
<area shape="poly" coords="378,602,384,619,382,623,377,629,369,633,360,622,361,613,359,606,356,599,358,592,367,587,376,591,381,594,386,593,389,589,387,583,383,578,393,574,398,580,399,587,405,592,412,595,419,600,413,602,401,600,393,607,384,603,413,628,408,629,408,635,409,640,414,640,419,636,420,632,416,630" href="#">
<area shape="poly" coords="285,615,278,615,275,614,272,609,268,606,262,601,262,596,260,592,256,587,257,583,264,576,267,575,274,578,279,581,287,587,290,590,291,595,296,594,299,590,303,594,299,596,298,601,298,606,301,610,305,614,308,622,313,628,307,634,304,641,302,637,305,632,304,632,297,632,292,630,287,629,278,633,277,628,273,625,277,622,281,621,285,620" href="#">
<area shape="poly" coords="157,562,181,568,184,574,190,579,195,583,201,590,201,585,204,586,205,594,205,604,199,607,196,612,190,616,190,621,191,630,185,635,178,638,170,640,168,637,160,639,155,639,154,642,152,642,147,640,142,638,158,612,152,606,148,597,146,588,144,581,147,574,153,569" href="#">
<area shape="poly" coords="97,626,91,628,84,631,79,631,67,631,61,627,51,624,48,623,45,619,41,616,41,606,39,604,33,598,38,592,39,581,45,583,50,578,54,576,61,576,66,578,74,580,79,580,81,583,83,587,85,592,87,596,90,599,93,601,95,604,96,609,96,613,94,620,98,623" href="#">
</map>
</div>
</div>
<div class="bas">
</div>
</body>
</html>
Code CSS :
.map {
width: 650px;
height: 650px;
background: url(imgaccueil/FR2.png) left top no-repeat;
position: relative;
}
.map .overlay{
width: 650px;
height: 650px;
background: url(imgaccueil/FR2.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;
}
.map:active{
background-color: #ff22ff;
}
#Map:hover{
background: #ff22ff;
background-color: #ff22ff;
}
Voici mon résulta actuel :
Merci d'avance à ce qui me proposerons leur aide !
Bonne soirée.
Afficher la suite
5 mars 2016 à 18:27