connaitre toutes les images suivantes avec le dom

[_Alex]

Bonjour,

je fais un petit script pour "feuilleter des images" :
http://www.alexandreleray.com/_trucs/fe ... est_2.html

celui-ci marche à peu prêt mais j'essayer de l'améliorer pour avoir plusieurs séries d'images dans une même page. La méthode consiste à placer des div avec la classe "feuilletage", ensuite on balance toutes les images dedans.

Dans un premier temps le script repère tous les éléments avec la classe "feuilletage", puis il donne des attributs de style et de comportement (rollover rollout) aux images pour qu'elles se chevauchent. ça donne un truc du style :

Code : Tout sélectionner

function vignettes(){
	serie = document.getElementsByClassName("feuilletage"); // repère tous les éléments de classe feuilletage
	for (var i=0;i<serie.length;i++){
		images = serie[i].getElementsByTagName("img"); // liste des images du document
		for (var j=0;j<images.length;j++){
			images[j].setAttribute("style","position:absolute"); // affecte l'attribut
			images[j].setAttribute("onmouseover","decaler(this);"); // affecte l'attribut
			images[j].setAttribute("onmouseout","retablir(this);"); // affecte l'attribut
			images[j].style.left=(j*decalage)+margeGauche+"px";
		}
	}
}

ensuite lorsqu'on va en rollover sur une image, le script modifie avec le dom la position des images suivantes.

J'aimerais maintenant que lorsqu'on va en rollover sur une image il répercute un changement de position sur les suivantes du div conteneur. Idem en rollout pour rétablir. Problème j'ai essayé un truc du style :

Code : Tout sélectionner

function decaler(imageActuelle){ // décaler les images suivantes
	var lImage = imageActuelle;
	while(lImage.nextSibling.tagName == "img") {
lImage.nextSibling.left=parseInt(lImage.style.left)+lImage.nextSibling.width-decalage+"px"
			lImage = lImage.nextSibling;
	 }
}

Mais nextSibling me renvoit un node de type Text.
Donc comment faire ? Précision superflue sans doute mais c'est HYPER urgent

Merci

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en; rv:1.8.0.4) Gecko/20060613 Camino/1.0.2 (MultiLang)

[chBok]

C'est possible d'obtenir un objectText comme type de nextSibling (ou autre attribut similaire). En effet, il suffit d'un simple espace entre les éléments HTML pour que l'arbre du DOM génère un noeud text.

Ouvre n'importe qu'elle page Web avec l'inspecteur DOM pour vérifier.

Tu devrais boucler sur le nextSibling jusqu'à atteindre une valeur null, c'est plus propre, et tu ne traites que les images trouvées.

[_Alex]

OK j'ai réussi, mais je vais adapter ta technique pour "purifier" le code car j'ai dans ma page HTML enlevé tous les retours chariot donc voici mon code pour ceux que ça interesse :

Code : Tout sélectionner

// JavaScript Document
document.getElementsByClassName = function (needle) {
	var my_array = document.getElementsByTagName("*");
  	var retvalue = new Array();
  	var i;
  	var j;
  	for (i = 0, j = 0; i < my_array.length; i++) {
    	var c = " " + my_array[i].className + " ";
    	if (c.indexOf(" " + needle + " ") != -1) retvalue[j++] = my_array[i];
  	}
  	return retvalue;
}

var margeGauche = 50; //marge de départ
var decalage = 50; //decalage des images

function decaler(imageActuelle){ // décaler les images suivantes
	var lImage = imageActuelle.nextSibling;
	while(lImage.tagName == "IMG"){
		lImage.style.left=parseInt(lImage.style.left)+imageActuelle.width-decalage+"px";
		lImage = lImage.nextSibling;
	}
}

function retablir(imageActuelle){ // rétablir les images suivantes
	var lImage = imageActuelle.nextSibling;
	while(lImage.tagName == "IMG"){
		lImage.style.left=parseInt(lImage.style.left)-imageActuelle.width+decalage+"px";
		lImage = lImage.nextSibling;
	}
}

//initialisation des vignettes
function vignettes(){
	serie = document.getElementsByClassName("feuilletage"); // repère tous les éléments de classe feuilletage
	for (var i=0;i<serie.length;i++){
		images = serie[i].getElementsByTagName("img"); // liste des images du document
		for (var j=0;j<images.length;j++){
			images[j].setAttribute("style","position:absolute"); // affecte l'attribut
			images[j].setAttribute("onmouseover","decaler(this);"); // affecte l'attribut
			images[j].setAttribute("onmouseout","retablir(this);"); // affecte l'attribut
			images[j].style.left=(j*decalage)+margeGauche+"px";
		}
	}
}

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en; rv:1.8.0.4) Gecko/20060613 Camino/1.0.2 (MultiLang)