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 :

Remplir un tableau d'images par clic


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Octobre 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Boutique - Magasin

    Informations forums :
    Inscription : Octobre 2012
    Messages : 6
    Par défaut Remplir un tableau d'images par clic
    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.

  2. #2
    Modérateur

    Avatar de kOrt3x
    Homme Profil pro
    Technicien Informatique/Webmaster
    Inscrit en
    Septembre 2006
    Messages
    3 650
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Technicien Informatique/Webmaster
    Secteur : Santé

    Informations forums :
    Inscription : Septembre 2006
    Messages : 3 650
    Par défaut
    c'est pas plus simple de faire ça dans un powerpoint ?
    La rubrique Mac
    Les cours & tutoriels Mac
    Critiques de Livres Mac & iOS
    FAQ Mac & iOS

    ________________________________________________________________________
    QuickEvent : Prise de rendez-vous rapide pour iPhone/iPad et iPod Touch (AppStore)
    Mon Livre sur AppleScript : AppleScript: L'essentiel du langage et de ses applications

  3. #3
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Octobre 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Boutique - Magasin

    Informations forums :
    Inscription : Octobre 2012
    Messages : 6
    Par défaut
    Non, car avec PowerPoint, l'ordre d’apparition des vignettes est prédéfinies.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 208
    Par défaut
    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

  5. #5
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Octobre 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Boutique - Magasin

    Informations forums :
    Inscription : Octobre 2012
    Messages : 6
    Par défaut
    Merci, je vais chercher par là.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 208
    Par défaut
    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à.

Discussions similaires

  1. Réponses: 1
    Dernier message: 14/04/2010, 17h13
  2. Modifier images dans feuilXl par clic de souris (Excel2003)
    Par Jacdan dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 06/10/2008, 23h16
  3. remplir un tableau par requete
    Par temperature dans le forum Requêtes
    Réponses: 6
    Dernier message: 14/04/2006, 15h45
  4. Remplir un tableau par une référence externe
    Par vodevil dans le forum Langage
    Réponses: 1
    Dernier message: 26/03/2006, 16h00
  5. [MySQL] Remplir un tableau par requêtes sql
    Par Melekitto dans le forum PHP & Base de données
    Réponses: 3
    Dernier message: 11/02/2006, 17h30

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