Bonjour à tous.

Je cherche à déplacer une image, voici comment je m'y suis pris :
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
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>titre de la page</title>
    <style type="text/css">
    /* <!-- <![CDATA[ */
      img {
        z-index: 1;
      }
      #content {  
        z-index: 4;
        display: none;
      }
    /* ]]> -->*/
    </style>
    <script type="text/javascript">
    // <!-- <![CDATA[
      function full(id)
      {
        // init
        var mini_img = document.getElementById('image_'+id);
        var big_img = document.images[0];
        var big_div = document.getElementById('content');
 
        // On modifie la grande image
        big_img.src = mini_img.src;
 
        // On repositionne le conteneur de la grande image
        big_div.style.top = mini_img.style.top + mini_img.style.height + 50;
        big_div.style.left = (screen.availWidth - big_img.style.width)/2;
 
        // On affiche le conteneur de la grande image
        big_div.style.display = "";
      }
    // ]]> -->
    </script>
  </head>
  <body>
 
  <div id="content">
    <img src="" alt="" />
  </div>
   <img src="./image0.jpg" alt="" onmouseover="full(0);" id="image_0" width="200" />
   <img src="./image1.jpg" alt="" onmouseover="full(1);" id="image_1" width="200" />
   <img src="./image2.jpg" alt="" onmouseover="full(2);" id="image_2" width="200" />
   <img src="./image3.jpg" alt="" onmouseover="full(3);" id="image_3" width="200" />
   </body>
</html>

Bien entendu ça-marche-pas (sinon je vous casserais pas les coquilles-q).
  • Le conteneur (div) n'est pas déssiné ("display: none" constant)
  • Si je fais déssiner le conteneur dès le début (pas de "display: none" dans le style), l'image est bien modifiée mais elle n'est pas déplacée (elle reste dans le coin supérieur gauche)
  • Les variables suivantes sont nulles ou NULL (je ne sais pas, mais les alert() n'affichent rien) : mini_img.style.top, mini_img.style.height, big_img.style.width


Quelqu'un pourrait expiquer ce phénomène fort génant.
Mile mercis.