Com es crea un mapa d’imatges amb CSS

Opcions

Volia alguna cosa "friki", així que vaig decidir un gràfic "de butxaca" que contenia tots els mètodes de subscripció al meu bloc.

Als dies de la Web 1.0, es podia crear una col·lecció d'enllaços com aquest combinant la imatge amb enllaços a cada gràfic i després intentant cosir-ho tot junt amb una taula. També es podria aconseguir utilitzant un fitxer mapa d’imatges però això sol requerir una eina per construir el sistema de coordenades. Utilitzar fulls d’estil en cascada fa que sigui molt més fàcil ... no s’uneixen imatges ni s’intenta trobar una eina per construir el vostre sistema de coordenades.

  1. Creeu la vostra imatge que vulgueu utilitzar. Podeu utilitzar aquest gràfic a continuació (feu clic amb el botó dret i deseu-lo per baixar-lo):
    opcions
  2. Pengeu la vostra imatge a un directori relatiu al vostre CSS. A WordPress, això es pot fer més fàcil col·locant-lo a una carpeta d'imatges del directori de temes.
  3. Afegiu el vostre HTML. És agradable i senzill ... un div amb tres enllaços:
    > div id = "subscribe">> a id = "rss" href = "[your feed link]" title = "Subscribe with RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[el vostre enllaç de subscripció al correu electrònic" "title =" Subscriure-us amb el correu electrònic ">> span class =" hide "> Email> / span >> / a>> a id =" mobile "href = "[el vostre enllaç mòbil]" title = "Veure la versió mòbil" >> span class = "hide"> Mòbil> / span >> / a>> / div>
    
  4. Editeu el full d'estil en cascada. Afegireu 6 estils diferents. 1 estil per a la divisió general, 1 per a l'etiqueta a perquè no mostri cap decoració de text, 1 estil per amagar el text (utilitzat per a l'accessibilitat) i 1 especificació d'estil per a cadascun dels enllaços:
    #subscribe {/ * bloc de la imatge de fons * / display: block; amplada: 215 px; alçada: 60 px; background: url (images / options.png) sense repetir; marge superior: 0 px; } #subscribe a {text-decoration: none; } .hide {visible: hidden; } #rss {/ * Enllaç RSS * / float: left; posició: absoluta; amplada: 50 px; alçada: 50 px; marge-esquerra: 20 px; marge superior: 5 px; } #email {/ * Link Link * / float: left; posició: absoluta; amplada: 50 px; alçada: 50 px; marge-esquerra: 70 px; marge superior: 5 px; } #mobile {/ * Mobile Link * / float: left; posició: absoluta; amplada: 50 px; alçada: 50 px; marge-esquerra: 130 px; marge superior: 5 px; }

El posicionament és senzill i senzill ... afegiu una alçada i una amplada i, a continuació, configureu el marge esquerre des del costat esquerre de la imatge i el marge superior des del costat superior de la imatge.

Aquesta publicació "Com fer-ho" és per a l'entrada al Els frikis són el concurs "Com fer" de Sexy! Una nota, és cert que un mapa d’imatges pot tenir polígons molt més complexos, però realment no he vist massa llocs on això sigui imprescindible. Em vaig adonar que la gran imatge RSS dels Geeks és la barra lateral Sexy ... és un bon lloc per a un enllaç. 😉

ACTUALITZAT el 10/3/2007 per a una millor accessibilitat amb l'assessorament de Phil!

Patrocinador: Si sou un novell en disseny de llocs web, creeu el vostre propi lloc web de la manera correcta mitjançant HTML i CSS, la segona edició és imprescindible. En aquesta guia fàcil de seguir, aprendreu a crear un lloc web de la millor manera possible, fent-ho vosaltres mateixos.

41 Comentaris

  1. 1

    Doug, sembla un bon mètode, però és molt inaccessible.

    Penseu en un usuari cec amb un lector de pantalla, un usuari amb un navegador només de text o qualsevol persona que visiti el lloc sense CSS o Imatges habilitats (com, potser, un usuari mòbil que busqui l'enllaç al vostre lloc adaptat per a mòbils). Cap d'ells sabrà sobre aquests tres enllaços perquè no tenen text. Si les imatges estan desactivades, l'usuari ni tan sols veurà el text alternatiu per descriure el que hi hauria estat perquè és una imatge de fons.

    Millor seria tallar les imatges, enllaçar-les, posar-les en una llista i flotar-les una al costat de l'altra. O fins i tot utilitzeu text per als enllaços i substituïu-lo mitjançant una tècnica estàndard de substitució d'imatges. Això sembla convenient, però fa que les coses siguin molt més difícils/impossibles per a aquells que no utilitzen un navegador gràfic estàndard.

    • 2
      • 3

        Doug,

        JAWS no llegeix els títols dels enllaços per defecte, però tens raó, ho pot fer. Per què estaríeu buscant títols d'enllaços si no sabíeu que hi era, i fins i tot si ho fos, segurament això es redueix a un problema d'usabilitat, el que significa que esteu oferint als usuaris amb menys capacitat una experiència de segon nivell d'utilitzar el vostre lloc.

        Per als navegadors de text, l'article que m'assenyala a aquest Lynx també us permet mostrar una llista de títols d'enllaços, però el meu punt continua sent que si no sabíeu que hi havia un enllaç, ja que en primer lloc no hi havia text. , per què buscaríeu el text del títol?

        Finalment, els atributs del títol de l'enllaç encara no apareixeran per a ningú que navegui sense les imatges activades o sense CSS habilitat.

        Així que sí, els enllaços amb títols són millors que els sense, però en aquest cas només són marginals.

        És per això que l'ús d'una imatge, perquè es pugui llegir el text alternatiu, o la substitució d'imatges, perquè el text hi sigui, és una opció molt més segura, més accessible i més utilitzable.

        • 4

          Bona informació, Phil. Intentaré millorar-ho amb text, però simplement amagar-lo; d'aquesta manera, un producte accessible com JAWS llegirà el text de l'enllaç i el text es mostrarà si CSS o Imatges estan desactivats.

          No estic d'acord que l'única solució accessible seria posar una imatge amb un enllaç, però.

  2. 5
  3. 8

    El vaig robar. Allà, ho vaig dir.

    Doug, els gràfics són fantàstics i la codificació és tan increïblement senzilla que em fa por (he estat jugant amb CSS i ara per fi "ho entenc").

    He ajustat el codi per satisfer les meves necessitats, he descobert on posar el bit HTML i, francament, té un aspecte fantàstic i ha netejat la part superior de la meva barra lateral que m'ha tornat BOGE.

    Potser t'hauria de comprar aquest cafè encara!

  4. 10

    Doug,

    Seré una veu dissident, fent servir la meva experiència com a exemple. Recordo els nostres correus electrònics quan el meu correu electrònic de casa va canviar i vas observar que simplement havia d'activar-me amb el meu nou. He d'admetre que vaig passar molt de temps "descobrint" la nova funció del vostre lloc per tornar-hi a activar-se. Part d'això va ser perquè l'enllaç original era una mica més tradicional i el vaig recordar vagament. L'altre va ser perquè el mig sobre lateral no em semblava un sobre inicialment. Després d'uns 5 minuts o més, vaig començar a passar el ratolí per sobre de cada imatge i quan va aparèixer el títol "Subscriu-te amb correu electrònic", vaig saber que estava en el negoci. El meu cervell també va descobrir quina era la imatge de l'enllaç.

    Però, almenys per a mi, un sobre lateral no em va ser intuïtiu com a lloc on subscriure's a les notificacions per correu electrònic. I (perquè em van dir que acabés sempre amb alguna cosa agradable) estic d'acord amb en Phil a dalt; el mètode és realment senzill i tot l'element funciona molt bé. Crec que la vostra eina de disseny us va ajudar a donar-vos les dimensions exactes de les 3 seccions; és una suposició correcta? He de suposar que sí, ja que si tingués, per exemple, una imatge de 400 píxels d'ample hauria de conèixer la configuració adequada, etc.

  5. 12
    • 13

      Guillem,

      Sembla que podeu tenir un conflicte entre els noms de les classes de comentaris i els noms de les classes del gràfic de la barra lateral. Podeu anomenar-los de manera diferent per aclarir el conflicte. Avisa'm si necessites un cop de mà!

      Doug

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

    Un enfocament agradable, però necessito alguna cosa per a un mapa topogràfic, així que no puc utilitzar àrees rectangulars... Crec que he d'utilitzar el mapa d'imatges d'estil antic amb coordenades, però probablement aprofundiré una mica més...

  11. 19

    Gràcies per aquesta informació, Doug. Ja havia estat aquí abans i em vaig preguntar com ho vas fer. Volíem crear un mapa com aquest per inserir després de les nostres publicacions, i ara que tenim els mitjans, ho podem fer. Bravo!

  12. 20
  13. 21

    Hola Doug,
    Vaig deixar un comentari anterior, però em vaig adonar que gairebé no oferia cap visió del meu dilema. Hem estat adaptant un tema de wordpress per ajudar-nos a llançar la nostra sitcom en línia aquí:

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

    Ara, veureu que tenim un bàner de navegació a la part superior, una imatge que preteníem mapejar tal com hem fet desenes de vegades abans. /palm davanter. Cap de nosaltres entenem realment CSS, però ens ensopeguem amb prou feines i fins ara ho hem fet bé. El vostre article a l'ÚNIC de les dotzenes que va proporcionar són una visió real sobre com utilitzar fàcilment el mapatge d'imatges en CSS. He editat el full d'estil segons les vostres indicacions, però no tinc ni idea d'on col·locar l'HTML. Tot el que vas dir és "Afegeix el teu html... És agradable i senzill" i després em vaig enfadar perquè vaig pensar... "No és prou senzill per a mi!" No sabia que podria afegir html a qualsevol d'aquestes pàgines php a l'editor de temes. Col·loco l'html a la capçalera? La plantilla de l'índex principal? Les funcions? Suposo que tots els usuaris de wordpress tenen l'opció d'editar el seu tema a l'editor del tauler, que sembla força universal en funcionalitat. Si podríeu suggerir on col·locar l'html, m'encantaria adaptar el codi oru per a la meva barra de navegació.

    Gràcies per compartir el teu coneixement amb la comunitat. Estic content de portar-te un cafè.

    • 22

      Hola Phay!

      Tots els fitxers del tema del vostre bloc estan disponibles al tauler d'administració per editar-los. Si feu clic a Presentació i després a Editor de temes, hauríeu de poder veure una llista dels vostres fitxers a la dreta i un editor a l'esquerra.

      Si voleu que això estigui a la vostra barra lateral, probablement tingueu una pàgina de barra lateral. Feu clic per editar-lo i, a continuació, col·loqueu l'HTML proporcionat a la pàgina on vulgueu.

      Una nota: l'edició del full d'estil és relativa a la vostra pàgina, de manera que haureu de penjar la imatge al directori d'imatges del tema si la feu referència com ho faríeu amb altres imatges del vostre tema.

      Espero que l'ajudi!

    • 23

      Phay,
      Avui he trobat aquest lloc i he tingut el mateix dilema que tu. També volia afegir un mapa d'imatge a la imatge de capçalera. Després de jugar-hi una estona, ho vaig encertar. Posa l'HTML div al fitxer header.php. Ho poso entre i . No estic segur de si la vostra plantilla té aquesta codificació exacta, però jugueu-hi al fitxer header.php i ho descobrireu.
      -
      Pau

  14. 24

    Gràcies per la ràpida resposta!

    No, no volia que estigués a la barra lateral, està a la part superior de la pàgina (podeu veure a l'enllaç que us he proporcionat: la barra de navegació rosa que diu "contant", sobre el programa, etc.)

    He estat treballant al tauler tot el matí, malauradament, no estic segur en quin fitxer col·loco l'html, com s'ha dit anteriorment, en tinc diversos, header.php, main index.php, functions.php, footer.php. No estic segur d'on inserir el codi html. (la primera part que vau proporcionar, ja he inserit la resta al meu full d'estil) Tinc la meva imatge allà al lloc web, tot està a punt, només necessito saber on afegir la part html del codi per adaptar-lo.

    Moltes gràcies pel teu temps i per respondre les preguntes d'un novell.

    fresat

  15. 25
  16. 26
  17. 27

    M'estic passant molt bé trobant una manera d'inserir un mapa d'imatge clicable a wordpress perquè elimina les etiquetes de mapa html. La teva manera funcionaria, però un mapa dels Estats Units és, òbviament, molt complex de fer servir d'aquesta manera. Estic perdut.

    Ajuda

    Sembla que el flash és la meva única opció?

    • 28

      Dave,

      Si poseu la imatge a la vostra plantilla, us anirà bé. Si poseu el mapa d'imatge al contingut real, podríeu trobar-vos amb problemes de filtre. La manera com he treballat amb això és terrible, però de vegades he utilitzat un iframe.

      Doug

  18. 29

    Hola,

    sembla que el mapa d'imatge i els enllaços són dues coses diferents, no funcionen junts com ho fa un mapa d'imatge en html

    quan incloc el posicionament de fons (centre esquerre) per al mapa d'imatge, el posicionament dels enllaços no segueix.

    alguna manera d'evitar això? sóc molt amateur. gràcies.

  19. 31

    S'utilitzaria un enfocament similar per a un mapa d'imatge més gran i complicat com el que estic intentant utilitzar?

    Si visualitzeu el meu lloc, feu clic als enllaços de l'esquerra i veureu la imatge que estic intentant utilitzar com a mapa d'imatge (sota l'alfabet de text).

    Bàsicament, intentant utilitzar la Imatge per anar a cada secció d'aquesta llista per lletra.

    Evidentment, vaig passar 20 minuts construint un mapa amb GIMP, i després WP elimina les etiquetes del mapa, així que vaig trobar el vostre lloc.

    No obstant això, pot contemplar l'ús de Flash

    Gràcies.

  20. 33

    Actualment estic utilitzant un disseny de plantilla i editant amb les meves coses. Vull afegir un mapa d'imatge, però no estic segur d'on col·locar-lo al CSS. la imatge que vull fer un mapa és a la part de capçalera.

  21. 34

    hola, he creat el meu lloc web amb joomla... vull utilitzar aquest mètode per fer que el logotip de la meva pàgina sigui un enllaç a casa, m'han dit que no ho podeu fer amb joomla, però aquest article em dona esperança! L'ajuda per correu electrònic seria molt apreciada... gràcies

  22. 35

    Hola Doug: estic creant un mapa d'imatges basat en CSS força complex que també té canvis remots (en aquest cas, el text es mostra en un altre lloc de la pàgina quan passeu el cursor per un dels punts d'imatge). De totes maneres, em vaig trobar amb el teu exemple mentre investigava això... i vaig pensar que compartiria la següent entrada:

    1. Per a l'accessibilitat, no hauríeu d'utilitzar visibility:none (o display:none si ho heu considerat) per amagar el text aquí, com a element amb estil amb visibility: hidden no el llegiran els lectors de pantalla (els que segueixen les especificacions) .

    En comptes d'això, utilitzeu una tècnica de substitució d'imatges més robusta. Suggereixo el mètode Phark o Gilder/Levin: aquests són només els noms més ben documentats per buscar a Google per trobar les tècniques bàsiques. Prefereixo G/L, ja que també funciona amb CSS habilitat, però les imatges estan desactivades.

    2. Tot i que no veig que es trenqui (utilitzant FF3), la vostra implementació del posicionament també té riscos inherents. Un element posicionat absolutament es posiciona en relació al seu pare més proper. Bàsicament, voldríeu establir explícitament un context de posicionament aplicant "position:relative" a #subscription. A continuació, els fills (els enllaços posicionats) es poden posicionar dins d'aquest pare. Aquest mètode ajuda a garantir resultats més fiables en tots els navegadors.

    A més, hauríeu d'utilitzar les declaracions de posicionament de "superior: x" i "esquerra: x" (on x és el valor de compensació, per exemple en px) en lloc de marges per gestionar aquest posicionament. Un cop més, no ho veig necessàriament trencat com ho tens, però la part superior i l'esquerra estan pensades per a això, així que per què no utilitzar-les? A més, teniu flotants i marges establerts al mateix element, que en condicions específiques provoquen l'error de "doble marge" a IE6 (ho heu provat allà?) - tot i que hi ha una solució, eviteu aquest problema completament utilitzant la part superior i l'esquerra en lloc de marges per al posicionament en aquest cas.

    3. Finalment, per què no utilitzar una llista no ordenada semànticament per a aquests enllaços en comptes del div sense sentit?

    Ho sento per tastar-me... Només m'agrada compartir, perquè sé per experiència com hi ha moltes maneres diferents d'utilitzar CSS per obtenir el resultat desitjat, però algunes maneres certament funcionen millor (més fiables, entre navegadors) que d'altres. . HTH.

  23. 36
  24. 37
  25. 38

    Moltes gràcies!! Les teves instruccions m'han estalviat HORES de feina... Sóc nou en el desenvolupament web i acabo de patir el meu primer gran projecte. Ho vaig fer... el client està content, extasiat de fet, i jo també!

  26. 39

    Hola, moltes gràcies per publicar-ho! Anys després i encara està ajudant... bé! Estic lluitant perquè el meu mapa d'imatge s'enllaçi al lloc correcte. Tinc un bàner i vull que les icones socials de la part superior dreta del bàner s'enllacin amb el codi que has proporcionat. Funciona molt bé, excepte que estic fent alguna cosa malament perquè els meus enllaços apareixen a l'extrem superior esquerre de la pantalla, no sobre les icones socials, sinó sobre el logotip. Estic segur que és una cosa senzilla, però no ho puc entendre. Vaig pensar que ho compartiria aquí per si teniu alguna idea. Gràcies de nou per publicar això!

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.