Slider texte avec image lien

**beny56** · 21/09/2016, 16h17

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.

**eleydet** · 21/09/2016, 16h44

Bonjour,

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

**beny56** · 21/09/2016, 18h16

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.

**eleydet** · 21/09/2016, 22h07

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?

**beny56** · 22/09/2016, 00h13

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.

**eleydet** · 22/09/2016, 09h31

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>

**Beginner.** · 23/09/2016, 19h03

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...

**beny56** · 24/09/2016, 19h38

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.

**Beginner.** · 24/09/2016, 19h55

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 ?

**beny56** · 24/09/2016, 23h54

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.

Slider texte avec image lien

JavaScript

Discussions similaires

Partager

Partager