Redimension d'image. Evènement "load"

Version imprimable

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:

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.

04/06/2008, 11h41
SpaceFrog

non

Code:

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 ..
04/06/2008, 11h42
Invité

Mais j'en ai déjà un autre... :?
04/06/2008, 11h45
SpaceFrog

et ? tiens je te donne un " ; " tu vas voir c'est magique ;)
04/06/2008, 12h24
Invité

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

Voici mon code de la page html

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

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 ?

04/06/2008, 13h44
SpaceFrog

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

ensuite dans ta balise body :

Code:

<body onload="redimmensionneImage()">
05/06/2008, 10h14
Invité
Citation:

Envoyé par SpaceFrog

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

ensuite dans ta balise body :

Code:

<body onload="redimmensionneImage()">

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

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

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 !
05/06/2008, 10h47
tusssss

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.
05/06/2008, 12h14
Invité

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

Hum, je reteste et je vous dis. Merci.

header.tem

Code:

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:

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.

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

Code:

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>

05/06/2008, 14h31
Invité

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... :?
05/06/2008, 14h35
Invité

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

MILLE MERCIS à tous ! :yaisse2:
05/06/2008, 14h35
SpaceFrog

Code:

document.frames['nomiframe'].document.getElementById('image').style.width = '50px';
05/06/2008, 15h31
Invité

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