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