Cette entrée a été publiée dans Clic et Survol de la Souris, Gif animé le par .
moustique1_02

La souris et la BD numérique

L’aspect numérique : La souris est un élément clé de l’interaction homme-ordinateur, elle permet d’impliquer le lecteur dans une histoire en BD interactive en créant des actions au survol et au clic des images avec la souris.

Le résumé : dans cette BD bête et méchante, le lecteur devient un moustique et va prendre un malin plaisir à aller piquer de pauvres animaux en leur cliquant dessus.

Attention : cette courte BD est prévue pour être lue sur un ordinateur avec une souris et non pour les écrans tactiles.

Allumez le son !

Lire la BD Le Moustique

Tutoriel :

Pour réaliser une page comme celle-là, voici 15 étapes à suivre :

1) Télécharger le zip du programme en cliquant ici.
2) « Déziper » le dossier.

3) Ouvrir le fichier clic-et-survol.html avec un éditeur html (TextWrangler sous Mac et Notepad++ sous Windows)

4) Compléter le fichier en suivant les indications écrites /*comme ça*/ et <!--comme ça-->, soit :
5) Ecrire le titre de votre histoire dans les balises <title></title>.
6) Ecrire le nom de fichier de votre pointeur de souris personnalisé.
7) Inscrivez la largeur de votre BD si vous souhaitez la centrer horizontalement (width=largeur).
8) Complétez l’adresse de votre site web.
9) Renseignez le nom de fichier de votre fond sonore.
10) Inscrivez votre titre.
11) Renseignez les noms de fichier de vos différents sons et donnez leur un « id ».
12) Renseignez les noms de fichier de vos images :
« onMouseOver » signifie au survol de la souris
« onMouseDown » signifie au clic.
« onMousOut » signifie quand la souris ne survol plus l’image.

13) Enregistrez le fichier et ouvrez-le dans le navigateur web !
14) Il ne vous reste qu’à partager votre création en la mettant en ligne sur votre serveur.

15) Un précision par rapport au dossier : vous pouvez supprimer les images et les sons, mais ne touchez pas aux fichiers « souris.js » et « style.css ».

3 réflexions au sujet de « La souris et la BD numérique »

  1. Tony

    C’est EXACTEMENT le même dispositif que j’ai proposé à la résidence Pierre Feuille Ciseaux, vivement que mes outils soient en ligne (ça ne dépend pas de moi malheureusement grrr). Il faut préciser quand même que peu de navigateurs accepte la disparition du curseur d’origine de la souris…

    Répondre
    1. gaillotfrancois2401

      Effectivement ! Je ne me suis pas encore trop renseigné sur les lectures que font les navigateurs, c’est le prochain chantier !

      Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>