Quelques exemples basiques de javascripts pour des interactions simples.
Enregistrez la page affichée au format HTML pour garder le fichier et réutiliser le code (les CSS et JS se trouve dans le même fichier), ou téléchargez le dossier associé (il s'agit, dans ces cas là, d'un dossier avec le fichier HTML et les éléments dépendants type son, CSS ou javascript supplémentaires):

#boiteDeDialogueSystème #clic #rollover #messageUtilisateur

• Un simple message lors d'un événement souris clic ou survol : voir

• Encore deux modes d'accès mais on différentie les messages : voir

• On se sert ici de la boite de dialogue pour faire entrer des données par l'utilisateur en plusieurs fois. Par exemple, pour concatener des données mots ou chiffres et former des nombres, ou des phrases : voir

• Idem, mais on fait une association pour composer un message : voir

• On utilise la boite de dialogue utilisateur pour poser une condition : voir

• On change le contenu d'un texte html en cliquant ou survolant un élément texte : voir

#clavier #son #boiteDeDialogueSystème

• On ouvre une boite de dialogue, avec l'élément alert, au moyen d'une touche du clavier (possible à utiliser avec une carte MakeyMakey) : voir

• On ouvre une boite de dialogue avec un message différent selon et la touche du clavier pressée (possible à utiliser avec une carte MakeyMakey) : voir

• Jouer un son au différent selon la touche de clavier frappée : voir - télécharger

#coordonnées #souris :

• On affiche simplement les coordonnées du curseur de la souris en mouvement : voir

• On utilise ces coordonnées pour tracer la souris : voir

• On utilise les coordonnées de la souris pour afficher des images différentes (le fichier a été simplifié, le dossier à télécharger en possède aussi une version plus complète) : voir - télécharger

#rollover #clic #souris #son

• Signalement, par un texte html, lorsque la souris survole une zone ou en ressort : voir

• Jouer un son au survol d'un texte par la souris : voir - télécharger

• Jouer un son au clic d'une zone par la souris : voir - télécharger

• Jouer un son au survol d'une zone invisible : voir - télécharger

• faire apparaître des zones/images supplémentaires en fonction d'une zone de clic : voir

#modificationCSS #bouton #clavier

• Diverses manipulations, avec de simples boutons, pour rendre un élément html, div ou autre, totalement interactif en changeant ses propriétés CSS : voir

• Diverses manipulations, avec des touches du clavier, pour rendre un élément html, div ou autre, totalement interactif en changeant ses propriétés CSS (possible à utiliser avec une carte MakeyMakey) : voir

#texte #lecture #manipulationCSS

• Lecture progressive d'un texte, en faisant apparaître progressivement ses paragraphes : voir

• Faire venir un texte progressivement, par survol d'un premier texte par la souris : voir

• Proposer diverses jeu de texte modifiés par les CSS et action souris : voir

#déplacement #page

• Navigation sur une large page, de zone en zone : voir - télécharger

#diaporama

> Diaporama plein écran défilant automatiquement : voir - télécharger

#manipulations #JQuery

NB : Le fichier utilise dans ce cas une bibliothèque de fichiers Javascript externes supplémentaires, inclus généralement dans le dossier zippé en téléchargement.

> Effet de zones onglets en accordéon pouvant contenir textes ou images : voir - télécharger

> Effet d'agrandissement de zone texte par un clic sur un bouton : voir - télécharger

> Jeu d'assemblage d'images façon cadavre exquis : voir - télécharger

> Jeu de recouvrement d'images : voir - télécharger

#curseur #souris #avecJQuery #sansJQuery

> Une image bouge en fonction de la position de la souris mais on ne peut pas l'attraper avec : voir - télécharger

> Le curseur de la souris a été remplacé par une image : voir - télécharger

> Une image repère la souris puis lui fonce dessus et la fait disparaître : voir - télécharger

> Plusieurs images suivent la souris en décalage formant une trainée lors des déplacements : voir - télécharger

#puzzle

> Une sorte de puzzle avec déplacements aimantés sur une grille invisible : voir - télécharger

#chronomètre

> Un chronomètre : voir - Où une version plus graphique voir

#scroll #image

> Changer d'image par scroll/défilement avec la molette de la souris, voir