Carte cliquable invisible sous IE8 et inférieur ?

Bonjour à tous ;
voilà je ne sais pas si c'est la rubrique appropriée mais j'ai une carte cliquable comme sur le site du bon coin ; il marche correctement sur firefox et chrome et aussi sous IE9 mais dès que je teste avec IE8 et IE7 la carte disparaît :
je ne sais aps si c un problème css ou javascript mais svp , tentez de trouver ce qui ne va pas : voici le bout du code avec le code javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<div class="grid_4 alpha  prefix_3  ">
 
 
      <!-- voici image map -->
 <div class="map">
 
 
 
  <img src="<?php echo base_url() ; ?>image/annonce/map/void2.png" width="296" height="503" border="0" usemap="#map" alt=""/>
 
<map name="map" id="macarte">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:julio -->
<area shape="poly" coords="162,426,155,422,152,425,152,429,148,433,147,430,132,415,133,395,120,379,100,386,100,394,88,389,93,370,96,370,96,356,99,352,101,350,101,345,104,345,105,343,106,336,111,331,112,315,114,313,114,304,113,291,111,288,113,281,113,273,112,265,110,264,103,251,106,234,88,231,83,236,83,238,89,251,88,255,90,264,75,267,65,262,70,272,68,280,71,293,57,314,53,325,49,338,39,338,39,344,35,355,35,366,33,372,37,387,44,395,47,403,49,406,48,436,57,447,57,455,61,455,62,463,73,466,73,469,83,470,97,479,103,478,121,468,131,465,142,464,156,455,159,439,162,428,156,423,151,424" href="<?php echo site_url('annonce/rechercheToliara'); ?>" alt="toliara"/>
<area shape="poly" coords="199,304,195,303,189,299,184,304,174,305,171,300,173,295,172,291,165,293,159,292,156,296,149,296,147,299,137,299,132,297,129,297,127,291,123,292,118,288,111,288,114,309,112,321,111,330,106,336,105,343,101,346,102,351,96,354,97,367,96,371,89,387,100,394,101,387,117,379,122,381,130,392,132,396,133,414,132,417,145,428,147,432,151,428,153,424,156,422,164,427,166,424,168,415,171,405,172,395,175,388,176,380,177,370,183,355,187,350,190,340,190,332,197,319,197,311,199,303,195,304,189,299,189,300" href="<?php echo site_url('annonce/rechercheFianarantsoa'); ?>" alt="fianarantsoa"/>
<area shape="poly" coords="179,221,171,223,165,221,160,215,155,217,151,218,146,216,136,215,126,220,119,218,113,232,107,233,105,240,104,252,108,264,112,266,114,277,114,286,123,291,126,292,129,297,146,299,151,297,157,296,160,291,165,294,169,292,178,286,178,276,180,270,181,269,180,263,181,246,183,227,180,222,174,222,171,222" href="<?php  echo site_url('annonce/rechercheAntananarivo'); ?>" alt="antananarivo" />
<area shape="poly" coords="187,92,190,90,192,95,201,97,209,99,218,99,223,103,228,109,231,115,235,122,235,125,232,125,230,131,228,132,219,137,217,137,219,144,218,152,218,156,217,161,222,168,213,182,209,180,206,183,204,183,203,174,195,168,187,166,181,168,181,181,188,194,189,201,181,221,172,222,161,216,159,216,154,219,150,218,137,215,125,220,120,217,114,230,110,233,104,233,90,231,83,235,87,247,88,253,91,260,90,265,79,267,70,263,65,262,62,261,62,249,57,233,56,228,55,215,51,205,68,178,66,165,80,166,85,159,94,154,95,158,103,158,105,159,106,149,117,150,124,148,126,156,130,157,131,149,128,146,129,142,145,131,146,132,146,140,146,144,157,139,152,128,158,123,159,121,162,128,165,126,175,109,173,102,174,98,180,97,180,94,185,94,189,91,190,90,192,94,195,95,196,95" href="<?php echo site_url('annonce/rechercheMahajanga'); ?>" alt="mahajanga"/>
<area shape="poly" coords="199,304,206,293,211,271,222,243,227,221,227,200,234,186,241,162,236,158,233,140,242,134,246,134,247,144,250,142,249,133,250,131,246,128,241,127,235,125,232,125,231,126,228,131,223,135,217,138,218,156,216,162,222,166,220,174,214,181,209,181,206,184,203,182,203,175,197,169,188,167,181,168,181,183,188,196,186,210,180,222,182,226,182,242,181,255,181,272,177,280,173,292,173,296,172,304,182,305,189,299,198,304,203,299,206,293,206,289" href="<?php echo site_url('annonce/rechercheToamasina'); ?>" alt="toamasina"/>
<area shape="poly" coords="257,146,262,134,261,128,253,109,250,103,253,99,248,71,244,60,238,48,236,49,232,43,224,23,221,29,215,34,212,38,212,43,214,47,212,58,209,60,209,65,205,70,198,71,196,74,195,75,196,79,192,82,187,79,182,73,179,77,177,83,183,86,184,91,185,94,190,90,193,95,203,95,210,99,217,99,228,107,229,112,234,120,239,127,247,128,250,133,249,142,247,145,253,153,258,151,257,146,260,139,262,134" href="<?php echo site_url('annonce/rechercheAntsiranana'); ?>" alt="antsiranana" />
</map>
 
 
 
 
 
 </div>
 
 </div>

le code javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
 
<script type="text/javascript" src="<?php echo base_url(); ?>js/js/jquery.js"></script>
 
      <script type="text/javascript">
 
		 jQuery(function($){
 
 
    /* on rajoute une classe overlay */
 
            var $overlay = $('<div class="overlay"></div>');
            $(".map").append($overlay);
 
 
       /*on rajoute une classe tooltip pour la bulle */
 
             $(".map").append('<div class="tooltip">salut les gens</div>');
 
                 $(".tooltip").hide();
 
 
 
 
 
 
 
 
        // tooltip qui suit la souris
 
        $(document).mousemove(function(e){
 
           $(".tooltip").css({
 
            top:e.pageY-$(".tooltip").height()-20,
            left:e.pageX-$(".tooltip").width()/2-10
 
            });
 
         });
 
 
        //liste de sregions
 
        var regions = [
 
                       {name:'Toliara',slug:'toliara'},
                         {name:'Fianarantsoa',slug:'fianarantsoa'},
                           {name:'Antananarivo',slug:'antananarivo'},
                             {name:'Mahajanga',slug:'mahajanga'},
                               {name:'Toamasina',slug:'toamasina'},
                                 {name:'Antsiranana',slug:'antsiranana'}
 
 
 
 
 
                       ];
 
 
 
        // quand la souris passe une zone 
     $(".map area ").mouseover(function(){
      var index = $(this).index();
 
 
 
      // on relie le mouseover avec les liens provinces 
         switch(index)
         {
          // cas tulear
          case 0 :
            $(".toliara").addClass("souligne");
           break ;
 
          case 1 :
            $(".fianarantsoa").addClass("souligne");
           break ;
 
          case 3 :
            $(".mahajanga").addClass("souligne");
           break ;
 
 
          case 4 :
            $(".toamasina").addClass("souligne");
           break ;
 
          case 5 :
            $(".antsiranana").addClass("souligne");
           break ;
 
 
          case 2 :
            $(".antananarivo").addClass("souligne");
           break ;
         }
 
 
 
 
      var left = -index *296-296;
 
 
      $(".tooltip").html(regions[index].name).stop().fadeTo(500,1);
 
 
      $(".map .overlay").css({
 
         backgroundPosition:left+"px 0px"
       });
 
 
     });
 
 
     // quand la souris en dehors de la zone 
     $(".map").mouseout(function(){
 
 
      $("ul li").removeClass("souligne");
 
       $(".map .overlay").css({
 
         backgroundPosition:"296px 0px"
       });
 
        $(".tooltip").stop().fadeTo(500,0);
 
     });
 
 
     // quand on passe sous les liens
 
     $("ul li").mouseover(function(){
 
 
 
        var classe = $(this).attr("class")
 
         if(classe=="antsiranana")
         {
             var listeindex = 5 ; 
         }
         else if (classe=="antananarivo")
         {
           var listeindex = 2 ; 
         }
 
         else if (classe=="toamasina")
         {
           var listeindex = 4 ; 
         }
 
          else if (classe=="mahajanga")
         {
           var listeindex = 3 ; 
         }
 
         else if (classe=="fianarantsoa")
         {
           var listeindex = 1 ; 
         }
 
          else if (classe=="toliara")
         {
           var listeindex = 0 ; 
         }
 
 
        // et on change le fond de la carte 
 
        var leftliste = -listeindex *296-296;
 
          $(".map .overlay").css({
 
         backgroundPosition:leftliste+"px 0px"
       });
 
 
        // on rajoute la classe souligne pour la liste 
         $(this).addClass("souligne");
 
 
      });
 
 
     // quand on lache la souris
 
      $("ul li").mouseout(function(){
 
       // on enleve la coloration du fond
 
        $(".map .overlay").css({
 
         backgroundPosition:"296px 0px"
       });
 
 
 
      // on enleve le soulignementt de la classe 
        $(this).removeClass("souligne");
 
 
 
      });
 
 
 
			 });
 
	 </script>

et le code css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
.map
{
 width: 296px;
 height: 503px;
 
 background: url(../image/annonce/map/map.png)left top no-repeat;
 
 
 position: relative;
 
 
}
 
 
 
 .overlay{
 
 width: 296px;
 height: 503px;
 
 background:  url(../image/annonce/map/map.png) 296px top no-repeat;
 
 position: absolute;
 top: 0;
 left: 0;
z-index: 1;
}
 
.map img
{
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2;
 
}
 
.tooltip{
 
 
 position: fixed;
 border-radius: 5px;
 color: #FFF;
 background: #000;
 padding: 0 10px;
 display: inline;
 top: 0;
 left: 0;
 z-index: 3;
 text-align: center;
 
 
 
}
 
div.grid_2.omega.prefix_3 h4{color:#0619AA;font-size:18px;font-style:italic;text-decoration:underline;position:relative;left:35px;}
div.grid_2.omega.prefix_3{position:relative;top:25px;}
div.grid_2.omega.prefix_3 ul  {list-style-type:none ; line-height:50px;height:454px;}
div.grid_2.omega.prefix_3 ul li a {text-decoration:none;color:#000000;font-size:18px;}
 
.souligne {text-decoration: underline;color: #2A16BF; font-weight: bolder;}

voici l'image sous IE9 et IE8 :
IE9

http://hpics.li/cfafbf3

sous IE8

http://hpics.li/3dc8c62

voilà , je vous remercie d'avance