Les images sur Instructables ont une fonctionnalité dans laquelle elles font apparaître du texte lorsque vous déplacez votre souris

sur les régions délimitées des images. Ceci est utilisé pour étiqueter des parties particulièrement intéressantes de la

image. C'est une fonctionnalité assez intéressante, et quelqu'un a demandé exactement comment une telle chose est faite.

Alors, voici un instructable.:-)

Malheureusement, cet Instructable est surtout obsolète

Provisions:

Étape 1: point de départ

Nous voici sur une page explicative "explorer". Je suis connecté sous mon

Nom d'utilisateur instructables, bien sûr.

Cliquez sur le lien "télécharger des images" pour accéder à votre bibliothèque d'images.

Étape 2: Aller à la bibliothèque d'images

Vraisemblablement, vous avez déjà chargé des images, basées sur l'autre instructable par "quelque chose".

Cliquez sur le lien "image libary" pour accéder à la page contenant les fichiers que vous avez déjà téléchargés.

Étape 3: Choisissez une photo

Sélectionnez et cliquez sur l'image à laquelle vous souhaitez ajouter du texte contextuel.

Cela fera passer Instructables en mode "édition d'image" à la résolution par défaut.

Vous serez dans le même type de mode "édition d'image" lorsque vous ajouterez une image à un Instructable que vous créez ou éditez, de sorte que vous n'avez pas à ajouter les fenêtres contextuelles juste après le téléchargement, séparément de la saisie d'un instructable. En fait, il est probablement plus logique de le faire dans le cadre de la création instructable (les étapes restantes sont identiques), où vous avez le contexte de votre … texte.

Étape 4: Créez la zone survolée

Cliquez sur un point et déplacez-le vers le coin opposé d'un rectangle contenant la partie de l'image où vous souhaitez afficher du texte.

Étape 5: Ajoutez le texte

Lorsque vous relâchez le bouton de la souris, l'éditeur Instructables affiche une zone à remplir avec du texte.

Étape 6: Fait?

Cliquez sur "Enregistrer" lorsque vous avez fini de saisir du texte. Ou cliquez sur Annuler si vous décidez que la boîte est au mauvais endroit et que vous souhaitez réessayer.

Une seule image peut avoir plusieurs zones survolées de la souris; Je ne sais pas s'il y a une vraie limite. La lisibilité nécessite un nombre relativement petit.

Je trouve utile de rendre les boîtes beaucoup plus grandes que l’article qu’elles soulignent. Cela les rend plus évidentes et plus faciles à sélectionner. Les zones peuvent se chevaucher, même si vous devez en sélectionner une dans une partie qui ne se chevauche pas. Et vous ne pouvez pas avoir une zone totalement dans une autre; seule la boîte extérieure fonctionnera. (Certaines des images de cet objet peuvent ressembler à une boîte dans une autre, mais ce n’est qu’une boîte en dehors d’un capture d'écran qui comprend l'image d'une petite boîte.)

Étape 7: N'est-ce pas intéressant?

Le texte contextuel de la souris devrait fonctionner à ce stade.

Notez que le texte en incrustation est associé à l'IMAGE et non à une instruction particulière.

Si vous avez plusieurs instructables contenant la même image, les zones pop-up apparaîtront dans chacune d'elles, que cela soit approprié ou non. Si vous voulez avoir la même image à différents endroits avec un texte contextuel différent, vous devez télécharger l'image plusieurs fois. (L'image de cette étape est un exemple; elle est également utilisée dans l'étape "intro", où la fenêtre contextuelle n'est pas tout à fait appropriée.)