Redimension d'image. Evènement "load"

Invité · 04/06/2008, 11h27

Bonjour,

J'ai trouvé dans ce forum une solution pour redimmensionner mon image mais... je ne suis pas sure que ma fonction redimmensionneImage() soit appelé lors de l'évènement Load.

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
 
<script type="text/javascript">
function redimmensionneImage(){
   document.getElementById('image').style.width = 50;
   document.getElementById('image').style.height = 50;
   }
 
</script>
    <tr>
     <td><a href="download.cgi?id=%($attachment->getId)%" target="new_window">T&eacute;l&eacute;charger</a></td>
     <td><a href="?remove=%($attachment->getId)%">Retirer</a></td>
     <td><img id="image" src="%($BASE_URL)%/laubi/storage/session/%($attachment->getId)%" load=redimmensionneImage();"/></td>
     <td>%($original_filename)%</td>
     <td>%($file_size)%</a></td>
     <td>%($file_description)%</a></td>
    </tr>

Mon image a la taille originale et c'est bien trop gros pour un thumbnail.
Mon code est-il juste ou pas ? Merci.

**SpaceFrog** · 04/06/2008, 11h41

non

Code :

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

load=redimmensionneImage();

une image n'a pas d'evènement laod ..
éventuellement un onload me semble-t-il sous d'anciennes version d'IE ...

il faut lancer la fonction dans le onload du body ..

Invité · 04/06/2008, 11h42

Mais j'en ai déjà un autre...

**SpaceFrog** · 04/06/2008, 11h45

et ? tiens je te donne un " ; " tu vas voir c'est magique

Invité · 04/06/2008, 12h24

aucune idée. J'ai jamais fait de javascript ou presque ! Merci beaucoup ! J'essaye !

Invité · 04/06/2008, 12h30

Voici mon code de la page html

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
 
 <form name="upload_form" id="attachment" method="post" enctype="multipart/form-data" action="upload.cgi" target="UploadFrame" onsubmit="return addAttachment(); redimmensionneImage();">
 
<fieldset>
 <legend>A propos de l'image</legend>
  <table class="formdata_preview" width="100%" border=0>
      <tbody>
	<tr>
          <td colspan="4" valign=top>
          Cliquer sur "parcourir" pour trouver sur votre ordinateur l'image que vous souhaitez mettre &agrave; disposition.
          <div align="right"><span class="small"><a href="javascript:open_window('%($VIEW_URL)%/help/deposit.html');">aide?</a></span></div></td>
        </tr>
        <tr>
          <td width="5%" valign=top>&nbsp;</td>
          <td valign=top>Attacher l'image</td>
          <td colSpan=2 valign=top class="small">&nbsp;</td>
        </tr>
        <tr>
          <td valign=top>&nbsp;</td>
          <td valign=top>
            <input type="file" id="file" name="original_filename" value="" />
  	  </td>
          <td valign=top class="small">Description: 
            <input type="text" name="file_description">
	  </td>
          <td valign=top class="small">
            <input type="submit" name="Submit" value="Charger l'image">
          </td>
        </tr>
      </tbody>
   </table>
 
   <span id="original_filename_error" class="error">&nbsp;</span>
 
   <iframe src="upload.cgi" id="UploadFrame" name="UploadFrame" width="100%" frameborder="0" scrolling="yes" onload="iframe_resize();"></iframe>
 
</fieldset>

Voici le code du header.tem

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
<script type="text/javascript">
 
function redimmensionneImage(){
   document.getElementById('image').style.width = 50;
   document.getElementById('image').style.height = 50;
   }
 
</script>
 
    <tr>
     <td><a href="download.cgi?id=%($attachment->getId)%" target="new_window">T&eacute;l&eacute;charger</a></td>
     <td><a href="?remove=%($attachment->getId)%">Retirer</a></td>
     <td><img id="image" src="%($BASE_URL)%/laubi/storage/session/%($attachment->getId)%" /></td>
     <td>%($original_filename)%</td>
     <td>%($file_size)%</a></td>
     <td>%($file_description)%</a></td>
    </tr>

mais j'avoue que ça ne marche pas bien. J'ai l'impression que le script n'est pas appelé au bon moment. C'est possible ?

**SpaceFrog** · 04/06/2008, 13h44

Tout d'abord, le script dans le head ...

ensuite dans ta balise body :

Code :

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

<body onload="redimmensionneImage()">

Invité · 05/06/2008, 10h14

Envoyé par SpaceFrog

Tout d'abord, le script dans le head ...

ensuite dans ta balise body :

Code :

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

<body onload="redimmensionneImage()">

Oups, j'étais un peu à côté de mes pompes hier.

Alors je dois écrire dans le body (cette fois)

Code :

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

1
2
 
<body onload="load('form.cgi?');redimensionneImage();" >

avec le script dans le header.tem. Je l'ai mis avant la balise HTML, puis après la balise </HEAD>... pour l'instant ça ne marche pas. zut !

**tusssss** · 05/06/2008, 10h47

Le script il faut le mettre entre tes balises <head> et </head> et conserver les balises scripts autour bien sur.

Attention à ton nom de fonction, parfois je lis redimmensionneImage et parfois redimensionneImage, je préfère la seconde version, mais le plus important est qu'elle soit appelée partout de la même manière.

Invité · 05/06/2008, 12h14

oui pour le nom, je viens de changer... la 2ème est, en effet, préférable !

Hum, je reteste et je vous dis. Merci.

Invité · 05/06/2008, 12h40

header.tem

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
    <script type="text/javascript">
      function redimensionneImage(){
       document.getElementById('image').style.width = 50;
       document.getElementById('image').style.height = 50;
       }
 
    </script>
 
  </head>
 
  <body onload="load('form.cgi?');redimensionneImage();" >

view_attachment.tem

Code :

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

1
2
3
4
5
6
7
8
9
 
   <tr>
     <td><a href="download.cgi?id=%($attachment->getId)%" target="new_window">T&eacute;l&eacute;charger</a></td>
     <td><a href="?remove=%($attachment->getId)%">Retirer</a></td>
     <td><img id="image" src="%($BASE_URL)%/laubi/storage/session/%($attachment->getId)%" /></td>
     <td>%($original_filename)%</td>
     <td>%($file_size)%</a></td>
     <td>%($file_description)%</a></td>
    </tr>

J'ai deux problèmes désormais.

1. grâce à une alerte, j'ai pu voir que la fonction n'est appelée que si je rafraichis ma page, mais pas au premier appel.
2. la fonction redimensionneImage() ne redimensionne rien du tout

ça avance tout de même.

Invité · 05/06/2008, 13h01

J'ai modifié un peu mon script qui ne fonctionne toujours pas. L'imagine n'est pas réduite du tout.

Code :

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

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
      function redimensionneImage(){
      //alert("TTTT");
       document.getElementById('image').style.width = '50px';
       document.getElementById('image').style.height = '50px';
       }
 
</script>

Invité · 05/06/2008, 14h31

Je viens de comprendre la cause : l'image que je veux afficher est affichée dans un iframe (je dois customizer du code, je n'ai pas donc pas vraiment le choix sur ce code-là par exemple). Donc le code concernant cette image n'apparait pas dans l'html et donc le javascript ne trouve pas son id... et zut ! J'avoue que je suis un peu perplexe, là, tout de suite...

Invité · 05/06/2008, 14h35

c'est bon j'ai tout trouvé. J'ai été modifié directement l'html de l'iframe.

MILLE MERCIS à tous !

**SpaceFrog** · 05/06/2008, 14h35

Code :

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

document.frames['nomiframe'].document.getElementById('image').style.width = '50px';

Invité · 05/06/2008, 15h31

Super merci. Je laisse comme c'est mais je vois que javascript n'est jamais à cours de solution.

Redimension d'image. Evènement "load"

JavaScript

Partager

Partager