[DOM] blockage d'un <div> par z-index

**martin-maus** · 22/01/2007, 13h02

Bonjour,

J'ai cassé ma tête pendant 2 jours maintenat sur ce sujet...

J'aimerais trouver une cross-browser solution pour empêcher toute détection des differents elements par mouseover, mouseout et autre sauf celles concernant le <div>-container.

Exemple structure:

Code :

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

1
2
3
4
5
6
7
8
<div id="topcontainer">
<div id="contenu1">
/*tableau mixte avec textes, liens et images*/
</div>
<div id="contenu2">
/*tableau mixte avec textes, liens et images*/
</div>
</div>

Problême: Une "onmouseover" pour topcontainer par exemple se déclenche à chaque survol d'un element présent dans ce <div>.

Pour une bonne fonctionnement j'ai besoin d'une déclenchement uniquement à partir de l'extérieur du topcontainer et non pas quand le pointeur se trouve déja sur topcontaineur mais commence de survoler une élément enfant.

merci d'avance,

Martin

**SpaceFrog** · 22/01/2007, 13h28

a part une focntion qui testerait tous les parents jusqu'au body pour vois si il a un id topcontainer genre while this.ParentNode.id!='topcontainer ...

**martin-maus** · 22/01/2007, 13h52

Merci SpaceFrog

Envoyé par SpaceFrog

a part une focntion qui testerait tous les parents jusqu'au body pour vois si il a un id topcontainer genre while this.ParentNode.id!='topcontainer ...

Sans fontion, Avec IE, j'avais déja obtenu une fonctionnement souhaitée avec contenu1 et contenu2 en z-index: -1 et une div supplementaire (position:relative) superposé en z-index 0 ou sup. (ne marche pas avec p.a. topcontainer z-index:1 et masque en z-index:2):

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="topcontainer" style="position:relative;z-index:-1;height:100px"> 
<div id="contenu1">
/*tableau mixte avec textes, liens et images*/
</div>
<div id="contenu2">
/*tableau mixte avec textes, liens et images*/
</div>
</div>
<div id="masque" style="position:relative;z-index:1;top:-100px;height:100px;">

Malheureusement ça ne marche pas avec Firefox; "topcontainer", "contenu1" et "contenu2" sont invisiblement masqués par "masque".
Avec Firefox ça marche uniquement avec "topcontainer" et "masque" au meme z-index (obligatoirement 0 ou positive).
Firefox semble de cacher tout élement en z-index négatif).

Es-ce-qu'on pourrait trouver la solution dans ce sens là aussi?

Merci, Martin

**Macintoc** · 22/01/2007, 17h12

Code :

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

1
2
3
4
5
6
7
function(evt){
    if(evt){//DOM
        if(evt.target.id!='topcontainer') evt.stopPropagation()
    }else{//IE
        if(window.event.relatedTarget.id!='topcontainer') window.event.cancelBubble = true
    }
}

Pour la partie IE, je suis pas sur.

**martin-maus** · 22/01/2007, 21h49

merci Macintoc,

Je vais essayer cette solution. En plus, je viens de découvrir un autre discussion comparable sur ce forum: http://www.developpez.net/forums/sho...d.php?t=267283

a+

**martin-maus** · 23/01/2007, 01h44

Inspiré par l'autre thread, j'ai pu developper ceci:

Code :

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
57
58
59
60
61
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
var timer = null;
var i = 0;
var c = new Array();
var open_div = "";
 
function fover(ref)
{
  i=i+1;
  c[i] = ref.getAttribute('id');
  if (c[i-1]) { /*déja une div détecté*/
	 prec_c = document.getElementById(c[i-1]);
	 prec_c_id = prec_c.getAttribute('id');
	 if(c[i] != prec_c) {
		prec_c.childNodes[1].style.height = "0px";
		ref.childNodes[1].style.height = "100px";
		open_div = ref.childNodes[1].getAttribute('id');
	}
  }
}
//-->
</script>
 
</head>
 
<body>
 
<div style="border: 1px solid #AAAAAA" id="Div1" onmouseover="fover(this)">
 <div id="container1-0" >titre 1</div>
 <div id="container1-1" style="height:0px">
  <table id="tableau" border="1" cellspacing="0" cellpadding="0" >
  <tr>
  <td>&nbsp;bla bla bla</td>
  <td>&nbsp;bla bla bla</td>
  <td>&nbsp;bla bla bla</td>
  </tr>
  </table>
 </div>
</div><br>
<div style="border: 1px solid #AAAAAA" id="Div2" onmouseover="fover(this)">
 <div id="container2-0">titre 2</div>
 <div id="container2-1" style="height:0px">
  <table border="1" cellspacing="0" cellpadding="0" >
  <tr>
  <td>&nbsp;bla bla bla</td>
  <td>&nbsp;bla bla bla</td>
  <td>&nbsp;bla bla bla</td>
  </tr>
  </table>
 </div>
</div>
 
</body>
 
</html>

ceci marche bien pour IE mais pas trop pour Firefox

En plus, je cherche une moyen de fermer le dernier container ouvert si le pointeur ce trouve ni sur un autre container , ni sur le dernier...

Martin

[DOM] blockage d'un <div> par z-index

JavaScript

Vue hybride

Discussions similaires

Partager

Partager