Création de liens d'images et de cartes d'images

• Mai 19, 2024

La réponse de cette semaine est en réponse à une question du lecteur - "Pouvez-vous expliquer comment créer un lien d'image vers une page en HTML". Il existe plusieurs techniques différentes que vous pouvez utiliser pour les images liées. L'une consiste à lier l'image entière à votre code HTML et l'autre consiste à créer une carte d'image - où différentes parties de la même image sont liées à différents emplacements.

Image liée en HTML

Lier une petite image ou une icône est très simple, tout ce que vous avez à faire est de placer votre lien d'image dans l'hyperlien comme ceci:



Tout ce que j'ai fait ici a été de placer l'image dans le code HTML du lien. C'est le moyen le plus simple et le plus efficace de lier une petite image et cela se fait souvent avec des puces personnalisées, des icônes, etc. Mais, que se passe-t-il si vous voulez qu'une grande image soit liée à plusieurs endroits différents? C'est là que le découpage d'image est utile.

Découpe d'images dans Photoshop

Ceci est très facile à réaliser dans Photoshop. Vous devez utiliser une image qui n'est pas trop compliquée, car vous voulez que vos utilisateurs puissent voir clairement où cliquer sur l'image. Vous voulez également vous assurer que vos utilisateurs comprennent qu'ils doivent cliquer dans l'image pour savoir où ils vont. Développez soigneusement des cartes d'images avec votre utilisateur à l'esprit. Gardez à l'esprit que les images ne sont généralement pas aussi conviviales pour les moteurs de recherche que le texte sur une page, mais l'utilisation appropriée des balises alt dans vos tranches d'image peut vous y aider.

Une fois votre image créée, l'étape suivante consiste à «découper» votre image. L'icône de l'outil de coupe ressemble à un petit couteau exacto. Il est situé en haut de la barre d'outils et situé sous l'outil de recadrage - si vous cliquez sur l'icône «recadrer», les outils tranche et sélecteur de tranche apparaissent.

Sélectionnez l'outil tranche, maintenez le bouton gauche de la souris enfoncé et faites glisser soigneusement la tranche où vous le souhaitez, puis relâchez. Continuez et découpez l'image entière. Il devrait y avoir une tranche autour de chaque zone de l'image que vous souhaitez lier à une autre page. Toute grande zone blanche peut être une tranche.

Une fois votre image entièrement découpée, l'étape suivante consiste à utiliser l'outil «slice select», à cliquer sur chaque tranche et à partir de là, à choisir le type de tranche «image». En dessous, remplissez l'URL de l'endroit où vous souhaitez que cette tranche soit dirigée, suivi du champ de balise alt en bas. Les autres champs ne sont pas nécessaires pour un mappage d'image simple. Parcourez chaque tranche de la même manière jusqu'à ce que l'image entière soit tracée.

Une fois votre image complète, vous utiliserez l'option «enregistrer pour le Web et les appareils». Si vous cliquez sur «Fichier» en haut et regardez en dessous des options de sauvegarde typiques, vous verrez l'option d'enregistrer pour le Web et les appareils. Sélectionnez cette option et une boîte de dialogue s'ouvrira où vous pourrez prévisualiser à quoi ressemblera votre image. Si vous en êtes satisfait, appuyez sur le bouton Enregistrer et une autre boîte de dialogue s'ouvre. Assurez-vous que la deuxième option indique «enregistrer les images et HTML», puis enregistrez votre travail.

Accédez à votre dossier dans lequel vous avez enregistré le document HTML et ouvrez-le. Vous pouvez copier et coller ce code dans votre propre fichier HTML. Typiquement, ce HTML sera un peu bâclé. Si vous maîtrisez le HTML, vous pouvez le nettoyer à votre guise, mais cela devrait très bien fonctionner tel quel. Assurez-vous, comme toujours, que vos fichiers image, etc. sont aux bons emplacements, sinon votre image ne s'affichera pas.

Instructions Vidéo: CRÉER UNE IMAGE CLIQUABLE PAR ZONE POUR LE WEB ! (Mai 2024).