Sélectionner une page


Exemple

Voici le contenu des hotspots d’image que nous allons créer dans ce tutoriel:

Quand les hotspots d’image sont-ils utilisés?

Les hotspots d’image peuvent être utiles pour créer des infographies rapidement et facilement. Utilisez n’importe quelle image et enrichissez-la de points d’intérêt et d’informations détaillées sur les détails affichés. L’utilisateur est activé en interagissant avec l’image.

Étape 1: sujet

Nous en utiliserons un Image trouvée sur Wikimedia Commons de différentes baies comme image de fond pour nos hotspots d’image.

Il y a trois types de baies dans l’image, nous allons donc ajouter quatre points chauds:

  • Fraises
  • Myrtilles
  • Mûres
  • Framboises

Étape 2: création de hotspots d’image

Choisir Nouveau contenu Option et choisissez Hotspots d’image dans la liste des types de contenu:

Étape 3: éditeur de hotspot d’image

L’éditeur de hotspot d’image devrait maintenant apparaître. La partie supérieure de l’éditeur ressemble à ceci:

Étape 4: image d’arrière-plan

Lorsque vous choisissez un papier peint, gardez deux choses à l’esprit:

  • L’image est mise à l’échelle (proportionnellement) pour correspondre à la largeur maximale du conteneur dans lequel elle est placée.
  • Il est possible d’afficher les hotspots d’image en mode plein écran.

Par conséquent, choisissez une image avec une résolution appropriée.

Nous utilisons l’image trouvée en pleine résolution Ici.

Assurez-vous d’ajouter les informations de licence ou de copyright associées à l’image d’arrière-plan que vous utilisez.

Étape 5: symboles et couleur

Ensuite, il y a Symbole de point d’accès et Couleur du hotspot Possibilité:

Vous pouvez choisir dans la liste des Symboles prédéfinis ou téléchargez votre icône personnalisée:

Couleur du hotspot est la couleur d’arrière-plan des hotspots. Vous pouvez définir une couleur d’arrière-plan pour chacun des symboles prédéfinis. La couleur est spécifiée au format hexadécimal. Vous pouvez utiliser ce sélecteur de couleur pour trouver le code hexadécimal à six chiffres de la couleur de votre choix.

Nous allons utiliser du noir qui a le code hexadécimal 000000 et produira ce résultat final:

Étape 6: création d’un hotspot

Chaque hotspot possède les attributs suivants:

  • Entête
  • Position du point chaud
  • Contenu contextuel

Vous pouvez ajouter autant de hotspots que vous le souhaitez, à condition qu’il y ait suffisamment d’espace pour tous les insérer dans votre image.

le Entête est le titre du hotspot et s’affiche lorsque l’utilisateur appuie sur le bouton hotspot.

Cliquez n’importe où dans l’image où vous souhaitez configurer un hotspot. Le cercle vert s’affiche la position d’un nouveau hotspot. Le hotspot peut être repositionné en cliquant à nouveau n’importe où ailleurs dans l’image.

Contenu contextuel Peut être les deux:

Popup est utilisé pour décrire le hotspot sélectionné. Le hotspot peut être décrit en utilisant une text, une vidéo ou une image. Vous pouvez ajouter autant de texte que vous le souhaitez. Des barres de défilement apparaissent lorsque la quantité de texte de l’image ne peut pas être visualisée.

Nous utiliserons Fraises comme le Entête pour notre premier hotspot et les suivants texte::

Les fraises sont les seuls fruits avec leurs graines à l’extérieur et on dit qu’elles renforcent l’immunité.

Étape 7: terminer

appuyez sur la Ajouter un hotspot Cliquez sur le bouton pour ajouter les trois autres hotspots de la même manière que ci-dessus.

économiser Le nœud pour afficher vos hotspots d’image finis.
Vous devriez maintenant avoir le même résultat que ça Exemple en haut de la page.
N’hésitez pas à laisser vos commentaires ou suggestions pour améliorer ce tutoriel.



Source link

Recent Posts