Création d'une carte d'images avec Handy ImageMapper par Silverage Software


Une carte d'image est une image qui fonctionne comme un grand bouton de lien de menu. Enfin, pas exactement. Parce qu'il s'agit d'une seule image, si cela fonctionnait comme le bouton d'hyperlien habituel, cliquer dessus vous amènerait à une seule destination. Cependant, une carte d'image est généralement utilisée comme un menu qui renvoie à plusieurs pages Web d'un site Web. Comment cela peut-il être fait?

Certaines zones de l'image du menu peuvent être désignées comme zones chaudes ou zones actives. Chaque zone active est associée à une destination de page Web différente. Toute image peut être utilisée comme carte d'image de menu. La magie réside dans la création des zones actives. Comme toute autre chose sur le WWW, il y a plus d'une façon de le faire. La plupart des programmes graphiques, tels qu'AdobeR PhotoshopR , ont une fonction de carte d'image que vous pouvez utiliser pour créer les zones actives. Cependant, tout ce dont vous avez vraiment besoin est un simple programme gratuit, appelé Handy ImageMapperR , qui peut être téléchargé gratuitement sur le site Web de Silverage Software. Après avoir téléchargé le programme, suivez les étapes ci-dessous pour créer une carte d'image à partir d'une image GIF, JPG, PNG ou BMP.

www.silveragesoftware.com

  1. Ouvrez le programme et vous verrez un grand espace blanc vide. Pour placer votre image dans cet espace, cliquez sur l'icône du dossier puis accédez à l'image que vous souhaitez utiliser. Double-cliquez sur l'image pour l'importer dans Handy ImageMapper.

    Vous avez maintenant la possibilité de dessiner une forme de rectangle, de cercle ou de polygone pour désigner les zones actives sur votre image de menu. Cliquez sur l'une de ces icônes.

  2. Cliquez et faites glisser pour dessiner la forme sur la zone de l'image que vous souhaitez être active et associée à une destination de lien. La zone active sera indiquée par une forme semi-transparente flottant sur la zone. Si vous faites une erreur, cliquez simplement sur l'icône de suppression (X) et recommencez.

    Sous les icônes de forme, vous trouverez la section Coords. Vous verrez les coordonnées de cette zone active répertoriées dans la boîte.

  3. Sous la section Coords se trouve la zone de saisie Info-bulle. Une info-bulle est le texte qui apparaît lorsque vous placez votre souris sur cette zone active. Ce doit être un ou deux mots qui indiquent au lecteur quelque chose sur la page Web de destination pour ce lien. Tapez votre info-bulle dans la zone de saisie de texte.

  4. La section suivante vers le bas est la zone de saisie URL du lien hypertexte HREF. Saisissez ou copiez et collez l'URL // de la page Web de destination dans cette zone.

  5. Par défaut, la carte d'image sera nommée carte1. Si vous préférez, vous pouvez renommer la carte d'image dans la zone de saisie inférieure.

  6. Répétez les étapes 2 à 4 pour chaque lien hypertexte dans votre image de menu.

    Lorsque vous avez terminé de créer les zones actives sur votre image de menu, cliquez sur le bouton Placer dans le presse-papiers et le programme générera le code HTML de votre carte d'image et placera le code dans votre presse-papiers.

  7. Ouvrez le fichier de votre page Web et collez le code HTML du programme dans le code de la page Web. Il ressemblera à quelque chose comme le code ci-dessous.









Comme vous pouvez le voir dans l'exemple, les coordonnées X et Y pour chaque zone active, ainsi que l'infobulle et l'emplacement URL de la page Web qui lui est associée, sont répertoriés dans la balise de carte. Sous cela, est le étiquette d'image. Vous remarquerez que l'URL dans la balise d'image est l'emplacement de l'image telle qu'elle est stockée sur votre disque dur. (C: \ ...) Vous voudrez changer cela à l'URL réelle de l'image telle qu'elle est stockée sur votre site Web. Le code USEMAP = "# map1" dans la balise d'image associe l'image à la balise de carte (MAP NAME = map1). Ce code doit être collé dans la ou les pages Web sur lesquelles vous souhaitez utiliser la carte d'image.




How To Make Clickable SVG Map HTML & CSS (Février 2021)



Tags Article: Création d'une carte d'image avec Handy ImageMapper par Silverage Software, HTML, Handy ImageMapper, Silverage Software, comment créer une carte d'image, moyen facile de créer une carte d'image, comment ajouter des zones actives à une carte d'image, zones actives désignées, carte d'image à partir d'une image GIF JPG PNG ou BMP, coordonnées X et Y pour la zone active

Comment gérer la chaleur

Comment gérer la chaleur

beauté et soi