Une image cliquable est une image avec des URL "mappées" dessus. Vous pouvez habiller votre site Web ou votre page de démarrage personnelle avec une carte-image avec vos sites préférés que vous aimez visiter. Il existe de nombreux logiciels permettant de le faire, mais cet article utilisera Gimp.
Pas
Étape 1. Créez un premier graphique que vous allez cartographier
Vous pouvez utiliser des images, des images, tout ce qui vous convient. Ici, nous utiliserons wikiHow, le forum wikiHow et iGoogle.
Étape 2. Après avoir créé l'image (ou l'avoir ouverte), accédez à Filtres >> Web >> ImageMap
L'écran de dialogue Gimp ImageMap
Étape 3. Cliquez sur le rectangle à droite de l'écran, puis sélectionnez l'une des images que vous souhaitez utiliser
Dans cette capture d'écran, wikiHow est sélectionné. Remplissez les informations nécessaires dans l'écran de dialogue qui apparaît.
Cliquez sur le rectangle et vous pouvez voir l'emplacement exact du graphique
Étape 4. Continuez ce processus pour le reste de votre carte
Étape 5. Une fois que vous avez fini de définir toutes les zones de liens, enregistrez votre image cliquable
GIMP proposera automatiquement de l'enregistrer en tant que fichier avec une extension.map. Si vous le souhaitez, vous pouvez l'enregistrer comme cela. Mais ce fichier contient le code HTML (pas d'images) que nous devons modifier et copier dans notre propre page Web, il est donc recommandé de l'enregistrer sous [nom de fichier].html et de passer directement à l'étape 7.
Étape 6. SI vous ne l'avez pas enregistré en tant que fichier HTML, recherchez votre fichier enregistré et renommez l'extension en.html
Vous pouvez recevoir un avertissement concernant la modification des extensions de fichier. Cliquez sur oui pour continuer.
Étape 7. Utilisez un éditeur de texte pour ouvrir ce fichier HTML
Vous remarquerez que ce fichier contient simplement une liste de coordonnées et d'URL. C'est le code qui indique à un navigateur quelles URL attribuer à quelle partie de votre image.
Étape 8. Assurez-vous que le chemin du fichier défini dans
des liens vers l'image sur laquelle vous souhaitez mapper les URL.
Ne pas le pointer correctement sur l'image peut entraîner l'absence d'affichage de l'image.
Étape 9. OPTIONNEL:
Utilisez un navigateur pour ouvrir votre fichier HTML; si tout fonctionne, vous devriez voir l'image avec toutes les URL mappées dessus en fonction des zones que vous avez définies.
Étape 10. Ajoutez votre image cliquable dans votre page Web HTML
Vous devrez copier TOUTES les lignes de code que vous voyez, y compris le
tag (qui définit le chemin d'accès à votre image source) et tout ce qui se trouve entre les tags. C'est ça! Vous avez terminé.
