Superposer <div> sans bloquer les événements

**apiflo** · 26/08/2009, 11h37

Bonjour,

je voudrais superposer 2 <div> :

Code html :

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

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

**E.Bzz** · 26/08/2009, 11h55

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

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+

**apiflo** · 26/08/2009, 12h08

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.

**E.Bzz** · 26/08/2009, 12h21

Ah ?

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

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

A+

**franculo_caoulene** · 26/08/2009, 12h26

Salut,

Rapidement, regarde de ce coté là :

Code :

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

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é.

**apiflo** · 26/08/2009, 12h44

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

Code html :

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

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.

**franculo_caoulene** · 26/08/2009, 13h21

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 :

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
<!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>

Superposer <div> sans bloquer les événements

JavaScript

Discussions similaires

Partager

Partager