Sujet Précédent Sujet Suivant

Légende galerie photo html

Résolu/Fermé
syrinxxxx Messages postés 322 Date d'inscription lundi 9 juin 2008 Statut Membre Dernière intervention 14 novembre 2009 - 24 août 2008 à 18:50
 guil - 24 févr. 2012 à 16:07
Bonjour,
j'ai une galerie photo toute simple dont le code est celui ci :

je cherche a rajouter une legende qui changerait en meme temps un swap text ( je sais pas si ca existe)

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="center">
<p><img src="images/galeriefontaine/thumb_fontaine01.jpg" alt="fontaine01" width="75" height="42" onmouseover="MM_swapImage('fontaine_large','','images/galeriefontaine/fontaine01.jpg',1)" /> <img src="images/galeriefontaine/thumb_fontaine02.jpg" alt="fontaine02" width="75" height="42" onmouseover="MM_swapImage('fontaine_large','','images/galeriefontaine/fontaine02.png',1)" /> <img src="images/galeriefontaine/thumb_fontaine03.jpg" alt="fontaine03" width="75" height="42" onmouseover="MM_swapImage('fontaine_large','','images/galeriefontaine/fontaine03.png',1)" /> <img src="images/galeriefontaine/thumb_fontaine04.jpg" alt="fontaine04" width="75" height="42" onmouseover="MM_swapImage('fontaine_large','','images/galeriefontaine/fontaine04.png',1)" /> <img src="images/galeriefontaine/thumb_fontaine05.jpg" alt="fontaine05" width="75" height="42" onmouseover="MM_swapImage('fontaine_large','','images/galeriefontaine/fontaine05.png',1)" /> <img src="images/galeriefontaine/thumb_fontaine06.jpg" alt="fontaine06" width="75" height="42" onmouseover="MM_swapImage('fontaine_large','','images/galeriefontaine/fontaine06.png',1)" /> <img src="images/galeriefontaine/thumb_fontaine07.jpg" alt="fontaine07" width="75" height="42" onmouseover="MM_swapImage('fontaine_large','','images/galeriefontaine/fontaine07.png',1)" /></p>
<p> </p>
</div></td>
</tr>
<tr>
<td><div align="center"><img src="images/galeriefontaine/fontaine01.jpg" alt="fontaine_large" name="fontaine_large" width="697" height="397" id="fontaine_large" /></div></td>
</tr>
</table>
A voir également:

6 réponses

Réponse 1 / 6
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
25 août 2008 à 23:43
Bsr

Avec le code MacroMedia (beurk !) non

Comme ceci oui 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Gallerie</title>

<style>
*
{
	font-family : arial;
	font-size : 12pt;
}

body
{
	margin : 10px;
	padding : 0px;
	border : 0px;

}

.titre
{
	font-weight : bold;

}

</style>

<script>
function ImageItem(url,txt)
{
	this.url = url;
	this.txt = txt;
}

function ImageList(imgId,txtId)
{
	this.imgId = imgId;
	this.txtId = txtId;
	this.items = new Array();
}

ImageList.prototype.add = function(url,txt)
{
	var item = new ImageItem(url,txt);
	this.items.push(item);
	return item;
}

ImageList.prototype.swap = function(index)
{
	document.getElementById(this.imgId).src = this.items[index].url;
	document.getElementById(this.txtId).innerHTML = this.items[index].txt;
}

var imageList = new ImageList("fontaine_large","fontaine_txt");


function load()
{
	imageList.add("images/galeriefontaine/fontaine01.png","Ceci est l'image 1");   // Image 0
	imageList.add("images/galeriefontaine/fontaine02.png","Prise de vue du ...."); // Image 1 
	imageList.add("images/galeriefontaine/fontaine03.png","Zoom");                 // Image 2 
	// Etc ...
}

</script>
</head>
<body onload="load()">
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
	<tr> 
	<td>
		<div align="center"> 
		<img src="images/galeriefontaine/thumb_fontaine01.jpg" alt="fontaine01" width="75" height="42" onmouseover="imageList.swap(0)" /> 
		<img src="images/galeriefontaine/thumb_fontaine02.jpg" alt="fontaine01" width="75" height="42" onmouseover="imageList.swap(1)" /> 
		<img src="images/galeriefontaine/thumb_fontaine03.jpg" alt="fontaine01" width="75" height="42" onmouseover="imageList.swap(2)" /> 
		<br />&nbsp;
		</div>
	</td> 
	</tr> 
	<tr> 
	<td>
		<div align="center"><img src="images/galeriefontaine/fontaine01.png" alt="fontaine_large" name="fontaine_large" width="697" height="397" id="fontaine_large" />
		<p id="fontaine_txt" class="titre">Ceci est l'image 1</p>
		</div>
	</td>
	</tr>
</table>
</body>
</html>
1
syrinxxxx Messages postés 322 Date d'inscription lundi 9 juin 2008 Statut Membre Dernière intervention 14 novembre 2009 28
27 août 2008 à 18:12
cool merci je vais integrer ca dans ma page.
En passant pourquoi le code macromedia serait-il beurk ?
0
guil
24 févr. 2012 à 16:05
super merci super bon code ET qui fonction :-)
Petit qeustion je connais pas la fonction "imageList.add"
comment faire pour mettre un text de 2 ou 3 ligne a la place du mot qui acompagne l'image?
0
Réponse 2 / 6
syrinxxxx Messages postés 322 Date d'inscription lundi 9 juin 2008 Statut Membre Dernière intervention 14 novembre 2009 28
24 août 2008 à 19:12
ooops y a ca ausi comme code jsute avant :

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
0
Réponse 3 / 6
syrinxxxx Messages postés 322 Date d'inscription lundi 9 juin 2008 Statut Membre Dernière intervention 14 novembre 2009 28
24 août 2008 à 19:12
quelqu'un aurait-il la gentillesse de m'aider ? :(
0
Réponse 4 / 6
dreamfeeder Messages postés 253 Date d'inscription samedi 24 novembre 2007 Statut Membre Dernière intervention 25 juillet 2009 54
24 août 2008 à 21:21
bonjour,

je ne comprend pas tres bien ce que tu veux faire en fait.
tu souhaite rajouter une legende ou? et qu'entend tu par swap text?

cordialement, dreamfeeder.
0
syrinxxxx Messages postés 322 Date d'inscription lundi 9 juin 2008 Statut Membre Dernière intervention 14 novembre 2009 28
25 août 2008 à 23:05
alors j'ai une galerie photo que j'ai faite en utilisant une table coupé en deux colonne dans celle de droite j'ai mis les thumbnails dans celle de gauche la premiere foto en grand, puis pour tout les thumbnails j'ai ajouter un "swap image" c'est-a-dire que lorsque que l'on clique sur le thumb l'image d'origine est remplacée par l'image du thumb.
je voudrais savoir s'il est possible de faire apparaitre en dessous ma photo (pour chaque photo swapper une legende) en clair dans le code qu'il y a dans le premier post ou puis-je rajouter le code de la legende pour qu'il reagisse avec le swap ?

je sais pas si j'ai ete plus clair en tout cas merci de t'interesser :-)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
27 août 2008 à 18:28
Bsr

En passant pourquoi le code macromedia serait-il beurk ?
Parce qu'il n'est déjà pas très lisible, pas vraiment documenté et qu'il s'appuie sur des fonctionnalités spécifiques à d'anciennes versions des navigateurs qui n'ont plus lieu d'être sauf à utiliser encore Netscape 4 ou IE 4 par ex
Notamment la fonction findObj qui semble rechercher un objet par son attribut name un peu partout avant de finir par utiliser getElementById, LA fct qu'aujourd'hui tout navigateur digne de ce nom qui implémente Javascript et DOM se doit de supporter.
0
syrinxxxx Messages postés 322 Date d'inscription lundi 9 juin 2008 Statut Membre Dernière intervention 14 novembre 2009 28
27 août 2008 à 18:46
ok merci de toutes ces explications.
ton code fonctionne a merveilles.
ca voudrait dire aussi que lorsqu'on utilise dreamweaver en mode design c'est pas top.
0
Réponse 6 / 6
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
27 août 2008 à 18:56
Non ça veut juste dire que pour des raisons commerciales et de compatiblité Dreamweaver se doit d'interpréter correctement des pages conçues avec d'anciennes versions de DW pour d'anciens navigateurs. C'est la moindre des choses pour un soft payant.
Pour le reste il génère du code HTML assez propre.

Par contre quand tu codes toi même tu ne t'occupes plus des vieux navigateurs comme IE 5, Netscape ou FF 1 : tu vas à l'essentiel

Comme tu as pu le constater DW est limité niveau Javascript : dès que tu veux faire un peu différemment (affiché un texte dans ton cas lors d'un swap) ce n'est plus possible. Ca reste malgrès tout un outils sympa et wisiwyg (par contre lorsqu'on code en PHP il ne sert plus à grand chose)
0
syrinxxxx Messages postés 322 Date d'inscription lundi 9 juin 2008 Statut Membre Dernière intervention 14 novembre 2009 28
28 août 2008 à 08:31
ooops besoin d'un suivi conso pour le code des galeries j'en ai plusieurs a faire et je comprends pas pourquoi les deux premiere on fonctionnées et les autres me charge plus les images

mes galeries sont tres simple j'ai une page type avec le menu du site une photo de la section galerie et une table ou je met la galerie,... donc pour faire les autres galeries j'ai dupliquer la page de la premiere galerie et

changer les sources dans" function load()" et <div align="center"><img src="images/galerie....(ca je le change)

et aussi dans la derniere ligne qui affiche la photo en grand j'ai mis a chaque fois la premiere photo de la serie.
Mais j'ai laissé le "fontaine_large" et fontaine_text" partout

je comprends pas pourquoi pour les deux premiere ca marche et pas pour les autres alors que je duplique la page en changenat juste ce que je t dis
(pardon de faire le boulet mon erreur doit etre bete)
0
syrinxxxx Messages postés 322 Date d'inscription lundi 9 juin 2008 Statut Membre Dernière intervention 14 novembre 2009 28 > syrinxxxx Messages postés 322 Date d'inscription lundi 9 juin 2008 Statut Membre Dernière intervention 14 novembre 2009
28 août 2008 à 08:43
le probleme c'est que quoi que je change dans mon preview dreamweaver ca fonctionne mais une fois uploader sur le serveur ca marche ca m'affiche la premiere image et les autre ca ecris le nom donner a la premiere
0
syrinxxxx Messages postés 322 Date d'inscription lundi 9 juin 2008 Statut Membre Dernière intervention 14 novembre 2009 28 > syrinxxxx Messages postés 322 Date d'inscription lundi 9 juin 2008 Statut Membre Dernière intervention 14 novembre 2009
28 août 2008 à 09:06
ouai c'est vraiment une question bete
j'utilise site management pour uploader et j'ai demander a dream de mettre tout les fichier qui dependent d'une page que j'uploade mais je savais pas qu'il savait pas lire les scripts du coup toute les photo du script il les a pas mise et c pour ca qu'on voyait que la premiere
0
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606 > syrinxxxx Messages postés 322 Date d'inscription lundi 9 juin 2008 Statut Membre Dernière intervention 14 novembre 2009
28 août 2008 à 09:42
Bjr

ben vi ;-) DW ne peut pas deviner quelles images ton script utilise tu dois les uploader séparément
0
syrinxxxx Messages postés 322 Date d'inscription lundi 9 juin 2008 Statut Membre Dernière intervention 14 novembre 2009 28 > PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009
28 août 2008 à 11:04
hihi ben j'avoue que sur ce coup la j'ai pas etait tres percpicace car effectivement le script n'a pas de code de couleur j'aurai du comprendre qu'il ne savait pas le lire ca m'aurais eviter de refaire plusieurs fois mes six galeries en m'arrachant les cheveux et en pestant contre ce pauv' dreamweaver :D

sinon vu que tu repond juste a plein de monde (me suis un peu balader sur le forum ) t'as ptet une idée sur mon dernier post ?
0

Discussions similaires

Pix
Anyssa -
vibe -

4 réponses
Transfert photos messenger vers galerie
Marie-Ange1948 -
Galliot -

4 réponses