IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

diaporama Photo et texte


Sujet :

JavaScript

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Directeur des systèmes d'information
    Inscrit en
    Mars 2011
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Directeur des systèmes d'information
    Secteur : Finance

    Informations forums :
    Inscription : Mars 2011
    Messages : 3
    Points : 1
    Points
    1
    Par défaut diaporama Photo et texte
    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

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    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.

    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Directeur des systèmes d'information
    Inscrit en
    Mars 2011
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Directeur des systèmes d'information
    Secteur : Finance

    Informations forums :
    Inscription : Mars 2011
    Messages : 3
    Points : 1
    Points
    1
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 -->

  4. #4
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    vu que visiblement, c'est un diapo "image par image", pas de souci; tu ajoutes un div sous chaque image avec le texte correspondant;

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

  5. #5
    Nouveau Candidat au Club
    Homme Profil pro
    Directeur des systèmes d'information
    Inscrit en
    Mars 2011
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Directeur des systèmes d'information
    Secteur : Finance

    Informations forums :
    Inscription : Mars 2011
    Messages : 3
    Points : 1
    Points
    1
    Par défaut
    Citation Envoyé par javatwister Voir le message
    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.



    Citation Envoyé par javatwister Voir le message

    les autres, tu t'en fous?
    C'est le site web que je viens de monter, pas l'association... Problème de ponctuation.


    Citation Envoyé par javatwister Voir le message
    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 ?

Discussions similaires

  1. Ajouter un diaporama photo/texte
    Par Clems17 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 04/08/2010, 12h07
  2. Pb mon programme diaporama photo en écran de veille
    Par hellspawn_ludo dans le forum Windows Forms
    Réponses: 2
    Dernier message: 19/07/2007, 21h44
  3. Debutant flash, diaporama photos
    Par lucho31 dans le forum Flash
    Réponses: 7
    Dernier message: 05/02/2007, 22h49
  4. affichage de photos et texte venant d une base de données.
    Par xtiand4 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 23/06/2006, 14h14
  5. [FLASH MX] Diaporama Photos
    Par Ylias dans le forum Flash
    Réponses: 3
    Dernier message: 17/10/2005, 16h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo