Slider texte avec image lien

Version imprimable

21/09/2016, 15h17
beny56

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.
21/09/2016, 15h44
eleydet

Bonjour,

Voulez-vous nous proposer quelques images pour nous aider à comprendre?
21/09/2016, 17h16
beny56

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.
21/09/2016, 21h07
eleydet

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?
21/09/2016, 23h13
beny56

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.

Bonjour,

Citation:

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:

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>

23/09/2016, 18h03
Beginner.

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...
24/09/2016, 18h38
beny56

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.
24/09/2016, 18h55
Beginner.

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 ?
24/09/2016, 22h54
beny56

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.