Remplir un tableau d'images par clic

**oObzh22** · 27/10/2015, 16h39

Bonjour,

Je cherche à faire une "présentation interactive".
Étant formateur de secourisme, j’aimerais remplir un "tableau" de + ou - 26 cases avec des vignettes, mais selon les réponses données par les apprenants.

Du style, je clic sur une première vignette, elle va se positionner dans la case 1.
Je clic sur une deuxième vignette, elle va dans la case suivante (case2, ....) et ainsi de suite jusqu'au remplissage complet du "tableau".
Je ne sais pas s'il est possible d'avoir le tableau qui se rempli sur une page (projeter sur grand écran) et le "stock de vignette" sur une autre page (écran d'ordinateur) ?

Merci par avance.

**kOrt3x** · 27/10/2015, 21h58

c'est pas plus simple de faire ça dans un powerpoint ?

**oObzh22** · 29/10/2015, 09h43

Non, car avec PowerPoint, l'ordre d’apparition des vignettes est prédéfinies.

**NoSmoking** · 29/10/2015, 13h18

Bonjour,
il te faut regarder du coté des animations.
Au click, tu récupères la position de l'élément et la position d'affichage finale puis tu lances le déplacement.

Je n'ai pas l'habitude de proposer de s'aider de la bibliothèque jQuery mais dans ton cas je pense que cela sera le mieux même si l'on peut faire en vanilla

exemple réalisé pour le 2^éme défi
• Algorithme d'Euclide

**oObzh22** · 30/10/2015, 21h15

Merci, je vais chercher par là.

**NoSmoking** · 31/10/2015, 00h13

Voici un petit exemple simple de la mise en application en utilisant la bibliothèque jQuery

Code html :

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Déplacement images</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font: 1em/1.5 Verdana, sans-serif;
}
#main {
  position:relative;
  width:60em;
  margin:0 auto;
}
h1 {
  color:#069;
}
#main_dest {
  width:320px;
  margin:0 auto;
}
div[id^="dest"]{
  box-sizing:border-box;
  float:left;
  width:150px;
  height:100px;
  border:1px dashed #ccc;
  margin:5px;
}
#main_img {
  height:10em;
}
#main_img li{
  width:10em;
  height:10em;
  float:left;
  list-style: none;
}
#main_img img{
  position:relative;
  width:150px;
  max-height:100px;
  cursor:pointer;
}
#main_img img:hover {
  box-shadow:1px 1px 20px #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="main">
  <h1>Déplacement images au clic</h1>
  <div id="main_img">
    <ul>
      <li><img data-dest="dest_1" src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/logo_faq_tous_115.gif" alt=""></li>
      <li><img data-dest="dest_2" src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/logo_faq_google_maps_150.gif" alt=""></li>
      <li><img data-dest="dest_3" src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/faq_jquery_tiny.gif" alt=""></li>
      <li><img data-dest="dest_4" src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/faq_senchaextjs_tiny.gif" alt=""></li>
    </ul>
  </div>
  <div id="main_dest">
    <div id="dest_1"></div>
    <div id="dest_2"></div>
    <div id="dest_3"></div>
    <div id="dest_4"></div>
  </div>
</div>
<script>
$('img').on('click', function() {
    var $dest = $('#' + $(this).data('dest')),
        pos = $dest.offset(),
        thisPos = $(this).offset();
 
    $dest.css('background-color', '#f8f8fa');
 
    $(this).animate({
            left: '+=' + (pos.left - thisPos.left),
            top: '+=' + (pos.top - thisPos.top)
        },
        1000,
        function() {
            $dest.css('background-color', '');
        }
    );
});
</script>
</body>
</html>

si tu as besoin d'explication on sera toujours là.

Remplir un tableau d'images par clic

JavaScript

Vue hybride

Discussions similaires

Partager

Partager