Déplacer une image

**prgasp77** · 09/05/2007, 23h08

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.

**SpaceFrog** · 10/05/2007, 09h17

Code :

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

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";

???

**E.Bzz** · 10/05/2007, 09h21

Bonjour,

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 :

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

1
2
// On affiche le conteneur de la grande image
big_div.style.display = "block";

A+

**prgasp77** · 10/05/2007, 16h33

Envoyé par SpaceFrog

Code :

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

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.

Envoyé par E.Bzz

Code :

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

1
2
// On affiche le conteneur de la grande image
big_div.style.display = "block";

Ne fonctionne pas non plus.

**E.Bzz** · 10/05/2007, 16h44

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 :

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

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+

**SpaceFrog** · 10/05/2007, 17h50

heu je ne cherchais pas à savoir ce que font tes deux lignes de code ...

je suggérais d'ajouter +"px" à la fin ...

**prgasp77** · 14/05/2007, 21h57

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 ?

**SpaceFrog** · 15/05/2007, 08h45

offsetTop ?

**E.Bzz** · 15/05/2007, 09h15

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+

**marcha** · 15/05/2007, 17h35

Salut,

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

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

Déplacer une image

JavaScript

Discussions similaires

Partager

Partager