Bonjour,

Je galère depuis un moment. J'ai deux onglet, dans chaque onglet une image différente. Chaque image possède des area.
Mon pb est le suivant : je désire récupérer l'index de l'area au survol de la souris. Sur le premier onglet, je fais un alerte sur chaque area, cela fonctionne bien.

Sur le deuxième onglet, donc sur ma deuxième image, lorsque je survole un area, l'alerte affiche l'index correspondant à un area de l'image du premier onglet, alors que je n'ai pas défini de fonction mouseouver sur la class correspondante (mapter_midipy)
Avez vous une idée pour y remédier ?

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <link rel="stylesheet" href="cartecss.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
                $('.mapter_tlse_environ area').mouseover(function(){
                                        var index=$(this).index();
                                        alert(index);
                        });
  } );
  </script>
</head>
<body>
 
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Région Midi-Pyrénées secteur Toulouse et environ</a></li>
		<li><a href="#tabs-2">Région Midi-Pyrénées secteur Nord-Est</a></li>
	</ul>
		<div id="tabs-1">
					<div class="mapter_tlse_environ">
						<img src="ToulouseIntra.jpg" id="map-image1" alt="" style="vertical-align: middle; text-align: center;" alt="" usemap="#map"/> 
						<map name="map"> 
							<area shape="poly" coords="370, 867, 382, 865, 384, 874, 370, 878" />
							<area shape="poly" coords="230, 787, 245, 795, 240, 803, 223, 794" />
							<area shape="poly" coords="348, 697, 362, 695, 363, 707, 349, 708" />
							<area shape="poly" coords="359, 598, 375, 610, 368, 618, 352, 606" />
							<area shape="poly" coords="86, 359, 96, 362, 91, 373, 81, 368" />
							<area shape="poly" coords="140, 389, 147, 391, 142, 399, 135, 394" />
							<area shape="poly" coords="183, 409, 180, 416, 173, 413, 177, 405" />
							<area shape="poly" coords="207, 418, 214, 421, 208, 432, 199, 425" />
							<area shape="poly" coords="238, 438, 234, 445, 229, 441, 233, 435" />
						</map>
					</div>
		</div>
		<div id="tabs-2">
			<div class="mapter_midipy">
				<img src="MidiPy.jpg" id="map-image2" style="width: 2352px; max-width: 100%; height: auto;" alt="" usemap="#map" />
				<map name="map">
					<area shape="poly" coords="45, 24, 282, 23, 280, 264, 43, 261" />
				</map>
			</div>
		</div>
	</div>
</body>
</html>