diaporama Photo et texte

[Domino3]

Bonjour,

Je suis en train de construire le site web de l'association sur les chevaux que je viens de monter.

Dans la page principale de mon site, je souhaite faire apparaitre comme un diaporama avec effet, les photos des chevaux de notre association, jusque là c'est ok ... Avec un script que lit les infos en base de données ça fonctionne ...
Maintenant je souhaiterais le faire évoluer en ajoutant du texte qui se superposerais sur les photos, par exemple le nom du cheval etc ...

Avez-vous déjà réalisé ce type de script ?

Merci d'avance

[Watilin]

Bonsoir !

C'est assez vague comme requête, alors je ne peux que tu donner une réponse assez vague, de même.
Si le texte provient des requêtes vers ta base de données, autrement dit s'il arrive en même temps que les images, c'est facile. Il suffit de lui donner un positionnement relatif ou absolu, un z-index supérieur à celui des images, et de garder une référence dessus pour le modifier quand l'image change.

Si le texte doit venir d'ailleurs, ça sera plus compliqué. Il faudra faire plusieurs requêtes ou bien modifier la base de données.

Dis-nous déjà si ces quelques pistes que je t'ai données vont dans la direction que tu veux.

[Domino3]

C'est tout à fait ça, le texte provient de la même requête que les photos.

Comme déjà indiqué, j'ai un script qui fait defiler les photos, il fonctionne correctement, je souhaiterais afficher le texte sur la photo, ce texte est déjà dans ma requête de récupération d'information.

Pour résumer, mon script php génère le code javascript en fonction du résultat de ma requête SQL.

Script php :

Code php :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/*<!-- DEBUT DU SCRIPT --> */
echo " <SCRIPT LANGUAGE=JavaScript> ";
echo " imgPath = new Array; ";
echo " SiClickGoTo = new Array; ";
echo " Comments = new Array; ";
echo " if (document.images) ";
echo " { ";
connexion_DB(DATABASE);
 
$maximum=15;  /// maximum de photos que vous souhaitez toutes categories confondues 
 
$reqiu="SELECT * FROM `matable`  "; /// lecture aléatoire des photos dans la BDD 
$resltait= mysql_query("$reqiu")or die("Erreur.. :-)<br>Vous n'avez pas d'autorisation pour faire ce genre de chose !"); 
$i=-1; 
while ($ro=mysql_fetch_array($resltait)) 
{ 
$i++; 
 
 
echo " i".$i." = new Image;";
echo " i".$i.".src = \"./Photos/".$ro['NomPhoto'].".jpg\";";
echo " SiClickGoTo[".$i."] = \"".$ro['Lien']."\";"; /// lien vers la photo 
echo " imgPath[".$i."] = i".$i.".src;"; 
echo " Comments[".$i."] = \"".$ro['Description']."\";"; /// commentaire a afficher
 
} 
deconnexion_DB();
 
echo " } ";
echo " a = 0; ";
echo " function ejs_img_fx(img) ";
echo " { ";
echo " if(img && img.filters && img.filters[0]) ";
echo " { ";
echo " img.filters[0].apply(); ";
echo " img.filters[0].play(); ";
echo " } ";
echo " } "; 
 
echo " function StartAnim() ";
echo " { ";
echo " if (document.images) ";
echo " { ";
echo " document.write('<A HREF=\"#\" onClick=\"ImgDest();return(false)\"><IMG SRC=\"./Photos/Altesse.jpg\" BORDER=0 height=200 ALT=\"Galerie photo\" NAME=defil style=\"filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=100,Duration=1)\"></A>'); ";
echo " defilimg() ";
echo " } ";
echo " else ";
echo " { ";
echo " document.write('<A HREF=\"\"><IMG SRC=\"./Photos/Altesse.jpg\" BORDER=0 height=200></A>') ";
echo " } ";
echo " } ";
echo " function ImgDest() ";
echo " { ";
echo " document.location.href = SiClickGoTo[a-1]; "; //modifie le lien si on clique sur l'image
echo " } ";
echo " function defilimg() ";
echo " { ";
echo " if (a == ".$i.") ";
echo " { ";
echo " a = 0; ";
echo " } ";
echo " if (document.images) ";
echo " { ";
echo " ejs_img_fx(document.defil); ";
echo " document.defil.src = imgPath[a]; ";
/*echo " document.title = Comments[a]; ";*/
echo " tempo3 = setTimeout(\"defilimg()\",4000); ";
echo " a++; ";
echo " } ";
echo " } ";
echo " </SCRIPT> ";
 
?>
<!-- FIN DU SCRIPT -->

[javatwister]

vu que visiblement, c'est un diapo "image par image", pas de souci; tu ajoutes un div sous chaque image avec le texte correspondant;

Envoyé par Domino3

l'association sur les chevaux que je viens de monter.

les autres, tu t'en fous?

sinon, revois sans doute ta gestion php ==> xhtml / js parce que là, imagine que tu passes la main à qqn pour le développement à venir, il va monter sur ses grands chevaux;

[Domino3]

Envoyé par javatwister

vu que visiblement, c'est un diapo "image par image", pas de souci; tu ajoutes un div sous chaque image avec le texte correspondant;

Ce que je voulais, c'est faire apparaitre le texte lié à l'image sur l'image.

Envoyé par javatwister

les autres, tu t'en fous?

C'est le site web que je viens de monter, pas l'association... Problème de ponctuation.

Envoyé par javatwister

sinon, revois sans doute ta gestion php ==> xhtml / js parce que là, imagine que tu passes la main à qqn pour le développement à venir, il va monter sur ses grands chevaux;

Tu peux expliquer ?