11548 sujets

JavaScript, DOM et API Web HTML5

voilà jutilise le script d'alsacreation pour ma galerie cependant si les images se chargent bien, le titre lui refuse de s'afficher n'y connaissant pas grd chose en javascript je demande un coup de main aux connaisseurs..

alors le code javascript:
function displayPics()
{
	var photos = document.getElementById('gauche') ;
	// 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 ayaig_pict qnt pour id bui est récupéré, c'est notre photo en taille normale

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

	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	for (var i = 0 ; i < liens.length ; ++i) {
		// Au clique sur ces liens 
		liens[i].onclick = function() {
			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 = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page


et mon fichier html:
en fait jai deux div qui font comme des colonnes, la gauche ou j'aimerai afficher les miniatures, et la droite pour l'image agrandie...

<div id="gauche" class="gauche">
    
	<h3><dt>Balzac</dt></h3>
	<div class="capture">
	<a href="images/captures/balzac.jpg">
	<img id="miniature" src="images/captures/vignettes/balzac.jpg" alt="college balzac" title="college balzac" />
	</a>
	</div>
	
	<h3><dt>dir</dt></h3>
	<div class="capture">
	<a href="images/captures/dir.jpg">
	<img id="miniature" src="images/captures/vignettes/dir.jpg" alt="dir" title="dir" />
	</a>
	</div>
	
	<h3><dt>dirInfo</dt></h3>
	<div class="capture">
	<a href="images/captures/dirInfo.jpg">
	<img id="miniature" src="images/captures/vignettes/dirInfo.jpg" alt="dirInfo" title="dirInfo" />
	</a>
	</div>
	
</div>
	
	<div class='droite'>

	<dl id='photo'><dt>Balzac</dt>
	<!-- ne pas changer l'id de limage ci dessous-->
		<dd><img id='big_pict' src='images/captures/balzac.jpg' alt='balzac' title='balzac'/></dd>
	</dl>


merci bcp Smiley lol [/i]