11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Galerie photo Javascript

Bonjour,
Je bug sur un petit détail de ma galerie photo, j'aimerais afficher le contenu de l'attribut alt de mes images dans un paragraphe afin d'en faire la légende de mes photos mais je n'arrive qu'à obtenir un petit " undefined " à la place Smiley confused
Quelqu'un pourrait me donner un petit coup de pouce ?

Voilà le code javascript : 

<script type="text/javascript">

var n_photo=1; 
var comments= document.getElementsByTagName('img').getAttribute('alt');
document.getElementById("commentaire").innerHTML= comments;

function affiche (id)
{
	var objet = document.getElementById("photo");
	objet.src = "../Photo/galerie1/"+id+".png";
	n_photo = id.charAt(5);
}


function suivant()
{
	if(n_photo == 13)
	{
		n_photo = 1;
		var objet = document.getElementById("photo");
		objet.src = "../Photo/galerie1/photo"+n_photo+".png";
	}
	else
	{
		n_photo++;
		var objet = document.getElementById("photo");
		objet.src = "../Photo/galerie1/photo"+n_photo+".png";
	}
}

function precedent()
{
	if(n_photo == 1)
	{
		n_photo = 13;
		var objet = document.getElementById("photo");
		objet.src = "../Photo/galerie1/photo"+n_photo+".png";
	}
	else
	{
		n_photo--;
		var objet = document.getElementById("photo");
		objet.src = "../Photo/galerie1/photo"+n_photo+".png";
	}
}

</script>


Et le code html de la galerie : 

<div id ="contenu">

<div id="divphoto">
<img id="photo"src="../Photo/galerie1/photo1.png" height="390" width="600"/>
</div>

<div id="vignettes">
<img src="../Photo/galerie1/photo1.png" alt="Fenêtre PVC Blanc" onclick="affiche('photo1')"/>
<img src="../Photo/galerie1/photo2.png" alt="Fenêtre bois" onclick="affiche('photo2')"/>
<img src="../Photo/galerie1/photo3.png" alt="Fenêtre PVC Blanc avec croisillons" onclick="affiche('photo3')"/>
<img src="../Photo/galerie1/photo4.png" alt="Fenêtre PVC Blanc" onclick="affiche('photo4')"/>
<img src="../Photo/galerie1/photo5.png" alt="Fenêtre PVC Blanc" onclick="affiche('photo5')"/>
<img src="../Photo/galerie1/photo6.png" alt="Fenêtre PVC Blanc" onclick="affiche('photo6')"/>
<img src="../Photo/galerie1/photo7.png" alt="Fenêtre PVC Blanc" onclick="affiche('photo7')"/>
<img src="../Photo/galerie1/photo8.png" alt="Fenêtre aluminium" onclick="affiche('photo8')"/>
<img src="../Photo/galerie1/photo9.png" alt="Fenêtre PVC Blanc" onclick="affiche('photo9')"/>
<img src="../Photo/galerie1/photo10.png" alt="Fenêtre PVC Blanc" onclick="affiche('photo10')"/>
<img src="../Photo/galerie1/photo11.png" alt="Fenêtre PVC chêne doré" onclick="affiche('photo11')"/>
<img src="../Photo/galerie1/photo12.png" alt="Fenêtre PVC chêne doré" onclick="affiche('photo12')"/>
<img src="../Photo/galerie1/photo13.png" alt="Fenêtre PVC chêne doré" onclick="affiche('photo13')"/>
</div>

<div id="liens">
<a href="javascript:void(0);" onclick="precedent()"><img src="../Design/boutons/gauche.png" height="30px" width="30px" alt="Précédent" class="gauche"/></a>&nbsp;&nbsp;<p id="commentaire"> </p>&nbsp;&nbsp;
<a href="javascript:void(0);" onclick="suivant()"><img src="../Design/boutons/droite.png" height="30px" width="30px" alt="Suivant" class="droite"/></a>
</div>

<!-- end .contenu --></div>


Merci d'avance aux âmes charitables Smiley biggrin
Merci pour la réponse rapide. Faut-il que j'insère cette ligne de code document.getElementById("commentaire").innerHTML= comments;
dans la fonction affiche ? Mais comme tu l'as dit, elle affiche tout les commentaire et non pas seulement le commentaire de la photo affichée. Comment remédier à ça ?
A ta place je ferais ca comme ca
var comments= document.getElementsByTagName('img')
//la ou tu affiches, tu recupere le numero de la photo par exemple dans x et tu ecris:
laoutuveuxecrireletexte = comments[x].getAttirbute('alt')
Bonjour à toutes et à tous,

en procédant ainsi, tu auras un commentaire sur l'image agrandie.
Title permet de mettre un texte sur l'image pour les navigateur Netscape.
Inversement, le Alt fait la même chose pour MSIE.
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
	var liste = document.getElementById("vignette").getElementsByTagName("IMG");

	for (var i=0; i<liste.length; i++)
		liste[ i ].title = liste[ i ].alt;
}

function affiche(addr)
{
	document.getElementById("commentaire").innerHTML = addr.alt;

	var image = document.getElementById("photo");
	image.src = "photo" + addr.id + ".jpg";
	image.alt = addr.alt;

	n_photo = addr.id;
}
</script>
</head>

<body onload="javascript:init();">
<div id="vignette">
	<img id="7" src="photo7.jpg" alt="Blanc 7" onclick="affiche(this)" />
	<img id="8" src="photo8.jpg" alt="Blanc 8" onclick="affiche(this)" />
</div>

<br />
<img id="photo" src="" alt="" />
<div id="commentaire"></div>

</body>
</html>


@+
Bonjour,
Artemus24 a écrit :
Title permet de mettre un texte sur l'image pour les navigateur Netscape.
Inversement, le Alt fait la même chose pour MSIE.

Ces utilisations de title et alt sont à éviter.
1. Title n'a rien à faire sur une image, sauf cas ultra spécifiques et rares.
2. Alt ne doit pas être utilisée pour légender une image mais pour retranscrire son contenu, ce qui est très différent.
3. Si alt et title sont présent un un même contenu (un lien et l'image qu'il contient) ils ne doivent pas être identiques, sinon title devient redondant et gênant.
4. Se reposer entièrement au comportement (pas très logique) d'un navigateur est dangereux en terme d'interropérabilité future.

Pour faire une Légende d'image, la bonne pratique est de mettre la légende dans un <p> ou un <span>.
Modifié par Laurie-Anne (31 May 2012 - 09:33)
Ma'rine a écrit :
Je voudrais entrer le contenu de l'attribut alt de chaque image dans la balise &lt;p&gt; lors de l'affichage de l'image.
Le problème, c'est qu'en faisant ceci tu auras le même problème de redondance entre le alt et le <p> (Dans ce cas, il faut laisser le alt vide). Qu'est-ce qui t'empèche de mettre directement la légende dans le <p> ?
a écrit :
Qu'est-ce qui t'empèche de mettre directement la légende dans le <p> ?


Je ne vois pas comment faire Smiley confused Ma légende doit être modifier à chaque changement d'image. O dois-je mettre mes légendes si elles ne se trouvent pas à la base dans le value de l'attribut alt ?
Et comment créés-tu ton code HTML qui affiche l'image ?

SI tu arrive à mettre un contenu dans le alt, pourquoi ne serait-il pas possible de mettre ce contenu dans un paragraphe ?
Je ne suis pas certaine que l'on se comprenne bien, je fais une capture d'écran pour que ce soit plus clair si jamais (à moins que ça ne soit moi qui ne comprenne rien) :
upload/44906-Capturede7.png
Pour le code HTML et Javascript, je les ai mis dans mon premier post

Je voudrais donc faire en sorte que sous l'image de grande taille se place à l'apparition de chaque photo un commentaire différents. Sous la grand image j'ai donc mis une balise <p id=commentaire>. Chaque image en miniature possède une balise alt dans laquelle se trouve une description de la photo. J'aimerais donc qu'en cliquant sur la miniature et l'affichant donc à la place de la grande image, le texte que j'ai placé dans le alt s'écrivent aussi dans ma balise <p>. Voilà, afin pour moi j'imaginais que ce serait une manoeuvre simple avec un innerHTML et que cela marcherait mais ça semble plus compliqué que ça finalement.
Bonsoir à toutes et à tous,

@Laurie-Anne : je sais que tes remarques concerne l’accessibilité des navigateurs par tous.

Je reconnais que ce n'est pas bien d'utiliser à la fois le ALT et le TITLE pour afficher un commentaire lorsque le curseur pointe sur une image. Et que l'usage de ALT est bien destiné à la description de l'image et non disons à son titre (ou commentaire).

Le mieux est comme tu l'indiques si judicieusement de faire un paragraphe fixe pour y placer le commentaire.

@ Ma'rine : as-tu regardé mon précédent message ? As-tu au moins testé mon script pour voir ce qu'il fait ?

La solution de Laurie-Anne est d'alterner la balise <img> avec un <p> qui contiendra le commentaire de l'image.

@+
Modifié par Artemus24 (01 Jun 2012 - 21:18)
Re bonsoir,

voici le code HTML !
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript">
function affiche(addr)
{
	var image = document.getElementById("photo");
	image.src = addr.src;
	image.alt = addr.alt;

	var apres = addr.nextSibling;
	while ((apres = apres.nextSibling) && apres.nodeType != 1);

	document.getElementById("commentaire").innerHTML = apres.innerHTML;
}
</script>

<style rel="stylesheet" type="text/css">
#vignette > p {	display : none; }
</style>
</head>

<body>
<div id="vignette">
	<img src="http://static.flickr.com/2366/3530630926_62b4cef919.jpg"                 alt="Photo 1" onclick="affiche(this)" />
	<p>Un portrait de famille"</p>

	<img src="http://www.dynamictic.info/wp-content/uploads/2011/02/chat.jpeg"         alt="Photo 2" onclick="affiche(this)" />
	<p>Un chat calin</p>

	<img src="http://missiontice.ac-besancon.fr/college_edgar_faure/IMG/jpg/poiuy.jpg" alt="Photo 3" onclick="affiche(this)" />
	<p>Un chat sur le dos</p>	
	</div>

<br />
<img id="photo" src="" alt="" />
<p id="commentaire"></p>

</body>
</html>


@+
Artemus24 excuse moi je n'ai pas vu ton tout 1er commentaire. Merci pour ton code, je vais le tester au plus vite et te dire si j'arrive à le faire fonctionner. Merci beaucoup.
Oui ça à l'air de fonctionner très bien, merci ! Je vais adapter mon css à ton code et tenter de rajouter les boutons suivant et précédent à ton code.
Peux-tu juste m'expliquer cette partie s'il te plait ? 
var apres = addr.nextSibling;
while ((apres = apres.nextSibling) && apres.nodeType != 1);

Je ne connais pas nextSibling.
La fonction affiche marche parfaitement, lorsque je clique sur ma miniature elle s'affiche en grand avec le commentaire merci.

Par contre je ne vois pas comment changer la fonction suivant pour que cela fonctionne de la même manière. Par quoi dois-je modifier le addr de la fonction affiche ? 

function affiche(addr)
{
	var image = document.getElementById("photo");
	image.src = addr.src;
	image.alt = addr.alt;

	var apres = addr.nextSibling;
	while ((apres = apres.nextSibling) && apres.nodeType != 1);

	document.getElementById("commentaire").innerHTML = apres.innerHTML;
}

function suivant()
{
	if(n_photo == 13)
	{
		n_photo = 1;
		var objet = document.getElementById("photo");
		objet.src = "../Photo/galerie1/photo"+n_photo+".png";
		
	}
	else
	{
		n_photo++;
		var objet = document.getElementById("photo");
		objet.src = "../Photo/galerie1/photo"+n_photo+".png";
		
	}
}


<div id="divphoto">
<img id="photo"src="../Photo/galerie1/photo1.png" height="390" width="600"/>
</div>

<div id="vignettes">
<img src="../Photo/galerie1/photo1.png" alt="Fenêtre PVC Blanc" onClick="affiche(this)" />
<p>Fenêtre PVC Blanc</p>
<img src="../Photo/galerie1/photo2.png" alt="Fenêtre bois" onClick="affiche(this)" />
<p>Fenêtre bois</p>
<img src="../Photo/galerie1/photo3.png" alt="Fenêtre PVC Blanc avec croisillons" onClick="affiche(this)" />
<p>Fenêtre PVC Blanc avec croisillons</p>
</div>

<div id="liens">
<a href="javascript:void(0);" onclick="precedent()"><img src="../Design/boutons/gauche.png" height="30px" width="30px" alt="Précédent" class="gauche"/></a><a href="javascript:void(0);" onclick="suivant()"><img src="../Design/boutons/droite.png" height="30px" width="30px" alt="Suivant" class="droite"/></a>
<p id="commentaire"> </p>
</div>


Merci beaucoup pour ton aide
Bonsoir ma'rine,

selon les conseils de Laurie-Anne, un commentaire ne doit pas se trouver dans la balise <img> et encore moins utiliser pour cela ALT ou TITLE.

Tu as d'une part le onclick="javascript:affiche(this);" et d'autre part la balise <p>bla bla bla</p> qui correspond au commentaire que tu associes à l'image.
Il est impératif que la balise <p> soit juste après la balise <img> où se trouve le onclick.
var apres = addr.nextSibling;
while ((apres = apres.nextSibling) && apres.nodeType != 1);

Dans le paramètre addr, tu as l'adresse du noeud de la balise <img>.
Elle correspond au this de affiche du onclick dans la balise <img>.
Tu recherches le prochain noeud juste après la balise <img>, soit la balise <p>.
Comme elle se trouve juste derrière la balise <img>, tu dois d'abord te positionner sur cette balise <p>, d'où :
var apres = addr.nextSibling;

Cela serait largement suffisant pour MSIE et d'autres navigateurs.
Mais je ne sais pas pourquoi certains navigateurs mettent d'autres nœuds intermédiaires (?!?!?!).
En faisant ce qui suit :
while ((apres = apres.nextSibling) && apres.nodeType != 1);

tu t'assures d'avoir le prochain nœud de type = 1, c'est à dire un nœud de type element comme la balise <p>.
Je crois que ce sont des nœud de type text (= 3) qui viennent s'insérer.

En français, nextSibling signifie prendre le prochain (next) nœud qui est un enfant du même parent (sibling). C'est à dire une balise (par exemple <p>) qui se trouve au même niveau que la balise de référence (ici la balise <img>).

J'espère avoir répondu à ta question.

@+
Re bonjour ma'rine,

c'est quelque chose de très basique, mais au moins cela fonctionne.
Même si c'est pas propre, j'utilise le sélecteur ID pour numéroter les images.
Normalement, il ne faut pas procéder ainsi car le sélecteur ID n'est pas fait pour cela.
<!doctype html>
<html>
<head>
<title>Mini Gallerie de Photos de Chats</title>
<script type="text/javascript">
var pos = 1;

function affiche(addr)
{
	pos = addr.id;

	var image = document.getElementById("photo");
	image.src = addr.src;
	image.alt = addr.alt;

	var apres = addr.nextSibling;
	while ((apres = apres.nextSibling) && apres.nodeType != 1);

	document.getElementById("commentaire").innerHTML = apres.innerHTML;
}

function suivant ()
{
	if (++pos > 3)	pos = 1;
	affiche(document.getElementById(pos));
}

function precedent ()
{
	if (--pos < 1)	pos = 3;
	affiche(document.getElementById(pos));
}
</script>

<style rel="stylesheet" type="text/css">
#vignette > p {	display : none; }
</style>
</head>

<body>
<div id="vignette">
	<img id="1" src="http://static.flickr.com/2366/3530630926_62b4cef919.jpg"                 alt="Photo 1" onclick="affiche(this)" />
	<p>Un portrait de famille"</p>

	<img id="2" src="http://www.dynamictic.info/wp-content/uploads/2011/02/chat.jpeg"         alt="Photo 2" onclick="affiche(this)" />
	<p>Un chat calin</p>

	<img id="3" src="http://missiontice.ac-besancon.fr/college_edgar_faure/IMG/jpg/poiuy.jpg" alt="Photo 3" onclick="affiche(this)" />
	<p>Un chat sur le dos</p>	
	</div>

<br />

<img src="http://icdn.pro/images/fr/f/l/fleche-gauche-icone-7633-32.png" alt="fleche gauche" onclick="precedent();">
<img src="http://icdn.pro/images/fr/f/l/fleche-droite-icone-4092-32.png" alt="felche droite" onclick="suivant();">

<br />

<img id="photo" src="" alt="" />
<p id="commentaire"></p>

</body>
</html>


@+
Artemus24 merci pour l'explication nextSibling je comprend mieux le fonctionnement de ton code maintenant. Je te remercie beaucoup, les fonctions suivantes et précédentes marchent parfaitement aussi.
Merci encore pour ton aide Smiley biggrin
Sujet clos
Aller à