Aide javascript

Bonsoir je suis un étudiant du Québec. Je suis un cours élémentaire de création de site web. Je doit réaliser un site internet dans lequel je doit insérer une galerie photos que j'aimerai faire conviviale en javascript avec le tutoriel suivant. J'ai insérer les codes nécessaire dans ma page HTML et j'ai créer la page javascript. Cela fonctionne presque car pour l'instant mes images s'affiche en pop-up et je n'arrive pas à comprendre comment adapter le code javascript pour que le tout fonctionne quand on clique sur les minis pour faire afficher une photos en taille normale dans l'encadré.

Or j'ai essayé longuement de comprendre par moi-même sur le forum mais la je désespère.

Quelqu'un peut t-il me dire en visitant le tutoriel ce que je doit modifier dans le code javascript pour le faire fonctionner, je peut vous envoyer ce que j'ai fait par courriel aussi

Merci d'avance !

Hello,

Normalement avec ce tuto il n'y a pas de popups, les grandes photos s'affichent dans le cadre sous les minis.

Peux-tu soit nous donner un lien vers ta page en ligne, soit tes codes HTML, CSS et Javascript ?

D'accord voici premièrement le code HTML de la galerie :

<div id="galerie">
<ul id="galerie_mini">
<li><a href="images/gallerie/gevac_01.jpg" title="Exercice evacuation de telesiege"><img src="images/gallerie/minis/evac_01.jpg" alt="Exercice evacuation de telesiege" /></a></li>
<li><a href="images/gallerie/gevac_02.jpg" title="Exercice evacuation de telesiege"><img src="images/gallerie/minis/evac_02.jpg" alt="Exercice evacuation de telesiege" /></a></li>
<li><a href="images/gallerie/gevac_03.jpg" title="Exercice evacuation de telesiege"><img src="images/gallerie/minis/evac_03.jpg" alt="Exercice evacuation de telesiege" /></a></li>
<li><a href="images/gallerie/gevac_04.jpg" title="Exercice evacuation de telesiege"><img src="images/gallerie/minis/evac_04.jpg" alt="Exercice evacuation de telesiege" /></a></li>
<li><a href="images/gallerie/gevac_05.jpg" title="Exercice evacuation de telesiege"><img src="images/gallerie/minis/evac_05.jpg" alt="Exercice evacuation de telesiege" /></a></li>


</ul>


<dl id="photo">
<dt>Exercice evacuation de telesiege</dt>
<dd><img id="big_pict" src="images/gevac_01.jpg" alt="Exercice evacuation de telesiege" /></dd>

</dl>
</div>



Maintenant le CSS :

@charset "utf-8";
/* CSS de la galerie photos seulement (module photos)*/

div#galerie
{
width: 620px ;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;
}

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

ul#galerie_mini li
{
float: left ;
}

ul#galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
}

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

dl#photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}

dl#photo dd
{
margin: 0 ;
}

dl#photo img
{
border: 1px solid #dcb ;
}



Finalement le fameux javascript :

// JavaScript Documentfunction displayPics()
{
var photos = document.getElementById('images/gallerie') ;
// 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('images/gallerie/minis') ;
// 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.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

Malheureusement mon sera seulement en ligne demain lorsque je remmeterai mon site à mon prof

Ouh, je regarde ça, mais en attendant merci de mettre le code en forme en utilisant la balise code en bas, quand tu édites ton message.

Ca doit donner un truc comme ça
c'est beaucoup plus facile à lire

Modifié par mistike (18 Dec 2008 - 06:10)

[quote=jimbo_t]D'accord voici premièrement le code HTML de la galerie :

<div id="galerie">
	<ul id="galerie_mini">
		<li><a href="images/gallerie/gevac_01.jpg" title="Exercice evacuation de telesiege"><img src="images/gallerie/minis/evac_01.jpg" alt="Exercice evacuation de telesiege" /></a></li>
[...]
	
	<dl id="photo">
		<dt>Exercice evacuation de telesiege</dt>
		<dd><img id="big_pict" src="images/gevac_01.jpg" alt="Exercice evacuation de telesiege" /></dd>

	</dl>
</div>

// JavaScript Documentfunction displayPics()
{
	var photos = document.getElementById('images/gallerie') ;
	// On récupère l'élément ayant pour id galerie_mini

[...]

	var big_photo = document.getElementById('images/gallerie/minis') ;
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

Attention, dans 'getElementById' tu passes des morceaux de chemin. Or c'est bien l'ID de ton élément que tu dois passer. Le même ID que ce que tu as mis par exemple ici : <ul id="galerie_mini">.

Cet ID permet d'identifier de façon UNIQUE un élément de ta page. C'est donc grâce à lui que tu vas pouvoir récupérer cet élément dans ton code JS pour lui appliquer un traitement quelconque. Regarde bien les commentaires du javascript, tu comprendras mieux.

Essaye de corriger ça, on verra ensuite si ça ne marche toujours pas.

Oups désoler

D'accord voici premièrement le code HTML de la galerie :

<div id="galerie">
<ul id="galerie_mini">
<li><a href="images/gallerie/gevac_01.jpg" title="Exercice evacuation de telesiege"><img src="images/gallerie/minis/evac_01.jpg" alt="Exercice evacuation de telesiege" /></a></li>
<li><a href="images/gallerie/gevac_02.jpg" title="Exercice evacuation de telesiege"><img src="images/gallerie/minis/evac_02.jpg" alt="Exercice evacuation de telesiege" /></a></li>
<li><a href="images/gallerie
/gevac_03.jpg" title="Exercice evacuation de telesiege"><img src="images/gallerie/minis/evac_03.jpg" alt="Exercice evacuation de telesiege" /></a></li>
<li><a href="images/gallerie/gevac_04.jpg" title="Exercice evacuation de telesiege"><img src="images/gallerie/minis/evac_04.jpg" alt="Exercice evacuation de telesiege" /></a></li>
<li><a href="images/gallerie/gevac_05.jpg" title="Exercice evacuation de telesiege"><img src="images/gallerie/minis/evac_05.jpg" alt="Exercice evacuation de telesiege" /></a></li>


</ul>


<dl id="photo">
<dt>Exercice evacuation de telesiege</dt>
<dd><img id="big_pict" src="images/gevac_01.jpg" alt="Exercice evacuation de telesiege" /></dd>

</dl>
</div>

Maintenant le CSS :

@charset "utf-8";
/* CSS de la galerie photos seulement (module photos)*/

div#galerie
{
width: 620px ;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;
}

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

ul#galerie_mini li
{
float: left ;
}

ul#galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
}

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

dl#photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}

dl#photo dd
{
margin: 0 ;
}

dl#photo img
{
border: 1px solid #dcb ;
}

Finalement le fameux javascript :

// JavaScript Documentfunction displayPics()
{
var photos = document.getElementById('images/gallerie') ;
// 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('images/gallerie/minis') ;
// 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.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

D'accord je doit avouer que étant plutôt débutant dans ce type de codes je suis perdus dans le JS mais je vais tenter encore de relire ...

<ul id="galerie_mini">

==> tu as un *élément* de type ul. En lui donnant l'ID "galerie_mini" en fait tu lui donnes un nom. Ce nom est unique et te permet de le reconnaitre parmi tous les autres éléments de ta page.

Par exemple dans le CSS :

ul#galerie_mini

{

margin: 0 ;

padding: 0 ;

list-style-type: none ;

}

Là tu l'appelles par son nom. Tu dis : je style l'élément ul qui s'appelle "galerie_mini" et pas les autres. Juste lui.

Dans le JS c'est pareil :

var photos = document.getElementById('galerie_mini') ;

Tu vas chercher l'élément qui porte le nom "galerie_mini" dans le document (document.getElementById). Il n'y en a qu'un. Cet élément, tu l'affectes à une variable "photos". Ensuite tu vas donc pouvoir travailler sur cette variable.

var liens = photos.getElementsByTagName('a') ;

Ici tu vas chercher dans "photos" (donc dans ton élément "galerie_mini) tous les liens (tag <a>). Donc tu récupères tes liens <a href="images/gallerie/machin.jpg>.

etc etc...

Ok je croit que j'ai pigé maintenant je fait quoi avec la fin du code JS

	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
		};
	}
}

[/i]

Bonjour,

Un petit rappel:

1. La règle 16 stipule «Ceci est une communauté d'entraide, pas de travail à votre place.» Or, pour l'instant ce sujet ressemble à «débusquez mes erreurs et proposez moi un correctif, moi j'y panne rien de toute façon», ce qui ne correspond pas au fonctionnement souhaité pour ce forum.

2. Pour comprendre et appliquer un tutoriel utilisant JavaScript, des notions de base en JavaScript sont nécessaires.

3. Et si on ne comprend rien à JavaScript mais que l'on suit tout de même un tutoriel JavaScript ( ), il est plus que recommandé de ne pas bidouiller les scripts fournis mais de les conserver tels quels, sauf si le tutoriel demande explicitement de modifier certaines parties du script.

Une remarque pour finir: le code HTML utilisé ne sera pas accessible. Toutes les images ont strictement le même attribut alt.

Je sais que c'était peut-être à l'encontre des politiques, mais mistike ma donné le coup de pouce qu'il me manquait car j'ai réussie aussi simple cela puisse t-il être. C'Est parfois sur le tas qu'on apprend le plus ...

Donc merci beaucoup mistike !

merci tout de même modo

héhé c'est pour ça que je ne t'ai pas donné la solution brut de fonderie, mais plutôt mis sur la voie