Bonjour à tous,
Je me suis lancé dans le javascript, et j'ai un petit probleme ur un script qui retaille les images. En gros, ma boucle se trouvant dans ma fonction, ne passe pas, mais je vous montre les codes:

<script type="text/javascript">
<!--
function retaille() {
var nombre_titre = document.getElementsByTagName('img').lenght;
for(var i = 0; i <= nombre_titre; i++) 
{
document.getElementsByTagName('img')[i].height = 100;
}
}
//-->

<img src="images/grandport.jpg" alt="port" onmouseout="javascript:retaille();"/>
<h3 class="textgauche">Concarneau et sa ville close</h3>
<img src="images/eglise.png" alt="clocher"/>

Donc quand je passe la souris sur l'image, et que j l'enleve apres, rien ne se passe.

Sinon petite question, y'a t il un moyen en javasript pour retrouver les proportions initiale de l'image???

Meri d'avance

Bon bon bon... c'est vraiment du code improvisé que tu as là
Beaucoup de remarques, par conséquent :

1. On écrit javascript:maFonction() lorsque ceci se trouve dans l'attribut href d'un lien, pas lorsque la fonction est appelée dans un évènement (onclick, onmouseover, ...) :

<img src="images/grandport.jpg" alt="port" onmouseout="retaille();"/>

2. On ne peut pas utiliser un indice directement sur la fonction getElementsByTagName()
Par conséquent, la ligne suivante ne peut en aucun cas fonctionner :

document.getElementsByTagName('img')[i].height = 100;

3. Un tableau commence à l'indice 0, ce qui signifie qu'un tableau dont la taille (length) vaut 2 contient un élément possédant l'indice 0, et un second possédant l'indice 1. Par conséquent, dans ton for, tu ne dois pas exécuter la boucle lorsque i est égal au nombre d'élément dans le tableau, mais t'arrêter avant (i < tableau.length et non i <= tableau.length)

4. Tu utilises deux fois la fonction getElementsByTagName en trois lignes, il y a moyen de simplifier cela. Voici comment le faire, en prenant également en compte les deux remarques précédentes :

function retaille() {
	var imgs = document.getElementsByTagName('img');
	for(var i=0; i<imgs.length; i++){
		imgs[i].style.height = 100;
	}
}

5. Au lieu d'agir sur l'attribut html "height", il est plus propre de redimensionner les images en leur appliquant une hauteur différente en CSS, ainsi :

imgs[i].style.height = '100px';

Et donc la fonction finale fonctionnelle :

function retaille() {
	var imgs = document.getElementsByTagName('img');
	for(var i=0; i<imgs.length; i++){
		imgs[i].style.height = '100px';
	}
}

Comme tu peux le constater, c'était vraiment codé à l'arrache et rempli de dysfonctionnement. Peut-être vaudrait-il la peine d'apprendre le javascript de façon plus consciencieuse et sans vouloir bruler les étapes
En plus de cela... tu appliques le redimensionnement sur toutes les images. Tu as bien conscience du fait que cela s'appliquera donc à tout ce qui sera images du design également ? Peut-être faudrait-il identifier les images à redimensionner, par un name, un id, ou encore en les mettant dans une zone spécifique.

Enfin, pour ce qui est de connaitre la hauteur originale d'une image : il y a un attribut javascript, offsetHeight, qui permet de savoir la hauteur qu'occupe un élément dans l'affichage. Par conséquent, il permet de connaitre la hauteur de ton image, mais si elle est redimensionnée en css, cela te retournera sa hauteur forcée. Pour récupérer la hauteur original, le moyen le plus simple est une fonction qui va enlever le redimensionnement en css, calculer la hauteur, puis remettre le redimensionnement. En pratique :

function getOriginalHeight(id){
	var img = document.getElementById(id);
	var fixed_height = img.style.height; //On stock la hauteur imposée
	img.style.height = ''; //On supprime toute info de redimensionnement forcé
	var original_height = img.offsetHeight; //On récupère la hauteur originale de l'image
	img.style.height = fixed_height; //On redonne à l'image la hauteur imposée qu'elle possédait
	return original_height;
}

Bonjour,
Dans les grandes lignes je suis d'accord avec Elias, mais permets-moi de rectifier deux-trois petites choses :

• Je ne suis pas d'accord avec ton 2. On peut parfaitement utiliser un indice directement sur l'appel de la fonction getElementsByTagName. Aucun problème, contrairement à PHP < 5. En effet, document.getElementsByTagName('img')[0] sera interprété par le Javascript comme :
  - Je prend l'objet document.
  - J'appelle sa méthode getElementsByTagName('img').
  - Je prend le premier élément du résultat.
  Mais c'est vrai qu'en pratique, on passe en général par une variable intermédiaire pour éviter un appel répétitif de la fonction - sauf quand on veut un élément à l'indice précis, par exemple la première image, mais c'est rare.
• Ensuite, même si ta fonction est plus performante (et plus "jolie"), la fonction de zydra n'a aucun problème, si ce n'est que tu te trompe un tout petit peu en prenant le document.getElementsByTagName('img').lenght et pas length comme il faudrait
• Ah oui, et par souci d'optimisation, il vaudrait mieux modifier encore un peu la fonction :

  function retaille() {
  	var imgs = document.getElementsByTagName('img');
  	for(var i=0, taille = imgs.length; i<taille; i++)
  		imgs[i].style.height = '100px';
  }
  

  En effet, Javascript est un langage interprété, et donc toute diminution du "niveau de recherche" est un gain de temps (minime en général, mais un peu plus un peu plus un peu... ça fait beaucoup), ainsi la vérification "i<taille" (pour chaque valeur de i) est plus rapide que "i<imgs.length" car dans le premier cas il n'a pas à descendre de niveau - il trouve taille "immédiatement" - tandis que dans le second, il faut d'abord qu'il trouve imgs, puis son attribut length, et ce à chaque itération de la boucle.
  En général, vu la puissance des ordinateurs actuels, c'est plus trop utile, mais sur une grosse application, gagner quelques millisecondes à chaque appel d'une fonction courante, c'est énorme !

Voili, voilou, mon intervention ne sera sans doute pas très utile, mais j'aurais mis mon grain de sel
cbasile06

Merci beaucoup pour vos reponses ultra completes.
Je commence le javascript, comme vous avez pu le constater, et certaines choses que vous me dites:

Citation : Elias

4. Tu utilises deux fois la fonction getElementsByTagName en trois lignes, il y a moyen de simplifier cela. Voici comment le faire, en prenant également en compte les deux remarques précédentes :
Code : JavaScript

1
2
3
4
5
6



function retaille() {
var imgs = document.getElementsByTagName('img');
for(var i=0; i<imgs.length; i++){
imgs[i].style.height = 100;
}
}

Ca je n'avais pas vu le coup du:

var imgs = document.getElementsByTagName('img');
	for(var i=0; i<imgs.length; i++){
		imgs[i].style.height = 100;

Sinon, je veux bien que ca s'applique à toutes les images, e fait c'est pour faire un systeme de miniatures, lorsque l'on passe dessus l'image s'agrandit.

Encore merci pour vos réponses