Créer du texte contextuel sur des images instructables : 7 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:10

Les images sur Instructables ont une fonctionnalité où elles font apparaître du texte lorsque vous déplacez votre souris sur les régions décrites des images. Ceci est utilisé pour étiqueter des parties particulièrement intéressantes de l'image. C'est une fonctionnalité assez intéressante, et quelqu'un a demandé exactement comment une telle chose est faite. Voici donc une instructable.:-)

Malheureusement, ce Instructable est pour la plupart obsolète

Étape 1: point de départ

Nous sommes ici sur une page « explorer » instructable typique. 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: Accédez à 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 « bibliothèque d'images » pour accéder à la page affichant les fichiers que vous avez déjà téléchargés.

Étape 3: Choisissez une image

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

Cela passera Instructables en mode « édition d'image » à la résolution par défaut. Vous serez dans le même type de mode « modification d'image » lorsque vous ajoutez une image à un Instructable que vous créez ou modifiez, vous n'avez donc pas besoin d'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 toutes les mêmes), où vous avez le contexte de votre… texte.

Étape 4: Créez la zone de survol de la souris

Cliquez sur un point et faites glisser vers l'autre coin d'un rectangle contenant la partie de l'image où vous souhaitez avoir du texte contextuel.

Étape 5: ajouter le texte

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

Étape 6: Terminé ?

Cliquez sur « enregistrer » lorsque vous avez terminé de saisir du texte. Ou cliquez sur Annuler si vous décidez que la case n'est pas au bon endroit et que vous voulez réessayer. Une même image peut avoir plusieurs zones de survol; 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 cases beaucoup plus grandes que l'élément qu'elles mettent en évidence, cela les rend plus évidentes et plus faciles à sélectionner. Les zones peuvent se chevaucher, bien que vous deviez pratiquement en sélectionner une dans une partie qui ne se chevauche pas. Et vous ne pouvez pas avoir une zone totalement à l'intérieur d'une autre; seule la boîte extérieure fonctionnera. (Certaines des images de cette instructable peuvent sembler avoir une boîte à l'intérieur d'une autre, mais elles ne sont en réalité qu'une seule boîte à l'extérieur d'une capture d'écran qui inclut l'image d'une boîte plus petite.)

Étape 7: N'est-ce pas bien ?

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

Notez que le texte contextuel est associé à l'IMAGE, pas à un instructable particulier. Si vous avez plusieurs instructables contenant la même image, les zones contextuelles apparaîtront dans chacune d'elles, que cela soit approprié ou non. Si vous souhaitez 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.)