11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

En train de développer le site officiel d'un illustrateur, je ne sais pas résoudre une question de compatibilité entre deux scripts JS.

Cette page doit présenter une centaine d'illustrations. En conséquence, l'idée est d'utiliser le menu vertical vd1 proposé par Alsacréations, combiné au script de la galerie d'images corrigé et proposé sur le forum:
Galerie d'images.

Le menu fonctionne correctement mais il est ouvert complétement au chargement de la page et je pense que c'est lié aux deux comportements nécessaires à chaque script.
window.onload


Le script du menu:
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}


Le script de la galerie:
function displayPics(selector)
{
	if (document.getElementById(selector)) {

		var photos = document.getElementById(selector);
		// On récupère l'élément ayant pour id galerie_mini
		var liens = photos.getElementsByTagName('a');
		// On récupère dans une variable tous les liens contenu dans galerie_mini
		var big_photo = document.getElementById('big_pict');
		// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

		var titre_photo = document.getElementById('cadre-haut').getElementsByTagName('dd')[0];
		// Et enfin le titre de la photo de taille normale

		for (var i = 0 ; i < liens.length ; ++i)
		// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
		{
			liens[i].onclick = function()
			// Au clique sur ces liens
			{
				big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
				big_photo.alt = this.title; // On change son titre
				titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
				return false; // Et pour finir on inhibe l'action réelle du lien
			};
		}
	}
}
window.onload = function()
{
	displayPics('galerie_mini_01');
	displayPics('galerie_mini_02');
	displayPics('galerie_mini_03');
	displayPics('galerie_mini_04');
};
// Il ne reste plus qu'à appeler notre fonction au chargement de la page


[/i]Je ne suis pas programmeur, alors par avance, je vous remercie de votre aide pour trouver la solution.

Remarque: J'espère avoir fait le bon choix en postant sur ce forum. En effet ce n'est pas du SAV.
Modifié par geba (25 Feb 2006 - 22:26)
Bonsoir et mes excuses,

Avant de poster le message, pour tenter de résoudre ce problème j'ai utilisé le moteur de recherche du forum sans trouver de discussions sur le sujet.

Alors, j'ai parcouru sujet par sujet le forum DOM, JavaScript, ECMAScript et j'ai trouvé plusieurs discussions qui donnent la solution et des compléments d'information. J'ai essayé et ça marche !

Je regroupe ci-dessous ces liens autour du même thème:
Sous menu visibles au chargement
Faire marcher deux javascripts externes
Conflit entre deux scripts
Et enfin:
ibilab.net cité dans un des sujets.

J'ai donc écrit le code si dessous à la fin des deux scripts après avoir supprimé les deux autres lignes window.on load:

window.onload = function()
{
	montre();
	displayPics('galerie_mini_01');
	displayPics('galerie_mini_02');
	displayPics('galerie_mini_03');
	displayPics('galerie_mini_04')
};


Je viens de publier le fichier javascript externe du projet et le fonctionnement est correct.