Superposer <div> sans bloquer les événements

Version imprimable

Bonjour,

je voudrais superposer 2 <div> :
Code:

1 2 3 4 5 6 7 <div id="divdessus" style='z-index:2;height: 640px; width: 840px;position:absolute;'> </div> <div id="divdessous" style='z-index:1;height: 640px; width: 840px;position:absolute;' onmouseover='fctover(this,event)'> </div>
mais je souhaite que la div au dessus ne bloque pas l'évènement "onmouseover" de la div du dessous. comment faire cela ?

Merci

26/08/2009, 11h55
E.Bzz

Bonjour.
J'allais te souhaiter la bienvenue sur DVP, mais vue ta date d'inscription ... enfin : bienvenue en tant que posteur sur Developpez.com ;)

Citation:

Envoyé par apiflo

mais je souhaite que la div au dessus ne bloque pas l'évènement "onmouseover" de la div du dessous. comment faire cela ?

C'est à dire ? Tu veux que les 2 onmouseover se déclenchent simultanément, ou uniquement celui "du dessous" ?

A+
26/08/2009, 12h08
apiflo

Merci pour la bienvenue.

Je souhaite que seule l'évènement "mouseover" de la div du dessous se déclenche. d'ailleurs je ne souhaite pas mettre d'évènements sur la div du dessus.
26/08/2009, 12h21
E.Bzz

Ah ?

Alors je ne comprends pas bien l'intérêt/but/raison d'avoir 2 div, du coup ? :koi:

Tu peux préciser ? Sinon, je crains qu'on loupe quelque chose ...
Que veux-tu obtenir ?

A+

Salut,

Rapidement, regarde de ce coté là :
Code:

1 2 3 <div id="divdessous" style='z-index:1;height:640px; width: 840px;position:absolute;' onmouseover='fctover(this,event)'> <div id="divdessus" style='z-index:2;height: 640px; width:840px;position:absolute;'></div> </div>
edit: le second div n'aura plus besoin d'être positionné.

la <div> du dessus sert à afficher et fond d'écran:
Code:

1 2 3 4 5 6 7 8 9 10 11 <div id="divdessus" style='z-index:2;height: 640px; width: 840px;position:absolute;top:00px;left:00px;Background-color:#FFFFE0;'> </div> <div id="divdessous1" onmouseover='fctover1()' style=' z-index:1;height: 640px; width: 120px;position:absolute;top:00px;left:120px'> </div> <div id="divdessous2" onmouseover='fctover2()' style='z-index:1,height: 640px; width: 120px;position:absolute;top:00px;left:240px'> </div>
Ainsi la div du dessus en premier plan sert à afficher un fond de couleur :#FFFFE0. Les div du dessous sont caché par la div du dessus. mais lorsque l'on survole la divdessous1, on exécute la fonction fctover1() et lorsque l'on survole la divdessous2, on exécute la fonction fctover2().

J'espère avoir été un peu plus claire sur se que je souhaite faire.

De mémoire, le mouseover ne peut fonctionner que si le div du dessus est transparent. En étant opaque le div du dessus cache le celui du dessous, on ne survol donc plus ce div. Enfin, je dis ça, c'est un vague souvenir, je me trompe peut-être.

Utilise plutôt des conteneurs vides, au survol de ceux-ci tu affiches le div (anciennement du dessous) qu'ils contiennent.

Une ébauche :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>afficher des div</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  * {margin:0;padding:0;}
  body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
  .conteneur {background:#111;}
  .zone {width:120px;height:640px;}
  .gauche {float:left;}
  .droit {float:right;}
  #fond {width:100%;}
  #gauche {display:none;background:#222;}
  #droit {display:none;background:#333;}
  </style>
</head>
<body>
  <div id="fond">
    <div class="conteneur zone gauche">
      <div id="gauche" class="zone"></div>
    </div>
    <div class="conteneur zone droit">
      <div id="droit" class="zone"></div>
    </div>
  </div>
  <script type="text/javascript">
  <!--
  var FC = {
    Evenement: {
      evenements: [],
      ajouter: function(elm, evt, fn) {
        var fni = function(e) {                             // prévient le comportement par défaut
          if (fn(e)===false) {                              // false explicitement car peut être undefined en cas de délégation d'évènement
            if (e.preventDefault) { e.preventDefault(); }
            else { e.returnValue = false; }
          }
        };
        if (document.addEventListener) { elm.addEventListener(evt, fni, false); }
        else if (document.attachEvent) { elm.attachEvent("on" + evt, fni); }
        FC.Evenement.evenements.push([elm, evt, fni]);
      }
    }
  }
  FC.Evenement.ajouter(document, "mouseover", function(e) {
    var elm = e.target || event.srcElement;
    if (elm.className.indexOf("conteneur")>-1) {
      if (elm.className.indexOf("gauche")>-1) {
        enfant = document.getElementById("gauche");
      } else if (elm.className.indexOf("droit")>-1) {
        enfant = document.getElementById("droit");
      }
      enfant.style.display="block";
    }
  });
  //-->
  </script>
</body>
</html>