Advertisement:

Author Topic: Map dans Theme France  (Read 811 times)

gsen

  • Newbie
  • *
  • Posts: 10
Map dans Theme France
« on: October 28, 2014, 02:53:33 pm »
Bonjour,

J'utilise le theme France avec la carte des regions de France

Je souhaiterais intégrer le code css dans la ou une feuille de style et non dans le code de la page a proprement dit mais mes essais sont infructueux... Est ce possible déjà ?
C'est conseillé d'après le PageSpeed Insights

Merci par avance pour votre aide

Code: [Select]
<!-- map -->
    <div id="main-map">
                   
    <div style="position:relative; background-image:url(<?php echo osc_current_web_theme_url('images/map.png'); ?>); width:507px; height:528px;">
        <canvas id="map-status" style="position:absolute;left:0; top:2px; width:507px; height:528px;" width="507" height="528"></canvas>
        <canvas id="map-hover"  style="position:absolute;left:0; top:2px; width:507px; height:528px;" width="507" height="528"></canvas>
        <img src="<?php echo osc_current_web_theme_url('images/map.png'); ?>" alt="France" usemap="#Map" border="0" style="position:absolute;left:0; top:2px; width:707px; height:562px; opacity:0" width="707" height="562"/>
    </div>
<map name="map" id="map">
<area shape="poly" coords="92,201,98,203,107,200,107,194,112,191,124,191,127,187,131,186,132,183,135,185,136,187,140,187,145,176,149,176,149,171,148,168,148,163,147,159,149,154,149,146,142,145,136,149,132,145,131,140,121,140,118,138,119,135,116,134,112,138,109,138,106,140,101,136,96,136,87,142,82,138,83,134,79,131,74,123,62,124,58,123,55,126,56,128,54,131,49,130,46,130,44,132,40,130,39,128,32,129,30,132,25,130,22,132,19,131,17,134,11,134,9,137,11,139,9,142,9,145,9,148,14,148,20,147,21,151,15,150,14,152,16,154,17,158,20,155,25,157,25,162,11,163,9,166,18,168,22,173,21,179,25,180,29,178,30,176,37,178,40,181,42,182,53,184,56,187,64,192,66,199,68,202,69,196,76,196,78,202,90,200" alt="Bretagne" href="#" />
<area shape="poly" coords="119,77,119,80,123,84,121,89,122,90,122,96,127,102,128,107,128,114,131,120,128,129,131,137,135,138,131,140,132,145,136,149,143,145,148,147,152,148,155,146,160,151,163,149,166,150,171,148,177,148,180,146,184,147,184,151,186,152,187,155,191,155,196,151,201,151,203,155,205,160,207,160,210,164,214,164,217,167,219,167,219,163,217,160,219,158,225,156,225,148,221,145,221,141,218,139,218,135,217,133,214,133,212,128,205,127,205,125,206,120,205,118,206,116,205,110,203,108,203,107,204,105,202,103,201,96,182,104,174,101,159,99,155,97,148,99,148,94,143,88,144,85,146,85,144,79,137,78,131,81,125,78" alt="Basse Normandie" href="#" />
<area shape="poly" coords="241,61,230,69,200,78,194,86,192,93,201,97,203,107,205,117,204,118,206,122,205,126,207,129,212,129,214,133,217,133,218,137,217,140,220,141,222,138,226,138,232,134,235,135,240,135,241,130,244,129,245,123,244,119,249,118,253,109,255,107,255,98,256,94,254,88,255,83,253,82,256,78,254,76,255,72,244,61" alt="Haute Normandie" href="#" />
<area shape="poly" coords="241,60,246,54,251,55,252,53,248,50,248,44,251,45,253,48,256,44,261,47,269,54,281,53,281,55,279,57,280,60,283,58,289,60,291,57,293,60,292,63,296,60,297,64,299,62,304,62,306,63,318,64,320,62,323,64,327,61,333,63,334,65,335,62,339,66,346,66,346,69,347,72,345,76,347,79,345,82,343,83,343,85,340,85,339,87,341,89,340,101,334,98,333,101,329,101,325,105,326,109,329,112,328,113,324,114,326,116,324,119,327,120,324,127,322,126,319,131,308,121,308,117,305,115,303,117,297,118,295,117,292,118,288,116,286,118,277,112,271,114,268,110,264,113,256,112,254,109,256,106,254,97,257,94,255,92,253,88,255,83,254,81,256,78,253,72,245,63" alt="Picardie" href="#" />
<area shape="poly" coords="248,44,248,16,257,10,279,6,284,3,287,12,286,18,291,20,294,25,304,20,310,24,311,34,315,36,318,34,326,39,326,44,338,43,347,50,344,53,344,56,347,58,346,62,342,66,337,65,337,62,333,65,331,63,326,62,323,63,321,62,316,64,314,63,310,64,305,62,296,64,296,61,293,62,293,59,290,58,288,60,283,57,280,60,279,56,282,55,280,52,269,54,257,45,253,47" alt="Nord Pas de Calais" href="#" />
<area shape="poly" coords="346,66,350,66,354,68,361,64,361,60,366,54,370,57,367,62,369,64,368,66,371,69,371,75,377,75,379,79,385,80,387,83,387,87,385,89,381,87,379,89,378,93,380,95,379,100,376,100,376,102,378,103,377,106,374,106,375,109,374,111,378,121,377,124,373,125,373,127,374,129,372,132,377,137,377,142,390,149,394,153,392,155,394,157,397,156,400,160,402,160,402,163,404,163,405,165,404,166,403,172,408,175,408,179,412,179,409,184,404,186,405,194,400,195,396,194,394,195,393,199,389,199,386,195,382,196,380,194,377,195,375,190,377,187,368,176,361,176,361,179,351,180,350,182,348,180,345,182,336,182,333,175,333,172,331,168,328,171,325,168,325,162,320,157,317,157,318,149,320,145,322,144,322,142,319,142,319,136,317,134,319,131,327,120,324,119,325,115,324,113,328,112,326,108,326,104,329,101,333,102,335,98,339,101,340,100,341,88,338,86,343,84,344,81,346,81,347,78,345,74,348,72,346,69" alt="Champagne Ardenne" href="#" />
<area shape="poly" coords="387,85,391,88,391,92,395,89,401,87,407,88,406,91,412,92,415,93,417,90,421,89,424,92,425,89,429,91,436,95,435,98,437,101,441,107,445,103,453,108,459,108,463,105,468,105,474,111,472,120,469,119,467,117,465,119,456,116,454,113,452,115,452,119,449,120,449,122,453,124,453,127,455,129,458,125,462,129,461,134,462,136,461,142,456,145,457,154,460,155,456,165,456,171,451,175,451,182,448,184,439,177,435,181,431,177,425,179,422,177,422,174,418,174,414,178,408,178,408,174,403,171,404,166,405,165,397,156,392,157,392,154,394,152,380,142,376,143,376,136,374,133,372,127,377,121,375,119,377,115,373,110,375,107,377,104,377,99,379,96,377,92,380,87,385,89" alt="Lorraine" href="#" />
<area shape="poly" coords="474,112,480,111,482,113,485,110,490,113,494,113,497,116,493,121,493,125,491,128,488,127,487,132,482,136,482,144,480,149,480,156,475,165,476,172,478,173,476,178,475,188,474,190,477,196,475,198,476,202,471,206,463,207,460,201,459,197,455,196,455,194,457,189,448,185,451,182,450,174,456,169,456,164,459,158,460,155,456,153,456,148,457,144,461,140,462,136,460,133,463,129,460,127,456,126,454,128,453,124,449,123,449,120,453,116,454,113,456,116,459,117,462,117,463,119,466,119,469,119,471,120,472,117,474,113" alt="Alsace" href="#" />
<area shape="poly" coords="394,197,396,194,401,195,405,193,405,188,404,186,409,184,413,177,415,178,419,174,422,174,421,178,425,179,430,176,435,181,439,178,449,184,458,189,455,196,459,197,461,202,454,207,459,209,456,214,454,218,447,225,446,229,437,235,438,245,425,256,427,258,423,266,415,274,410,274,409,271,406,269,402,274,399,274,400,271,396,269,393,264,398,262,398,260,395,260,395,257,398,252,394,247,395,245,393,243,398,241,396,239,393,239,392,237,390,236,391,229,395,227,399,217,398,211,394,206,398,202" alt="Franche Comté" href="#" />
<area shape="poly" coords="486,446,488,443,488,441,486,438,487,433,487,430,487,428,489,427,492,428,495,439,493,443,494,449,498,453,498,465,500,469,501,480,495,487,495,509,491,513,491,521,484,520,485,517,474,514,469,511,471,507,475,504,464,502,468,497,468,494,469,492,462,493,461,489,466,484,465,482,459,480,457,474,462,473,462,470,456,466,461,462,460,459,462,457,463,454,464,455,469,450,475,448,477,445,479,443,482,443" alt="Corse" href="#" />
<area shape="poly" coords="243,119,247,118,250,117,253,109,256,113,265,112,267,110,270,111,273,114,277,112,287,118,289,116,292,118,295,117,297,119,300,117,303,118,305,116,309,116,308,122,310,123,320,130,317,133,317,136,319,137,319,142,322,143,322,144,320,146,317,150,317,157,306,157,303,161,304,163,300,168,295,170,292,169,292,171,281,172,280,171,284,169,284,165,280,162,275,161,272,159,269,162,263,162,262,153,258,153,256,151,255,146,253,146,253,143,249,141,249,137,251,137,249,135,250,131,248,129,246,124" alt="Ile de France" href="#" />
<area shape="poly" coords="306,157,320,157,325,162,325,169,329,171,332,169,333,173,333,176,337,182,346,181,348,180,350,182,353,180,360,179,361,175,368,176,378,187,376,190,377,195,381,194,382,196,386,195,389,200,394,199,394,196,398,201,393,206,398,211,399,216,395,228,391,229,390,237,394,239,398,241,398,242,393,243,393,245,396,245,395,249,397,253,396,257,394,257,395,261,398,260,396,263,390,264,387,261,384,262,380,260,377,263,373,280,371,280,370,273,366,275,365,273,363,274,358,273,356,280,353,281,350,280,345,279,342,281,341,279,338,279,338,275,341,273,341,264,338,262,332,261,332,257,326,250,321,255,320,255,320,251,318,251,317,253,314,253,314,251,310,253,305,249,304,246,305,243,305,240,305,233,303,231,304,226,301,219,298,217,298,214,299,212,299,208,297,205,299,203,300,202,299,198,296,193,298,191,302,191,303,187,302,184,307,180,306,176,300,168,303,163,302,161,304,158" alt="Bourgogne" href="#" />
<area shape="poly" coords="92,205,94,203,99,203,107,200,107,194,114,191,125,191,127,187,131,187,132,183,137,186,141,186,145,176,149,176,150,171,147,169,148,158,150,157,148,148,155,146,160,152,163,149,166,151,171,148,176,148,181,145,184,148,183,151,186,152,187,155,191,155,197,151,202,150,203,153,204,160,207,160,208,164,214,164,217,168,222,169,218,174,220,177,219,184,216,185,215,191,210,193,211,196,205,199,202,198,203,201,197,200,195,202,197,205,194,207,193,212,189,224,182,230,180,228,176,228,165,229,165,232,162,234,158,232,152,234,153,237,153,239,158,244,158,246,161,249,160,251,162,258,162,264,161,267,162,266,164,268,157,273,155,272,153,270,149,271,148,268,138,274,133,271,132,269,127,269,126,266,121,265,116,260,114,259,110,248,102,240,103,236,109,229,104,224,99,224,99,222,102,221,103,220,103,215,99,217,96,217,95,215,89,214,89,208" alt="Pays de la loire" href="#" />
<area shape="poly" coords="245,125,250,131,249,134,250,137,249,140,253,144,253,147,255,146,256,152,259,153,263,154,263,162,269,162,272,159,275,161,279,161,284,166,281,171,291,171,293,169,296,170,301,168,307,178,307,181,302,184,303,188,302,191,296,192,297,194,301,202,297,204,297,207,300,210,300,213,298,215,298,218,301,220,304,227,303,231,306,233,305,246,300,246,298,249,293,251,292,249,286,255,288,260,285,262,279,262,276,264,274,267,268,268,255,266,253,269,245,268,241,271,238,268,236,270,232,270,233,266,230,265,230,262,226,261,221,257,221,251,218,247,218,244,214,240,214,236,211,234,209,234,209,237,198,238,198,231,193,230,193,227,190,227,188,223,191,216,194,212,194,208,196,205,195,202,197,199,202,202,202,198,205,198,210,196,211,193,215,191,217,185,219,183,220,177,218,174,221,169,218,167,218,160,224,156,225,147,220,145,221,139,226,138,231,135,240,135,241,130,244,130" alt="Centre" href="#" />
<area shape="poly" coords="138,274,148,268,149,271,153,270,157,273,165,268,161,267,162,258,160,250,160,249,158,245,158,243,153,240,154,236,152,233,157,231,162,234,165,231,166,229,171,228,180,227,182,230,187,224,192,227,194,228,194,230,198,232,198,238,208,237,210,232,214,237,214,241,218,244,218,247,222,251,221,257,227,261,230,261,230,265,233,267,232,270,227,271,225,273,226,275,221,275,217,279,217,285,217,288,219,289,221,289,222,294,216,295,216,300,207,311,204,311,204,317,195,323,194,330,189,335,185,334,181,341,179,340,176,341,169,337,167,337,166,330,161,329,161,326,154,327,153,319,135,306,134,299,134,295,129,292,130,286,133,289,136,289,137,295,141,295,142,292,139,289,143,288,144,286,139,283,136,281,133,281,129,278,125,278,123,273,127,272,130,276,133,276,137,279,140,273,139,274" alt="Poitou-Charentes" href="#" />
<area shape="poly" coords="209,307,213,301,216,302,217,300,218,295,222,293,221,289,217,289,217,279,220,275,224,275,228,270,237,270,238,269,241,272,245,267,253,269,255,266,274,267,276,270,277,274,279,273,281,276,282,276,285,282,285,287,288,293,285,294,285,297,280,300,279,303,285,308,285,310,282,314,284,317,284,321,284,324,284,326,284,327,281,327,278,324,277,330,273,332,272,336,270,343,268,343,267,345,269,347,266,350,263,349,261,350,259,349,255,352,249,346,245,345,240,347,240,339,234,340,233,330,237,326,234,321,228,321,230,319,230,317,226,317,225,313,220,313,216,315,214,312,215,310,214,307,209,308,210,308" alt="Limousin" href="#" />
<area shape="poly" coords="267,350,270,347,267,344,269,344,271,343,273,336,271,335,278,329,278,323,282,327,285,327,284,317,282,313,285,308,279,301,284,298,285,294,288,292,285,287,286,282,283,276,280,273,277,275,274,267,278,261,285,262,288,259,287,254,292,249,294,251,300,246,305,246,306,250,311,252,323,253,326,249,332,257,332,261,340,262,342,267,341,273,337,276,334,276,333,279,335,282,335,292,330,293,330,295,333,296,331,300,332,303,336,312,340,314,342,321,338,325,339,327,346,328,350,325,357,327,357,331,361,331,363,335,362,339,358,342,359,346,356,346,355,349,352,349,351,354,346,354,342,357,339,362,334,357,330,357,329,355,328,355,327,357,322,358,319,350,313,351,312,356,308,353,303,368,301,365,300,360,298,359,298,355,293,354,293,351,287,355,287,361,285,361,286,365,283,368,278,368,276,367,272,367,272,370,270,369,270,366,268,365,270,360,270,357,267,356" alt="Auvergne" href="#" />
<area shape="poly" coords="423,265,427,267,424,272,424,275,419,275,419,280,425,280,432,275,430,272,432,267,435,268,439,265,450,264,455,272,451,276,455,279,456,283,463,290,461,294,454,296,454,303,457,306,462,306,462,313,470,320,467,324,468,329,459,333,459,336,456,336,454,333,449,338,443,337,443,340,439,341,437,337,432,338,431,343,436,343,438,347,438,351,434,351,432,353,429,352,426,354,424,353,422,356,423,359,418,359,418,363,410,365,409,370,411,373,409,375,404,373,402,375,404,377,403,379,404,382,409,383,410,386,413,386,412,393,409,392,406,396,401,393,400,390,391,390,389,386,385,386,387,380,384,378,381,380,380,382,382,387,378,390,376,389,378,386,376,384,369,387,364,384,362,388,360,386,360,384,357,385,356,388,347,385,348,380,343,378,344,373,341,370,339,361,346,354,351,354,352,350,355,349,356,346,359,345,358,341,361,339,363,334,361,331,357,331,357,327,351,324,345,328,339,326,339,323,342,320,340,314,336,311,331,301,334,297,330,293,335,292,335,281,333,278,336,275,339,275,338,279,343,281,347,279,353,280,356,279,358,273,365,273,371,272,371,280,373,279,378,262,380,260,383,262,387,260,394,265,396,268,401,272,400,274,404,273,406,270,410,272,409,274,415,273,420,268" alt="Rhône-Alpes" href="#" />
<area shape="poly" coords="449,336,451,342,455,342,455,349,459,351,464,351,468,360,464,363,464,365,460,370,463,375,461,378,465,382,466,386,473,386,480,391,493,386,496,392,495,399,490,401,489,407,491,411,486,415,482,415,478,418,474,418,473,425,466,425,466,429,463,433,457,434,456,439,453,441,457,442,457,446,451,447,449,448,445,449,443,453,438,451,434,454,428,453,422,456,419,455,420,452,412,447,400,447,402,443,399,443,402,439,387,440,385,436,381,434,380,437,382,440,374,441,368,440,371,435,357,434,358,430,364,426,363,423,365,419,371,420,372,410,380,406,379,403,374,397,374,393,369,386,375,384,378,386,377,390,382,387,380,383,382,378,385,379,387,381,385,385,387,387,390,387,391,390,400,390,402,394,406,396,409,392,412,393,413,387,409,384,402,380,404,373,409,375,412,372,409,370,411,366,418,363,417,359,423,358,423,354,431,352,432,354,439,351,439,347,437,343,432,343,432,339,436,336,440,341,443,341,443,337" alt="Provence-Alpes Cote d&apos;azur" href="#" />
<area shape="poly" coords="357,433,350,433,350,429,344,430,325,445,320,445,318,447,312,448,311,452,307,457,304,453,301,455,304,459,306,459,306,486,311,490,311,494,305,491,298,491,296,495,290,495,289,499,283,498,280,496,272,493,267,495,265,499,262,498,259,496,259,491,255,491,251,488,251,485,257,485,270,479,266,473,263,476,256,471,258,469,262,469,261,454,251,449,250,445,258,436,260,438,265,436,266,438,272,438,273,435,287,436,291,434,291,431,289,428,291,423,294,425,301,423,303,420,307,420,306,413,310,413,311,415,315,415,314,411,322,405,321,401,316,401,315,398,317,398,319,393,313,393,312,390,310,390,309,378,306,375,307,372,302,367,308,353,312,355,313,351,318,349,322,359,327,357,328,354,330,354,331,358,335,357,339,361,342,371,344,373,344,378,347,379,348,384,356,388,357,384,360,383,361,387,363,387,364,384,370,386,374,393,374,398,380,403,380,406,372,410,371,419,365,419,363,422,365,426,359,429" alt="Languedoc-Roussillon" href="#" />
<area shape="poly" coords="251,487,249,483,238,482,235,476,226,477,223,472,215,472,209,468,207,468,207,478,193,477,191,479,189,478,186,475,179,478,174,476,173,471,165,468,168,461,168,456,171,457,173,456,171,453,177,449,181,439,177,434,180,431,176,427,171,426,169,423,172,416,172,407,174,405,179,406,180,404,182,408,184,408,185,403,187,404,191,402,193,403,200,402,201,399,206,399,209,402,212,400,211,397,219,396,218,393,220,389,217,386,218,381,222,383,226,383,223,372,226,372,229,368,229,365,234,365,236,362,235,358,238,358,242,352,240,350,240,347,246,345,251,347,254,352,256,352,259,350,268,350,268,356,270,358,270,361,269,364,271,366,270,369,272,369,274,366,283,367,286,361,287,356,293,351,293,355,298,355,298,360,301,361,303,368,307,373,307,377,309,378,310,388,314,393,320,393,316,401,322,402,322,405,313,415,309,414,306,413,307,421,302,421,300,423,291,424,289,428,290,431,290,436,273,435,272,438,265,437,259,438,258,435,254,438,255,440,250,446,251,449,261,454,262,469,256,469,256,473,263,476,266,475,269,479,258,483,257,485,253,486" alt="Midi-Pyrénées" href="#" />
<area shape="poly" coords="166,469,155,471,148,465,149,461,140,461,126,455,126,451,123,456,119,455,118,452,122,449,121,446,124,445,123,443,116,440,115,442,113,442,112,440,107,438,106,435,112,433,120,423,132,369,133,367,132,365,137,331,137,317,141,313,142,317,153,327,156,341,155,328,161,326,162,330,167,330,167,336,171,337,174,340,180,340,181,341,185,334,189,334,195,329,195,322,204,316,205,311,208,311,210,308,215,308,215,313,217,315,220,312,225,313,226,317,229,316,231,318,229,320,233,321,237,326,233,331,234,340,240,339,240,350,242,353,238,358,235,359,236,361,234,365,229,365,229,369,226,372,222,373,226,383,223,384,218,382,218,387,220,389,217,394,218,397,212,398,212,401,209,402,206,399,200,400,199,403,192,403,191,402,189,404,185,403,184,404,184,406,182,408,180,405,178,406,174,406,172,408,173,417,170,422,171,426,177,427,178,430,181,432,179,433,181,440,176,451,172,453,172,457,171,458,169,457,166,467" alt="Aquitaine" href="#" />
</map>
 </div>
<!-- /map -->