18067 sujets

Questions générales et questions de débutants

[Résolu] Galerie : compléments d'infos

Bonjour à toutes et à tous,

J'ai fait une recherche sur le forum et j'ai rien trouvé qui peuisse m'aider. Voici le code pour compléments d'infos. Si quelqu'un peut répondre...

Dans galerie.htm:

<head>
...
<script type="text/javascript" src="galerie.js"></script>
<link href="styles/galerie.css" rel="stylesheet" type="text/css" />
...
</head>
<body>
<td height="462" valign="top">
	<div id="galerie">
		<div align="center">
			<ul id="galerie_mini">
			<li> 
			<a href="galerie/medium/PICT001.jpg" title="Vue d'ensemble                          "><img src="galerie/mini/PICT001.jpg" alt="Vue d'ensemble                          " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT002.jpg" title="Fa&ccedil;ade - Sud                     "><img src="galerie/mini/PICT002.jpg" alt="Fa&ccedil;ade - Sud                     " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT003.jpg" title="Fa&ccedil;ade - Nord (1/2)              "><img src="galerie/mini/PICT003.jpg" alt="Fa&ccedil;ade - Nord (1/2)              " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT004.jpg" title="Fa&ccedil;ade - Nord (2/2)              "><img src="galerie/mini/PICT004.jpg" alt="Fa&ccedil;ade - Nord (2/2)              " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT005.jpg" title="Toiture - Est                           "><img src="galerie/mini/PICT005.jpg" alt="Toiture - Est                           " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT006.jpg" title="Vue - Ouest                             "><img src="galerie/mini/PICT006.jpg" alt="Vue - Ouest                             " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT007.jpg" title="Pignon - Ouest (1/2)                    "><img src="galerie/mini/PICT007.jpg" alt="Pignon - Ouest (1/2)                    " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT008.jpg" title="Pignon - Ouest (2/2)                    "><img src="galerie/mini/PICT008.jpg" alt="Pignon - Ouest (2/2)                    " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT009.jpg" title="Fenestron - Nord-Est                    "><img src="galerie/mini/PICT009.jpg" alt="Fenestron - Nord-Est                    " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT010.jpg" title="Fouini&egrave;re - Pignon Sud (1/2)     "><img src="galerie/mini/PICT010.jpg" alt="Fouini&egrave;re - Pignon Sud (1/2)     " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT011.jpg" title="Fouini&egrave;re - Pignon Sud (2/2)     "><img src="galerie/mini/PICT011.jpg" alt="Fouini&egrave;re - Pignon Sud (2/2)     " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT012.jpg" title="Fouini&egrave;re - Pignon Nord          "><img src="galerie/mini/PICT012.jpg" alt="Fouini&egrave;re - Pignon Nord          " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT013.jpg" title="Etable - Mangeoires                     "><img src="galerie/mini/PICT013.jpg" alt="Etable - Mangeoires                     " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT014.jpg" title="Etable - Sud-Ouest                      "><img src="galerie/mini/PICT014.jpg" alt="Etable - Sud-Ouest                      " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT015.jpg" title="Fouini&egrave;re - Mur int&eacute;rieur "><img src="galerie/mini/PICT015.jpg" alt="Fouini&egrave;re - Mur int&eacute;rieur " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT020.jpg" title="Vue - Nord Super-Besse (1/2)            "><img src="galerie/mini/PICT020.jpg" alt="Vue - Nord Super-Besse (1/2)            " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT016.jpg" title="Vue - Nord Super-Besse (2/2)            "><img src="galerie/mini/PICT016.jpg" alt="Vue - Nord Super-Besse (2/2)            " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT019.jpg" title="Vue - Sud (1/3)                         "><img src="galerie/mini/PICT019.jpg" alt="Vue - Sud (1/3)                         " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT018.jpg" title="Vue - Sud (2/3)                         "><img src="galerie/mini/PICT018.jpg" alt="Vue - Sud (2/3)                         " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT017.jpg" title="Vue - Sud (3/3)                         "><img src="galerie/mini/PICT017.jpg" alt="Vue - Sud (3/3)                         " width="54" height="40" /></a> 
			<a href="galerie/medium/PICT021.jpg" title="Date de la premi&egrave;re construction "><img src="galerie/mini/PICT021.jpg" alt="Date de la premi&egrave;re construction " width="54" height="40" /></a>
			</li>
			</ul>
			<dl id="photo">
				<dt>Cliquez sur les vignettes pour voir la photo...</dt>
				<dd><img src="galerie/medium/PICT001.jpg" alt="Photo" width="410" height="308" id="big_pict" /></dd>
			</dl>
		</div>
	</div>
</td>
</body>


La CSS

/*--------------------------------*/
/* Styles de la galerie de photos */
/*--------------------------------*/
ul#galerie
{
	margin: 0 ;
	padding: 0 ;
	text-align: center;
}

ul#galerie_mini
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#galerie_mini li a img
{
	margin: 1px 1px ;
	border: 2px ;
	cursor: crosshair;
}

dl#photo
{
	clear: both ;
	margin: 0 auto ;
}

dl#photo dt
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-align:center;
}

dl#photo dd
{
	margin: 0 ;
}

dl#photo img
{
	border: 1px solid #dcb ;
	text-align: center;
}


Et le .js (qui n'a pas changé)

function displayPics()
{
	var photos = document.getElementById('galerie_mini') ;
	// 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('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;


Y'a quelque chose qui m'échappe ou j'ai rien compris... Les navigateurs IE ou FF veulent télécharger les images à chaque clic sur les vignettes Smiley bawling

A bientôt et bonne journée à tout le monde ! Smiley biggrin

[/i]
Modifié par pmt (31 May 2006 - 14:56)
Sujet clos
Aller à