Bonjour,

Cela fait une journée que je passe de forum en forum pour essayer de toruver une solution à mon problème, je vous explique le cas :

Je souhaite faire une sorte de galerie photo qui fonctionne comme décrit :
- Un clique sur une vignette doit appeler une image et la placer dans une div flottante et rendre la div visible
- Au clique sur l'image agrandie, la div en question se masque.

Mon probleme, c'est que je ne peu pas utiliser la même méthode que pour les sous-menu flottant ou une hintbox car ca me ferai créer enormément de div et charger les images a l'interieur pour les afficher en cliquant sur leur vignette...avec une photo ca passe quand il y a 50 de 200ko ca donnce des page de 10 Mo a charger...

Je me suis donc tourner vers ajax qui permet de charger une page dans une div de maniere dynamique, sans rafraichir la page complète.

Voici mon code JS (jabbax modifier pour essayer de convenir à mes besoin) :

// INITIALIZE AJAX ENGINE //////////////////////////////////////
window.onload= function()
{
	getPage("", "div_img");
}

function ajaxObject(){
	if(window.ActiveXObject){ 
		// Support Internet Explorer
		var request = new ActiveXObject("Microsoft.XMLHTTP");
		return request;
	} else 	if(window.XMLHttpRequest){ 
		// Support Firefox, Safari, Opera
		var request = new XMLHttpRequest();
		//request.setRequestHeader("Content-Type", "text/xml;charset=iso-8859-1")
		return request;
	} else {
		// Aucun support
		alert('Désolé, mais votre navigateur ne supporte pas la technologie AJAX. Nous vous conseillons d\'utiliser un de ces navigateurs compatibles : Mozilla Firefox, Microsoft Internet Explorer, Opera.');
		return false;
	}
}

/////////////////// JABBAX.LoadPage  /////////////////////:

function writeHTML(htmlStream, div){
	window.document.getElementById(div).innerHTML = htmlStream;
}


function loadPage(url,div){
	request = ajaxObject();
	request.open("GET", url, true);
	request.send(null);
	if(request.readyState == 4) {
		writeHTML(request.responseText, div);
	} else { 
		return false;
	}
}


function getPage(url,destination){
	page = url;
	div = destination;
	if(page != '')
	{
		// pour ne pas envoyer systématiquement une requête dès que l'utilisateur frappe une touche (délai d'2 seconde)
		setTimeout("loadPage(page,div);",1000); 
		writeHTML('  Veuillez patienter...',div);
		window.document.getElementById(div).display = "block";
	} else {
		window.document.getElementById(div).display = "none";
	}
}

Sauf erreur de ma part ceci devrait afficher la div contenant la page a loader au clique sur la balise porteuse de l'evenement onclick='javascript:getPage($url,$div)' dans mon fichier PHP, et la masquer lorsque j'appelle onclick='javascript:getPage("",$div)' non ? Or ca ne fonction pas le moins du monde (tester sur Opera, IE6.5 et FF3)...j'avoue ne pas comprendre vraiment le JavaScript mais bon, je me suis toujours débrouiller pour comprendre et trouver les erreurs...la impossible de savoir pourquoi ce genre de code fonctionne sans ajax et ne fonctionne pas avec ajax...Si quelqu'un a une piste pour afficher cette div (display : none par defaut dans le css) et la masquer lorsque d'un clique sur un bouton 'masquer' dans cette div je suis preneur ^^

Merci d'avance

Configuration: Windows XP
Opera 9.63
Mozilla FF 3
Internet Explorer 6.5