Aide avec un script réduction image !!! [Résolu]

Signaler
Messages postés
71
Date d'inscription
jeudi 31 janvier 2008
Statut
Membre
Dernière intervention
6 mars 2015
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour, je fait appel a vous car j'ai un petit problème de code.
J'ai décidé d'alléger mon site et j'ai commencer par exporter tout mes code en .js externe des page.
Cependant j'avais fait un script qui réduisait les image avant leurs affichage.
<script type="text/javascript">
document.image1.width = Math.round(larg/coeff);
document.image1.height = Math.round(haut/coeff);
</script>

Puis j'ai voulu le rendre automatique pour éviter d'avoir a le mettre sous chaque images.
Voila le code que j'ai écrie mais rien ne marche !!!!!
function reduc_image(name){
for (i=0;i<2;i++) {
name = image[i];
}
    document.getElementsByName(name).width = Math.round(larg/coeff);
    document.getElementsByName(name).height = Math.round(haut/coeff);
}


Le code est dans un fichier externe(.js), ce que je voudrais s'est modifier la taille de l'image.
Toutes mes image s'appel respectivement image1, image2, image3,...
Dans l'espoir d'être claire.

Merci d'avance.

12 réponses

Messages postés
1764
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
27 juin 2020
79
la variable name n'est pas bien defini

function reduc_image(){
for (i=0;i<2;i++) {
var name = 'image'+i;
document.getElementById(name).width = Math.round(larg/coeff);
document.getElementById(name).height = Math.round(haut/coeff);
}
}
Messages postés
15814
Date d'inscription
jeudi 8 août 2002
Statut
Modérateur
Dernière intervention
4 mars 2013
99
Salut,

La fonction getElementsByName te renvoie un tableau d'éléments et non un seul élément. Pour ce que tu cherche à faire, je te conseille plutôt de passer par un getElementById en lui spécifiant l'id de l'image à redimensionner.
______________________________________

AVANT de poster votre message, veuillez lire, comprendre, et appliquer notre réglement
Messages postés
71
Date d'inscription
jeudi 31 janvier 2008
Statut
Membre
Dernière intervention
6 mars 2015

cela ne résous pas mon problème, l'image reste aussi grande.


Le nouveau scrip est :

function reduc_image(){
for (i=0;i<2;i++) {
name = image[i];
}
document.getElementById (name).width = Math.round(larg/coeff);
    document.getElementById (name).height = Math.round(haut/coeff);
}


merci de tas réponse rapide.
Messages postés
1764
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
27 juin 2020
79
function reduc_image(id_de_limage){
document.getElementById(id_de_limage).style.width = Math.round(larg/coeff);
document.getElementById(id_de_limage).style.height = Math.round(haut/coeff);
} 


la boucle for ne servait a rien ou alors elle est mal construite car si je me trompe pas tu doit parcourir toutes images concerné et il y avait un espace en trop (document.getElementById (name))

il manque aussi une valeur c'est le coeff
Messages postés
71
Date d'inscription
jeudi 31 janvier 2008
Statut
Membre
Dernière intervention
6 mars 2015

Si la boucle for sert a quelque chose car toute mes images se nomme (id) image1, image2, image3, ...
donc en faisan une boucle avec for pour incrémenter i de 1 a chaque passage j'obtiens bien un id pour mes images : image1, image2, image3,...

Je te remercie de ton aide mais pourrais tu me dire ce qui ne vas pas ?

Je pense avoir trouvé ! je teste et vous redit sa.
Merci de votre aide.
Messages postés
71
Date d'inscription
jeudi 31 janvier 2008
Statut
Membre
Dernière intervention
6 mars 2015

Salut Kazma, la correction que tu mas indiqué est l'erreur que je pensais avoir trouvé.
Cependant aucun changement, donc je fait encore une fois appel a vous membre de CS.
le code est le suivant :
function reduc_image(){
for (i=0;i<10;i++) {
name='image'+[i];
}
document.getElementById(name).style.width=Math.round(larg/coeff);
        document.getElementById(name).style.height=Math.round(haut/coeff);
}

Messages postés
1764
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
27 juin 2020
79
oui mais dans ce que tu met tu fait toujour l'erreur si la variable la bonne syntaxe est

var name = 'image'+i;


le mot var sert a declarer une variable local

pour te rendre compte de ton erreur mets une alert pour voir ce que retourne la variable

pour ton exemple

function reduc_image(){
    for (i=0;i<10;i++) {
        name='image'+[i];
alert(name)
    }
    document.getElementById(name).style.width=Math.round(larg/coeff);
        document.getElementById(name).style.height=Math.round(haut/coeff);
}
Messages postés
71
Date d'inscription
jeudi 31 janvier 2008
Statut
Membre
Dernière intervention
6 mars 2015

Correction effectué mais cela ne change pas mon problème.
Mes image ne se réduisent pas !
Probablement l'ai-je mal appelé dans la page.
je l'ai mis dans la balise dans l'attribut "OnLoad=..."

donc mon code est le suivant:
function reduc_image(){
for (i=0;i<10;i++) {
name='image'+i;
}
document.getElementById(name).style.width=Math.round(larg/coeff);
        document.getElementById(name).style.height=Math.round(haut/coeff);
}
Messages postés
71
Date d'inscription
jeudi 31 janvier 2008
Statut
Membre
Dernière intervention
6 mars 2015

Bon bas s'est bon j'ai fini par trouver le problème.
Je vous remercie de votre coup de main.

Kangouroux
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
ce qui serait sympa c'est qu'après avoir était aidé tu nous fasses part de ta solution et que tu la mettes en Réponse acceptée, cela pourra en aidé d'autres...

;O)
Messages postés
71
Date d'inscription
jeudi 31 janvier 2008
Statut
Membre
Dernière intervention
6 mars 2015

En faite, la correction il y en a deux.
La première supprimer .style de mon argument getElementById.
Car cela ne fonctionne pas du tout.
Ensuite remettre mes deux argument dans la boucle For (car on sort de la boucle que quand I a atteint le nombre d'image !!!)

En tout cas merci beaucoup pour votre aide.

function reduc_image(){
for (i=1;i<=15;i++) {
       name='image'+i;
       document.getElementById(name).width=Math.round(larg/coeff);
    	       document.getElementById(name).height=Math.round(haut/coeff);
}
}


P.S : Après teste "i" et "[i]" sa ne change que la syntaxe rien d'autre.
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
P.S : Après teste "i" et "[i]" sa ne change que la syntaxe rien d'autre.
pas exactement mais le résultat est le même, je dirais que tu mets le contenu d'un tableau qui vaut effectivement i...

La première supprimer .style de mon argument getElementById.
cela dépendra de la façon de déclarer, ou non, la hauteur et la largeur des images au départ...

Haut et Larg définis dans le CSS (style)
- appel height et width -> ne marche pas
- appel style.height -> MARCHE
Haut et Larg définis, ou non, dans balises avec les attributs
- les deux MARCHENT
...donc autant mettre style.height, avec l'unité px...

Enfin, si je peux me permettre plusieurs remarques sur le bout de code

- Math.round(larg/coeff) doit être calculé en dehors de la boucle, pourquoi le recalculer à chaque fois, idem pour Math.round(haut/coeff).

- document.getElementById(name) pourquoi ne pas utiliser la collection document.images mise à disposition par les navigateurs ?

- for (i=1;i<=15;i++) {, ce genre de boucle, avec bornes définies n'est pas top, si tu rajoutes ou enlève des images il te faut retoucher les valeurs de la boucle.

j'aurais fait un truc dasn ce style
//-------------------
function Resize_IMG(){
  //-- Nouvelles valeurs
  var Larg = Math.round( larg/coeff);
  var Haut = Math.round( haut/coeff);
  //-- Indice de depart
  var Ind  = 1;
  //-- Les images doivent avoir un name ou une id
  while( Obj = document.images[ "image" +Ind++]){ // affectation, incrementation
      Obj.style.height = Haut +"px";
      Obj.style.width  = Larg +"px";
    }
  }
}

en gros ....

/color;O)