Déplacer une image

Version imprimable

Déplacer une image

Bonjour à tous.

Je cherche à déplacer une image, voici comment je m'y suis pris :

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

Code:

1
2
big_div.style.top = mini_img.style.top + mini_img.style.height + 50+"px";
        big_div.style.left = (screen.availWidth - big_img.style.width)/2+"px";

???

10/05/2007, 09h21
E.Bzz
Bonjour,

Citation:

Envoyé par prgasp77

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

Le côté aléatoire des fonctionnements "par défaut" ?
Code:

1 2 // On affiche le conteneur de la grande image big_div.style.display = "block";
A+
10/05/2007, 16h33
prgasp77
Citation:
Envoyé par SpaceFrog

Code:

1 2 big_div.style.top = mini_img.style.top + mini_img.style.height + 50+"px"; big_div.style.left = (screen.availWidth - big_img.style.width)/2+"px";

???
La première ligne est sensée placer le conteneur un peu sous l'image survolée ; la seconde centrer horizontalement le conteneur. Il n'en est rien.
Citation:
Envoyé par E.Bzz

Code:

1 2 // On affiche le conteneur de la grande image big_div.style.display = "block";
Ne fonctionne pas non plus.
10/05/2007, 16h44
E.Bzz
Les syntaxes qu'on t'a données sont les bonnes, en tous cas les + compatibles.
Par contre, es-tu sûr que tes calculs fonctionnent ?
Par exemple :
Code:

1 2 3 4 alert(screen.availWidth); alert(big_img.style.width); big_div.style.left = (screen.availWidth - big_img.style.width)/2; alert(big_div.style.left);
est-ce que les 2 1° alert() t'affichent les bonnes valeurs (et sans le "px", sinon le calcul est pas possible), et que t'affiche la 3° ?

A+
10/05/2007, 17h50
SpaceFrog

heu je ne cherchais pas à savoir ce que font tes deux lignes de code ... :roll:
je suggérais d'ajouter +"px" à la fin ...
14/05/2007, 21h57
prgasp77

Ho, avec ton nouvel avatar, je ne t'ai aps reconnu SpaceFrog :?

Pardon pour le malentendu. J'avais initialement fais sans les "px", mais trouvant cet ajout sur pas mal d'exemple, je les ai rajoutés (sans résultat).

Je ne parviens pas à avoir accès aux valeurs mini_img.style.top, mini_img.style.heignt, mini_img.style.left et mini_img.style.width :(
Pour le display, je ne parviens pas à le modifier non plus.

Quelqu'un pour m'aider ?
15/05/2007, 08h45
SpaceFrog

offsetTop ?
15/05/2007, 09h15
E.Bzz

Citation:

Envoyé par prgasp77

Je ne parviens pas à avoir accès aux valeurs mini_img.style.top, mini_img.style.heignt, mini_img.style.left et mini_img.style.width :(

Il faut qu'ils soient définis en "intra-ligne" (dans le tag), pour pouvoir y accéder via JS, non ?

A+
15/05/2007, 17h35
marcha

Salut,

Qu'est-ce que te donne alert(mini_img.style.top)

je pense que tu dois avoir un "px" parasite à la fin, non ?