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 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 ni Imatges activades (com potser un usuari mòbil que busqui l'enllaç al vostre lloc amigable per a mòbils). Cap d’ells coneixerà aquests tres enllaços perquè no té text. Si les imatges estan apagades, l'usuari ni tan sols veurà 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 el text mitjançant una tècnica estàndard de substitució d’imatges. 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ò teniu raó, sí que ho pot fer. Per què cercareu títols d’enllaços si no sabíeu que hi era, i fins i tot si ho fóssiu, segurament això es redueix a un problema d’usabilitat, cosa que significa que oferiu als usuaris menys capacitats una segona experiència d’ús del vostre lloc.

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

        Finalment, els atributs de títol d'enllaç encara no apareixeran per a qualsevol persona que navega sense imatges activades o sense CSS activat.

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

        Per això, fer servir una imatge perquè es pugui llegir text alternatiu o substituir-la per tal que el text hi sigui és una opció molt més segura, més accessible i més útil.

        • 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 es mostrarà si el CSS o les imatges estan desactivats.

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

  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").

    Va modificar el codi per satisfer les meves necessitats, vaig descobrir on deixar anar el bit HTML i, francament, té un aspecte fantàstic i ha netejat la part superior de la barra lateral que m’ha portat ENSÀ.

    És possible que encara hagi de comprar-te aquest cafè.

  4. 10

    Doug,

    Vaig a ser una veu discrepant, 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 vau notar que havia d’optar-ne pel nou. He d’admetre que he passat molt de temps descobrint la nova funció del vostre lloc per tornar a activar-la. Part d’això es deu a que l’enllaç original era una mica més tradicional i vaig recordar-lo vagament. L’altre era perquè inicialment el mig sobre lateral no em semblava un sobre. Després d’uns cinc o més minuts, vaig començar a passar el ratolí per sobre de totes les imatges i quan apareixia el títol “Subscriu-me amb el correu electrònic”, vaig saber que treballava. El meu cervell també va saber quina era la imatge de l’enllaç.

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

  5. 12
    • 13

      William,

      Sembla que és possible que tingueu un conflicte entre els noms de classe dels 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

    Bon enfocament, però necessito alguna cosa per a un mapa topogràfic, de manera que no puc fer servir àrees rectangles ... 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 preguntava com ho feies. Volíem crear un mapa així 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 idea 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 teníem la intenció de mapar tal com la teníem desenes de vegades abans. / palmforehad. Ningú de nosaltres no entén realment el CSS, però ens topem amb la insuficiència i fins ara hem anat bé fins ara. El vostre article de l'ÚNIC UNI de dotzenes que es proporciona és una visió real de com utilitzar fàcilment el mapa d'imatges a CSS. Vaig revisar el full d’estils segons les vostres indicacions, però no tinc ni idea on col·locar l’HTML. Tot el que heu dit és "Afegiu el vostre html ... És simpàtic i senzill" i després em vaig sentir aterrit perquè pensava que "no és prou senzill per a mi!" No sabia que podia afegir html a cap d'aquestes pàgines PHP de l'editor de temes. Poso l'html a la capçalera? La plantilla d'índex principal? Les funcions? Suposo que tots els usuaris de wordpress tenen l’opció d’editar el tema a l’editor del tauler, que sembla bastant universal en termes de funcionalitat. Si pogueu suggerir on col·locar l’html, m’encantaria adaptar el codi d’or per a la meva barra de navegació.

    Gràcies per compartir els vostres coneixements amb la comunitat. Estic feliç de prendre’t un cafè.

    • 22

      Hola Phay!

      Tots els fitxers del tema del vostre bloc estan disponibles per editar-los al tauler Administrador. Si feu clic a Presentació i després a l’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 aparegui a la barra lateral, probablement tingueu una pàgina de la barra lateral. Feu clic per editar-lo i, a continuació, poseu l'HTML proporcionat a la pàgina on vulgueu.

      Una nota: l’edició del full d’estils és relativa a la vostra pàgina, de manera que haureu de penjar la imatge al directori d’imatges de temes si la feu referència com ho faríeu amb altres imatges del 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'imatges a la imatge de capçalera. Després de jugar-hi una estona, ho vaig encertar. Introduïu el div HTML al fitxer header.php. Ho poso entre i. No estic segur de si la 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, es troba a la part superior de la pàgina (es pot veure a l’enllaç que 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 de quin fitxer col·loqueu l’html, tal com s’ha indicat anteriorment, en tinc diversos, header.php, index.php principal, functions.php, footer.php. No estic segur d'on inserir el codi html. (la primera part que heu proporcionat, ja he inserit la resta al meu full d'estil). Tinc la meva imatge allà al lloc web, ja està tot a punt, només he de saber on afegir la part html del codi per adaptar-la.

    Moltes gràcies pel vostre temps i les vostres preguntes per part d'un novell.

    Phay

  15. 25

    ... O potser algú podria publicar als comentaris sobre quin fitxer col·loquem la part html del codi. Un senyor que va publicar uns quants missatges va dir que ho va descobrir. No he tingut tanta sort.

    Phaylen

  16. 26
  17. 27

    M’ho passo molt de temps buscant la manera d’incorporar un mapa d’imatges que es pot fer clic a wordpress perquè elimina les etiquetes de mapa html. La vostra manera funcionaria, però un mapa dels Estats Units és òbviament una manera complexa de cargolar amb aquesta manera. Estic perdut.

    Ajuda

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

    • 28

      Dave,

      Si col·loqueu la imatge a la plantilla, estareu bé. Si col·loqueu el mapa d'imatges al contingut real, podríeu tenir problemes de filtre. La manera com he resolt això és terrible, però de vegades he utilitzat un iframe.

      Doug

  18. 29

    Hola,

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

    quan incloc el posicionament de fons (centre esquerra) per al mapa d'imatges, no es fa seguiment del posicionament dels enllaços.

    alguna manera de solucionar-ho? sóc molt aficionat. gràcies.

  19. 31

    S’utilitzaria un enfocament similar per a un mapa d’imatges més gran i més complicat com estic intentant utilitzar?

    Si veieu el meu lloc, feu clic als enllaços de l'esquerra i veureu la imatge que intento fer servir com a mapa d'imatges (sota l'alfabet de text).

    Bàsicament, intentant utilitzar la imatge per anar a cada secció d’aquesta llista per carta.

    Evidentment, vaig passar 20 minuts construint un mapa amb GIMP i, després, WP elimina les etiquetes del mapa, de manera que he trobat el vostre lloc.

    Tot i això, es pot plantejar utilitzar Flash

    Gràcies.

  20. 33

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

  21. 34

    hola, he creat el meu lloc web a joomla ... vull fer servir aquest mètode per fer del logotip de la meva pàgina un enllaç a casa, m'han dit que no ho puc fer amb joomla, però aquest article em dóna esperança. l'ajuda per correu electrònic seria molt agraïda ... Gràcies

  22. 35

    Hola Doug: estic construint un mapa d'imatges basat en CSS bastant complex que també té passos remots remots (en aquest cas, el text es mostra a qualsevol altre lloc de la pàgina quan passeu el cursor per un dels punts d'accés d'imatge). De tota manera, em vaig trobar amb el vostre exemple aquí mentre investigava sobre això ... i vaig pensar que compartiria la següent informació:

    1. Per a l'accessibilitat, no heu d'utilitzar la visibilitat: cap (ni la visualització: cap si ho considereu) per amagar el text aquí, com a element amb un estil de visibilitat: ocult no serà llegit pels lectors de pantalla (els que segueixen les especificacions) .

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

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

    A més, hauríeu d'utilitzar les declaracions de posicionament de "top: x" i "left: x" (on x és el valor de desplaçament, per exemple, en px) en lloc de marges per gestionar aquest posicionament. Una vegada més, no ho veig necessàriament trencant-lo com el teniu, però a la part superior i esquerra estan pensats per això, per què no els utilitzeu? A més, teniu configurats flotants i marges al mateix element, que en condicions específiques provoquen l'error de "doble marge" a IE6 (hi heu provat això?), Mentre hi ha una solució, eviteu aquest problema completament utilitzant i a l'esquerra en lloc de marges per al posicionament en aquest cas.

    3. Finalment, per què no s'utilitza una llista desordenada semànticament sòlida per a aquests enllaços en lloc del div sense sentit?

    Ho sento per droning a ... M'agrada compartir, b / c sé per experiència que hi ha moltes maneres diferents d'utilitzar CSS per obtenir el resultat desitjat, però certes maneres funcionen millor (més fiables, amb diversos navegadors) que d'altres . HTH.

  23. 36
  24. 37
  25. 38

    Moltes gràcies!! Les vostres instruccions em van estalviar HORES de treball ... Sóc nou en desenvolupament web i acabo de patir el meu primer gran projecte. Ho he aconseguit ... el client està content, està en estat de felicitat, i jo també!

  26. 39

    Hola, moltes gràcies per publicar això! Anys més tard i encara està ajudant ... bé! Estic lluitant perquè el meu mapa d’imatges s’enllaci al lloc adequat. Tinc un bàner i vull que les icones socials de la part superior dreta del bàner s’enllacin mitjançant el codi que heu proporcionat. Funciona molt bé, tret 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 quelcom senzill, 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.