Comment créer une carte d'image avec CSS

Options

Je voulais quelque chose de «geek» alors j'ai opté pour un graphique de «poche» qui contient toutes les méthodes d'abonnement pour mon blog.

À l'époque du Web 1.0, une collection de liens comme celui-ci pouvait être construite en assemblant votre image avec des liens sur chaque graphique, puis en essayant de tout recoudre avec un tableau. Cela pourrait également être accompli en utilisant un carte d'image mais cela nécessite généralement un outil pour construire le système de coordonnées. L'utilisation de feuilles de style en cascade rend cela beaucoup plus facile… pas de collage d'images et pas d'essais de trouver un outil pour construire votre système de coordonnées!

  1. Créez votre image que vous aimeriez utiliser. Vous pouvez utiliser ce graphique ci-dessous (cliquez avec le bouton droit de la souris et enregistrez-le pour télécharger):
    Les options
  2. Téléchargez votre image dans un répertoire relatif à votre CSS. Dans WordPress, cela peut être fait plus facilement en le plaçant dans un dossier images dans votre répertoire de thèmes.
  3. Ajoutez votre HTML. C'est sympa et simple ... un div avec trois liens dedans:
    > div id = "subscribe">> a id = "rss" href = "[your feed link]" title = "Abonnez-vous avec RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[votre lien d'abonnement par e-mail]" title = "S'abonner par e-mail" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[votre lien mobile]" title = "Afficher la version mobile" >> span class = "hide"> Mobile> / span >> / a>> / div>
    
  4. Modifiez votre feuille de style en cascade. Vous allez ajouter 6 styles différents. 1 style pour le div global, 1 pour la balise a afin qu'elle n'affiche aucune décoration de texte, 1 style pour masquer le texte (utilisé pour l'accessibilité) et 1 spécification de style pour chacun des liens:
    #subscribe {/ * bloc d'image d'arrière-plan * / display: block; largeur: 215px; hauteur: 60px; background: url (images / options.png) sans répétition; margin-top: 0px; } #subscribe a {text-decoration: none; } .hide {visibilité: caché; } #rss {/ * Lien RSS * / float: left; position: absolue; largeur: 50px; hauteur: 50px; marge gauche: 20px; margin-top: 5px; } #email {/ * Email Link * / float: left; position: absolue; largeur: 50px; hauteur: 50px; marge gauche: 70px; margin-top: 5px; } #mobile {/ * Mobile Link * / float: gauche; position: absolue; largeur: 50px; hauteur: 50px; marge gauche: 130px; margin-top: 5px; }

Le positionnement est agréable et simple… ajoutez une hauteur et une largeur puis réglez la marge gauche du côté gauche de l'image, et la marge supérieure du côté supérieur de l'image!

Cet article «Comment faire» est destiné à être inclus dans le Concours ultime «Comment faire» les geeks sont sexy! Une note, il est vrai qu'une carte d'image peut avoir des polygones beaucoup plus complexes, mais je n'ai pas vraiment vu trop d'endroits où c'est un must. J'ai remarqué que les grandes images RSS sur les Geeks sont la barre latérale Sexy ... c'est un bon endroit pour un lien. 😉

MISE À JOUR 10/3/2007 pour une meilleure accessibilité avec les conseils de Phil!

Commanditaire : Si vous êtes un débutant dans la conception Web, créez votre propre site Web de la bonne manière en utilisant HTML et CSS, la 2e édition est un incontournable. Dans ce guide facile à suivre, vous apprendrez à créer un site Web de la meilleure façon possible - en le faisant vous-même!

41 Commentaires

  1. 1

    Doug, cela semble être une bonne méthode, mais elle est très inaccessible.

    Considérons un utilisateur aveugle avec un lecteur d'écran, un utilisateur avec un navigateur de texte uniquement ou toute personne visitant le site sans CSS ou Images activées (comme, peut-être un utilisateur mobile à la recherche du lien vers votre site convivial pour mobile). Aucun d'entre eux ne connaîtra ces trois liens car ils n'ont pas de texte. Si les images sont désactivées, un utilisateur ne verra même pas le texte alternatif pour décrire ce qui aurait été là car il s'agit d'une image d'arrière-plan.

    Mieux serait de découper les images, de les lier, de les mettre dans une liste et de les faire flotter les unes à côté des autres. Ou même utilisez du texte pour les liens et remplacez le texte en utilisant une technique de remplacement d'image standard. Cela semble pratique, mais cela rend les choses beaucoup plus difficiles / impossibles pour ceux qui n'utilisent pas de navigateur graphique standard.

    • 2
      • 3

        Doug,

        JAWS ne lit pas les titres des liens par défaut, mais vous avez raison, il peut le faire. Pourquoi rechercheriez-vous des titres de liens si vous ne saviez pas qu'il était là, et même si vous l'étiez, cela conduit sûrement à un problème de convivialité, ce qui signifie que vous offrez aux utilisateurs moins qualifiés une expérience de second ordre dans l'utilisation de votre site.

        Pour les navigateurs de texte, l'article vers lequel vous m'indiquez que Lynx vous permet également d'afficher une liste de titres de liens, mais mon point reste que si vous ne saviez pas qu'il y avait un lien, car il n'y avait pas de texte en premier lieu , pourquoi chercheriez-vous le texte du titre?

        Enfin, les attributs de titre de lien n'apparaîtront toujours pas pour les personnes naviguant sans images activées ou sans CSS activé.

        Alors oui, les liens avec les titres sont meilleurs que ceux sans, mais dans ce cas ce n'est que marginal.

        C'est pourquoi l'utilisation d'une image, pour que le texte alternatif puisse être lu, ou le remplacement d'image, afin que le texte soit là, est une option beaucoup plus sûre, plus accessible et plus utilisable.

        • 4

          Bonne information, Phil. Je vais essayer d'améliorer cela avec du texte mais simplement masquer le texte - de cette façon, un produit accessible comme JAWS lira le texte du lien et le texte sera affiché si CSS ou Images sont désactivés.

          Je ne suis pas d'accord que la seule solution accessible serait de mettre une image avec un lien, cependant.

  2. 5
    • 6
      • 7

        C'est quelque chose auquel nous ne prêtons souvent pas attention, Phil! De plus, rendre votre application accessible donne souvent de bons résultats aux moteurs de recherche.

        J'apprécie vraiment l'expertise et les commentaires!

  3. 8

    Je l'ai volé. Là, je l'ai dit.

    Doug, les graphismes sont fantastiques et le codage est si incroyablement simple que cela me fait peur (j'ai joué avec CSS et maintenant je «comprends»).

    J'ai modifié le code pour répondre à mes besoins, j'ai trouvé où déposer le bit HTML, et franchement, il a fière allure et a nettoyé le haut de ma barre latérale qui m'a rendu fou.

    Il se peut que je doive encore vous acheter ce café!

  4. 10

    Doug,

    Je vais être une voix dissidente, en utilisant mon expérience comme exemple. Je me souviens de nos e-mails lorsque mon adresse e-mail personnelle a changé et que vous avez noté que je devais simplement activer ma nouvelle adresse e-mail. Je dois admettre que j'ai eu beaucoup de mal à «découvrir» la nouvelle fonctionnalité de votre site pour me réinscrire. Cela s'expliquait en partie par le fait que le lien d'origine était un peu plus traditionnel et je me souvenais vaguement de celui-là. L'autre était que la demi-enveloppe latérale ne me ressemblait tout simplement pas au départ. Après environ 5 minutes ou plus, j'ai commencé à faire glisser ma souris sur chaque image et lorsque le titre «S'abonner avec e-mail» a été affiché, j'ai su que j'étais en affaires. Mon cerveau a également compris ce qu'était l'image du lien.

    Mais, au moins pour moi, une enveloppe latérale n'était tout simplement pas intuitive pour moi en tant qu'endroit pour s'abonner aux notifications par e-mail. Et (parce qu'on m'a dit de toujours finir par quelque chose de gentil) je suis d'accord avec Phil ci-dessus; la méthode est vraiment simple et l'ensemble fonctionne très bien. Je suppose que votre outil de conception a aidé à vous donner les dimensions exactes des 3 sections; est-ce une hypothèse correcte? Je dois le supposer, car si j'avais, disons, une image de 400 pixels de large, j'aurais besoin de connaître les bons paramètres, etc.

  5. 12
    • 13

      William,

      Il semble que vous ayez un conflit entre vos noms de classe de commentaires et les noms de classe dans le graphique de la barre latérale. Vous pouvez les nommer différemment pour résoudre le conflit. Faites-moi savoir si vous avez besoin d'un coup de main!

      Doug

  6. 14
  7. 15
  8. 16
  9. 17
  10. 18

    Belle approche, mais j'ai besoin de quelque chose pour une carte topographique, donc je ne peux pas utiliser de zones rectangulaires ... Je pense que je dois utiliser l'ancien style imagemap avec des coordonnées, mais je vais probablement creuser un peu plus loin ...

  11. 19

    Merci pour cette info, Doug. J'étais déjà venu ici et je me demandais comment vous y étiez. Nous voulions créer une carte comme celle-là à insérer après nos posts, et maintenant que nous en avons les moyens, nous pouvons le faire. Bravo!

  12. 20
  13. 21

    Salut Doug,
    J'ai laissé un commentaire précédent mais je me suis rendu compte que je n'avais guère offert un aperçu de mon dilemme. Nous avons adapté un thème wordpress pour nous aider à lancer notre sitcom en ligne ici:

    http://www.phaylen.com/blog/

    Maintenant, vous verrez que nous avons une bannière de navigation en haut, une image que nous avions l'intention de cartographier comme nous l'avons fait des dizaines de fois auparavant. / palmforehad. Aucun de nous ne comprend vraiment CSS, mais nous trébuchons suffisamment et jusqu'à présent nous avons bien fait jusqu'à présent. Votre article dans le SEUL sur des dizaines qui a fourni est un aperçu réel sur la façon d'utiliser facilement l'imagerie en CSS. J'ai quitté la feuille de style selon vos instructions, mais je n'ai aucune idée de l'endroit où placer le HTML. Tout ce que vous avez dit, c'est "Ajoutez votre html… C'est gentil et simple" et puis j'ai grincé des dents parce que je pensais ... "pas assez simple pour moi!" Je ne savais pas que je pouvais ajouter du HTML dans l'une de ces pages php dans l'éditeur de thème. Dois-je placer le code HTML dans l'en-tête? Le modèle d'index principal? Les fonctions? Je suppose que tous les utilisateurs de wordpress ont la possibilité de modifier leur thème dans l'éditeur de tableau de bord, ce qui semble assez universel dans ses fonctionnalités. Si vous pouviez suggérer où placer le code HTML, j'aimerais adapter le code oru à ma barre de navigation.

    Merci de partager vos connaissances avec la communauté. Je suis heureux de vous offrir un café.

    • 22

      Salut Phay!

      Tous les fichiers du thème de votre blog sont disponibles via le panneau d'administration pour modification. Si vous cliquez sur Présentation puis sur Éditeur de thèmes, vous devriez pouvoir voir une liste de vos fichiers à droite et un éditeur à gauche.

      Si vous souhaitez que cela soit dans votre barre latérale, vous avez probablement une page Barre latérale. Cliquez pour le modifier, puis placez le code HTML fourni dans la page où vous le souhaitez.

      Remarque: la modification de la feuille de style est relative à votre page, vous devrez donc télécharger l'image dans le répertoire des images du thème si vous la référencez comme vous le feriez pour d'autres images de votre thème.

      Hope that helps!

    • 23

      Phay,
      Je suis tombé sur ce site aujourd'hui et j'ai eu le même dilemme que vous. Je voulais également ajouter une image map à l'image d'en-tête. Après avoir joué avec pendant un moment, j'ai bien compris. Placez le code HTML div dans le fichier header.php. Je l'ai mis entre et. Je ne sais pas si votre modèle a ce codage exact, mais jouez avec lui dans le fichier header.php et vous le comprendrez.
      -
      paul

  14. 24

    Merci pour la réponse rapide!

    Non, je ne voulais pas que ce soit dans la barre latérale, c'est en haut de la page (vous pouvez voir dans le lien que j'ai fourni - la barre de navigation rose qui dit contant, à propos de l'émission ect ..)

    J'ai travaillé dans le tableau de bord toute la matinée, malheureusement, je ne sais pas dans quel fichier je place le html, comme indiqué ci-dessus, j'en ai plusieurs, header.php, main index.php, functions.php, footer.php. Je ne sais pas où insérer le code html. (la première partie que vous avez fournie, j'ai déjà inséré le reste dans ma feuille de style) J'ai mon image là-bas sur le site, tout est prêt, j'ai juste besoin de savoir où ajouter la partie html du code pour l'adapter.

    Merci beaucoup pour votre temps et pour répondre aux questions d'un novice.

    Phay

  15. 25

    … Ou peut-être que quelqu'un pourrait poster dans les commentaires sur le fichier dans lequel nous plaçons la partie html du code. Un monsieur qui a écrit quelques messages a dit qu'il l'avait compris. Je n'ai pas été aussi chanceux.

    Phaylène

  16. 26
  17. 27

    Je passe beaucoup de temps à trouver un moyen d'intégrer une image map cliquable dans wordpress, car elle supprime les balises de carte html. Votre façon de faire fonctionnerait, mais une carte des États-Unis est évidemment un moyen complexe de visser de cette façon. Je suis perdu.

    Aide.

    Il semble que le flash soit ma seule option?

    • 28

      Dave,

      Si vous mettez l'image dans votre modèle, tout ira bien. Si vous placez la carte d'image dans le contenu réel, vous pourriez rencontrer des problèmes de filtre. La façon dont j'ai résolu ce problème est terrible, mais j'ai parfois utilisé une iframe.

      Doug

  18. 29

    Salut,

    il semble que l'image map et les liens soient deux choses différentes, ils ne fonctionnent pas ensemble comme le fait une image map en html

    lorsque j'inclus le positionnement d'arrière-plan (centre gauche) pour la carte image, le positionnement des liens ne suit pas.

    un moyen de contourner cela? Im très amateur. Merci.

  19. 31

    Une approche similaire serait-elle utilisée pour une image map plus grande et plus compliquée que j'essaie d'utiliser?

    Si vous consultez mon site, cliquez sur les liens à gauche et vous verrez l'image que j'essaie d'utiliser comme carte d'image (sous l'alphabet de texte).

    En gros, essayez d'utiliser l'image pour accéder à chaque section de cette liste par lettre.

    Évidemment, j'ai passé 20 minutes à créer une carte avec GIMP, puis WP supprime les balises de la carte, c'est ainsi que j'ai trouvé votre site.

    Cependant, peut envisager d'utiliser Flash

    Merci.

  20. 33

    J'utilise actuellement une mise en page de modèle et j'édite avec mes propres trucs. Je veux ajouter une image map, mais je ne sais pas où la placer dans le CSS. l'image dont je veux faire une carte se trouve dans la partie en-tête.

  21. 34

    bonjour, j'ai construit mon site web sur joomla… je veux utiliser cette méthode pour faire du logo de ma page un lien vers l'accueil, on m'a dit que tu ne peux pas faire ça avec joomla mais cet article me donne de l'espoir! une aide par e-mail serait très appréciée… .merci

  22. 35

    Salut Doug - Je suis en train de créer une image map basée sur css plutôt complexe qui a également des rollovers à distance (dans ce cas, le texte s'affiche ailleurs sur la page lorsque vous survolez l'un des points chauds de l'image). Quoi qu'il en soit, je suis tombé sur votre exemple ici en recherchant cela ... et j'ai pensé partager la contribution suivante:

    1. Pour l'accessibilité, vous ne devez pas utiliser visibilité: none (ou display: none si vous avez envisagé cela) pour masquer le texte ici, en tant qu'élément stylisé avec visibilité: hidden ne sera pas lu par les lecteurs d'écran (ceux qui suivent les spécifications) .

    Utilisez plutôt une technique de remplacement d'image plus robuste. Je suggère la méthode Phark ou Gilder / Levin - ce ne sont que les noms les mieux documentés sur Google pour trouver les techniques de base. Je préfère G / L car il fonctionne également avec CSS activé mais les images sont désactivées.

    2. Bien que je ne le vois pas casser (en utilisant FF3), votre implémentation du positionnement comporte également des risques inhérents. Un élément positionné de manière absolue est positionné par rapport à son parent positionné le plus proche. Fondamentalement, vous voudriez définir explicitement un contexte de positionnement en appliquant «position: relative» à #subscription. Ensuite, les enfants (les liens positionnés) peuvent être positionnés dans ce parent. Cette méthode permet de garantir des résultats plus fiables sur tous les navigateurs.

    Vous devez également utiliser les déclarations de positionnement «top: x» et «left: x» (où x est la valeur de décalage, par exemple en px) plutôt que les marges pour gérer ce positionnement. Encore une fois, je ne le vois pas nécessairement casser la façon dont vous l'avez, mais le haut et la gauche sont destinés à cela, alors pourquoi ne pas les utiliser? De plus, vous avez des flottants et des marges définis sur le même élément, ce qui, dans des conditions spécifiques, provoque le bogue de la «double marge» dans IE6 (l'avez-vous testé ici?) - bien qu'il y ait un correctif, vous évitez ce problème entièrement en utilisant top et à gauche au lieu de marges pour le positionnement dans ce cas.

    3. Enfin, pourquoi ne pas utiliser une liste non ordonnée sémantiquement saine pour ces liens au lieu du div sans signification?

    Désolé pour le bourdonnement sur… j'aime juste partager, car je sais par expérience comment il existe de nombreuses façons différentes d'utiliser CSS pour obtenir le résultat souhaité, mais certaines méthodes fonctionnent certainement mieux (plus fiable, multi-navigateurs) que d'autres . HTH.

  23. 36
  24. 37
  25. 38

    Merci beaucoup!! Vos instructions m'ont sauvé des HEURES de travail… Je suis nouveau dans le développement web, et je viens de souffrir de mon premier grand projet. Je l'ai fait… le client est heureux, extatique en fait, et moi aussi!

  26. 39

    Bonjour, merci beaucoup d'avoir publié ceci! Des années plus tard et ça aide encore… bien! J'ai du mal à faire le lien entre ma carte d'image et le bon endroit. J'ai une bannière et je veux que les icônes sociales en haut à droite de la bannière soient liées en utilisant le code que vous avez fourni. Cela fonctionne très bien, sauf que je fais quelque chose de mal car mes liens apparaissent dans le coin supérieur gauche de l'écran, pas sur les icônes sociales, mais sur le logo. Je suis sûr que c'est quelque chose de simple, mais je ne peux tout simplement pas le comprendre. Je pensais que je le partagerais ici au cas où vous auriez des idées. Merci encore d'avoir publié ceci!

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..