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 :

Slider texte avec image lien


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Femme Profil pro
    Webmarketer
    Inscrit en
    Août 2016
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Webmarketer

    Informations forums :
    Inscription : Août 2016
    Messages : 13
    Points : 3
    Points
    3
    Par défaut Slider texte avec image lien
    Bonjour,
    J'ai cherché beaucoup sur google les sliders texte avec image lien mais je n'ai pas trouvé le bon exemple qui me convient pour mon blog. Ent fait le style de slider que je cherche c'est qu'il soit un texte fixe dans une colonne et la colonne à coté contient une image qui va se diriger vers un lien, et je voudrais que l'image se change quand on clique sur une flèche par exemple.
    J'espère trouver ce modèle de slider.
    Merci beaucoup à vote aide.

  2. #2
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonjour,

    Voulez-vous nous proposer quelques images pour nous aider à comprendre?

  3. #3
    Candidat au Club
    Femme Profil pro
    Webmarketer
    Inscrit en
    Août 2016
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Webmarketer

    Informations forums :
    Inscription : Août 2016
    Messages : 13
    Points : 3
    Points
    3
    Par défaut
    Merci pour votre réponse, à peu près proche de cet exemple ici mais je voudrais que le texte reste fixe dans une colonne, et uniquement l'image qui va être changer si on clique au-dessus par un bouton next.

  4. #4
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonsoir,

    Ce "slider" me semble simple. Il me paraît plus facile de le construire à partir de zéro que d'en trouver un déjà tout fait et de l'adapter.

    Pourquoi ne pas créer un tableau avec une ligne et deux colonnes, plusieurs images à gauche pouvant défiler avec un bout de code en JavaScript, et le texte placé à droite?

  5. #5
    Candidat au Club
    Femme Profil pro
    Webmarketer
    Inscrit en
    Août 2016
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Webmarketer

    Informations forums :
    Inscription : Août 2016
    Messages : 13
    Points : 3
    Points
    3
    Par défaut
    Je ne comprends pas trop en programmation et en développement, j'ai essayé mais je ne sais pas ou dois je mettre le code exactement.

  6. #6
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonjour,

    Je ne comprends pas trop en programmation et en développement,
    Dans ce cas, il vous faut consacrer un peu de temps à apprendre, en commençant par le HTML, puis le CSS et enfin le Javascript.
    Un début de solution, peut-être?
    Code : 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
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <script>
          var image_affichee="numero1";
          function changer() {
            if (image_affichee=="numero1") {
    	  document.getElementById("images").src="image2.jpg";
    	  image_affichee="numero2";
            }
            else if (image_affichee=="numero2") {
    	  document.getElementById("images").src="image3.jpg";
    	  image_affichee="numero3";
            }
            else if (image_affichee=="numero3") {
    	  document.getElementById("images").src="image1.jpg";
    	  image_affichee="numero1";
            }
          }
        </script>
        <style>
          table { margin : auto;}
        </style>
      </head>
      <body>
        <table>
          <tr>
            <td><img src="image1.jpg" id="images" onclick="changer();"></td> 
            <td>Bla bla...</td> 
          </tr>
        </table> 
      </body>
    </html>

  7. #7
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Salut,

    Oui je pense aussi que tu pourrais le faire juste en JavaScript...

    Si j'ai bien compris, tu as une liste d'image et tu veux en afficher une à la fois et passer d'une image à l'autre avec les flèches du clavier...

    Il y a ce fil : Utiliser les touches up et down en remplacement de la roulette lorsqu'il n'y a pas de souris dans lequel il y a un exemple où on affiche des images une à la fois et on passe d'une image à l'autre avec les flèches du clavier ou avec la roulette de la souris ou en passant la souris au-dessus des heures...

    Bon c'est assez lourd mais si tu as des images on pourrait faire un truc plus simple...

  8. #8
    Candidat au Club
    Femme Profil pro
    Webmarketer
    Inscrit en
    Août 2016
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Webmarketer

    Informations forums :
    Inscription : Août 2016
    Messages : 13
    Points : 3
    Points
    3
    Par défaut
    Merci pour vos réponses, mais je ne voudrais pas que l'image passe à l'autre avec les flèches du clavier, mais avec un bouton next. Je pense que j'ai expliqué le modèle recherché au début. Deux colonnes, une contient un texte fixe, et à coté une qui va contenir l'image et qui va se changer en cliquant sur ce bouton. Sachant que l'images se seront des liens.

  9. #9
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Oui dans ton cas il me semblait aussi qu'avec des boutons ce serait mieux mais dans tous les cas le principe est le même...

    Les deux colonnes, tu veux obligatoirement que ce soit une table ?

    Et pour les images, ce serait mieux de tous les charger dans la page et ensuite de les afficher une à la fois, sinon il faudra à chaque fois les télécharger...

    Combien il y a d'images ? Et les liens de ces images, ils sont où ? Dans un tableau ?

  10. #10
    Candidat au Club
    Femme Profil pro
    Webmarketer
    Inscrit en
    Août 2016
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Webmarketer

    Informations forums :
    Inscription : Août 2016
    Messages : 13
    Points : 3
    Points
    3
    Par défaut
    Le modèle que je voudrais va être appliquer sur les articles d'un blog alors le code pourrait être un tableau, je ne suis pas douée dans le codage, en ce qui concerne les images, je les insérer à partir D'Amazon sous forme de lien.

Discussions similaires

  1. Alignement texte avec image
    Par yanniks dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 15/03/2013, 16h15
  2. Filtrer un texte avec image dans une listView perso avec un ArrayAdapter
    Par vivelapsp dans le forum Composants graphiques
    Réponses: 1
    Dernier message: 18/07/2011, 10h50
  3. BALISE MAP souci avec image-lien
    Par darkart dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 15/04/2010, 04h23
  4. Transmettre le contenu d'une zone de texte avec un lien
    Par Philippe PONS dans le forum Langage
    Réponses: 1
    Dernier message: 17/03/2008, 18h37
  5. Pb lien avec image et texte dans un li
    Par lalouve dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 09/03/2006, 02h33

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