Récupérer index DOM

**CharleLéo** · 26/10/2017, 19h20

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>

**SpaceFrog** · 27/10/2017, 08h41

https://jsfiddle.net/c8etdxju/7/

**CharleLéo** · 27/10/2017, 10h57

Tout Simplement.

Merci beaucoup

Cdt

**SpaceFrog** · 27/10/2017, 11h52

Une autre possibilité plus "simple" et maintenable serait de passer par des data sur les areas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 <area shape="poly" coords="370, 867, 382, 865, 384, 874, 370, 878" data-index="0"/>
        <area shape="poly" coords="230, 787, 245, 795, 240, 803, 223, 794" data-index="1"/>
        <area shape="poly" coords="348, 697, 362, 695, 363, 707, 349, 708" data-index="2"/>