Kiel Konstrui Bildan Mapon per CSS

opcioj

Mi volis ion 'geeky', do mi decidis pri 'poŝa' grafikaĵo, kiu enhavas ĉiujn abonajn metodojn por mia blogo.

En la tempo de Retejo 1.0, kolekto de tiaj ligoj povus esti kreita per kunigo de via bildo per ligiloj sur ĉiu grafikaĵo, tiam provante kudri ĝin kune kun tablo. Ĝi povus ankaŭ esti plenumita per uzado de bilda mapo sed tio kutime postulas ilon por krei la koordinatsistemon. Uzi Kaskadajn Stilajn Foliojn faciligas ĉi tion ... neniuj bildoj kaj neniu provo trovi ilon por krei vian koordinatsistemon!

  1. Konstruu vian bildon, kiun vi ŝatus uzi. Vi povas uzi ĉi tiun grafikon sube (dekstre alklaku kaj konservu kiel elŝuti):
    opcioj
  2. Alŝutu vian bildon al dosierujo relative al via CSS. En WordPress, ĉi tio povas esti farita plej facile metante ĝin en bildan dosierujon en via temo-dosierujo.
  3. Aldonu vian HTML. Ĝi estas bela kaj simpla ... div kun tri ligoj en ĝi:
    > div id = "aboni">> a id = "rss" href = "[via flua ligilo]" title = "Aboni kun RSS" >> span class = "kaŝi"> RSS> / span >> / a>> a id = "retpoŝto" href = "[via retpoŝta abona ligilo]" title = "Aboni per retpoŝto" >> span class = "kaŝi"> Retpoŝto> / span >> / a>> a id = "mobile" href = "[via poŝtelefona ligilo]" title = "Vidi poŝtelefonan version" >> span class = "kaŝi"> Poŝtelefono> / span >> / a>> / div>
    
  4. Redaktu vian Kaskadan Stilfolion. Vi aldonos 6 malsamajn stilojn. 1 stilo por la ĝenerala div, 1 por la etikedo, do ĝi ne montras tekstan dekoracion, 1 stilon por kaŝi la tekston (uzatan por alirebleco) kaj 1 stilan specifon por ĉiu el la ligoj:
    #subscribe {/ * fona bildo-bloko * / display: bloko; larĝo: 215px; alteco: 60px; fono: url (images / options.png) senripeta; rando-supro: 0px; } #subscribe a {text-decoration: none; } .hide {visible: kaŝita; } #rss {/ * RSS-Ligilo * / float: maldekstre; pozicio: absoluta; larĝo: 50px; alteco: 50px; rando-maldekstre: 20px; rando-supro: 5px; } #email {/ * Retpoŝta Ligilo * / float: maldekstre; pozicio: absoluta; larĝo: 50px; alteco: 50px; rando-maldekstre: 70px; rando-supro: 5px; } #mobile {/ * Mobile Link * / float: maldekstre; pozicio: absoluta; larĝo: 50px; alteco: 50px; rando-maldekstre: 130px; rando-supro: 5px; }

La pozicio estas bela kaj simpla ... aldonu altecon kaj larĝon kaj tiam starigu la maldekstran randon de la maldekstra flanko de la bildo, kaj la supran randon de la supra flanko de la bildo!

Ĉi tiu afiŝo "Kiel" estas por eniro en la Geeks estas Sexy-fina "Kiel" Konkurso! Unu noto, estas vere, ke bilda mapo povas havi multe pli kompleksajn plurlaterojn, sed mi ne vere vidis tro multajn lokojn, kie tio nepre devas esti. Mi rimarkis, ke grandaj RSS-bildoj en la Geeks estas Sexy flanka kolumno ... tio estas bona loko por ligo. 😉

Ĝisdatigita 10/3/2007 por pli bona alirebleco kun la konsilo de Phil!

patroni: Se vi estas novulo pri reteja projektado, tiam Konstruu Vian Propran Retejon Ĝuste Uzante HTML & CSS, 2a Eldono estas nepra. En ĉi tiu facila sekvinda gvidilo vi lernos kiel konstrui retejon laŭ la plej bona maniero - farante ĝin mem!

41 Komentoj

  1. 1

    Doug, tio ŝajnas bela metodo, sed ĝi estas tre neatingebla.

    Konsideru blindan uzanton kun legilo de ekrano, uzanton kun nur teksto-retumilo aŭ iu ajn vizitanta la retejon sen CSS aŭ Bildoj ebligitaj (kiel eble poŝtelefona uzanto serĉanta la ligon al via poŝtelefona amika retejo). Neniu el ili scios pri tiuj tri ligoj ĉar ili ne havas tekston. Se bildoj malŝaltas, uzanto eĉ ne vidos altan tekston por priskribi kio estus tie ĉar ĝi estas fonbildo.

    Pli bone estus tranĉi la bildojn, ligi ilin, meti ilin en liston kaj flosi ilin unu apud la alia. Aŭ eĉ uzi tekston por la ligoj kaj anstataŭigi la tekston per norma bilda anstataŭiga tekniko. Ĉi tio ŝajnas konvena, sed ĝi malfaciligas / malebligas aferojn por tiuj, kiuj ne uzas norman grafikan retumilon.

    • 2
      • 3

        Doug,

        JAWS ne legas ligotitolojn defaŭlte, sed vi pravas, ĝi povas fari. Kial vi serĉus ligotitolojn, se vi tamen ne scius, ke ĝi estas tie, kaj eĉ se vi estus, certe ĉi tio falas al uzebla problemo, kio signifas, ke vi donas al malpli kapablaj uzantoj duan sperton pri uzado de via retejo.

        Por tekstfoliumiloj, la artikolo, kiun vi direktas al mi al tiu Linko, ankaŭ permesas al vi aperigi liston de ligotitoloj, sed mia afero restas, ke se vi ne scius, ke estis ligo tie, ĉar ne estis teksto en la unua loko. , kial vi serĉus titolan tekston?

        Fine, atributoj de ligotitolo ankoraŭ ne aperos por iu ajn foliumanta sen bildoj ebligitaj aŭ sen CSS ebligita.

        Do jes, ligoj kun titoloj estas pli bonaj ol tiuj sen, sed ĉi-kaze ĝi estas nur marĝena.

        Jen kial uzi bildon por legi altan tekston aŭ anstataŭigi bildon por ke la teksto estu tie estas multe pli sekura, pli alirebla kaj pli uzebla opcio.

        • 4

          Bonaj Informoj, Phil. Mi provos plibonigi ĉi tion per teksto sed simple kaŝi la tekston - tiel alirebla produkto kiel JAWS legos la ligilan tekston kaj la teksto montriĝos se CSS aŭ Bildoj estas malebligitaj.

          Mi malkonsentas, ke la sola alirebla solvo estus meti Bildon kun ligilo, tamen.

  2. 5
  3. 8

    Mi ŝtelis ĝin. Tie, mi diris ĝin.

    Doug, la grafikaĵoj estas mirindaj kaj la kodado estas tiel nekredeble simpla, ke mi timigas min (ludante kun CSS kaj nun mi finfine "komprenas").

    Agordis la kodon por plenumi miajn bezonojn, eltrovis, kien enlasi la HTML-biton, kaj sincere ĝi aspektas bonega kaj purigis tiun supron de mia flanka kolumno, kiu frenezigis min.

    Mi eble eble ankoraŭ aĉetos al vi tiun kafon!

  4. 10

    Doug,

    Mi estos malkonsenta voĉo, uzante mian sperton kiel ekzemplon. Mi memoras niajn retpoŝtojn kiam mia hejma retpoŝto ŝanĝiĝis kaj vi rimarkis, ke mi devis simple elekti mian novan. Mi devas agnoski, ke mi sukcesis "malkovri" la novan funkcion en via retejo por elekti denove. Parto de tio estis ĉar la originala ligilo estis iom pli tradicia kaj mi malklare memoris tiun. La alia estis ĉar la flanka duona koverto simple ne aspektis kiel koverto al mi komence. Post ĉirkaŭ 5 aŭ pli da minutoj mi komencis rulumi mian muson super ĉiun bildon kaj kiam la titolo "Aboni per retpoŝto" montris, tiam mi sciis, ke mi komercas. Mia cerbo ankaŭ eltrovis, kio estas la liga bildo.

    Sed almenaŭ laŭ mi flanka koverto simple ne estis intuicia por mi kiel la loko por aboni retpoŝtajn sciigojn. Kaj (ĉar oni diris al mi, ke mi ĉiam finu per io bela), mi konsentas kun Phil supre; la metodo estas vere simpla kaj la tuta ero funkcias bonege. Mi konsideras, ke via projektilo helpis doni al vi la ĝustajn dimensiojn por la 3 sekcioj; ĉu tio estas ĝusta supozo? Mi devas supozi tiel, ĉar se mi havus, ekzemple, larĝan bildon de 400 pikseloj, mi bezonus scii la ĝustajn agordojn, ktp.

  5. 12
    • 13

      Vilhelmo,

      Ŝajnas, ke vi eble havas konflikton inter viaj komentaj klasnomoj kaj la klasnomoj en la flanka stango. Vi povas nomi ilin alimaniere por klarigi la konflikton. Informu min, ĉu vi bezonas manon!

      Doug

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

    Bela aliro, sed mi bezonas ion por topografia mapo, do mi ne povas uzi rektangulajn areojn ... Mi pensas, ke mi devas uzi la malnovan stilan bildmapon kun koordinatoj, sed mi probable iom pli profundiĝos ...

  11. 19

    Dankon pro ĉi tiu informo, Doug. Mi estis ĉi tie antaŭe kaj scivolis kiel vi faris ĝin. Ni volis krei tian mapon por enmeti post niaj afiŝoj, kaj nun, kiam ni havas la rimedojn, ni povas fari ĝin. Bravo!

  12. 20
  13. 21

    Saluton Doug,
    Mi lasis antaŭan komenton sed rimarkis, ke mi preskaŭ tute ne komprenis mian dilemon. Ni adaptis wordpress-temon por helpi nin lanĉi nian interretan serialkomedion ĉi tie:

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

    Nun vi vidos, ke ni havas navigan standardon trans la supro, bildon, kiun ni intencis mapi, kiel ni havas dekojn da fojoj antaŭe. / palmforehad. Neniu el ni vere komprenas CSS, sed ni stumblas sufiĉe kaj ĝis nun sukcesis ĝis nun. Via artikolo en la NUR UNU el dekoj provizitaj estas vera kompreno pri kiel uzi bildmapadon en CSS facile. Mi redaktis la stilfolion laŭ viaj direktoj, sed tute ne scias, kie meti la HTML. Ĉio, kion vi diris, estas "Aldonu vian html ... Ĝi estas bela kaj simpla" kaj tiam mi timis ĉar mi pensis .. "ne sufiĉe simpla por mi!" Mi ne sciis, ke mi povus aldoni html al iu ajn el ĉi tiuj php-paĝoj en la temo-redaktilo. Ĉu mi metas la html en la kaplinion? La ŝablono Ĉefa Indekso? La Funkcioj? Mi supozas, ke ĉiuj wordpress-uzantoj havas la eblon redakti sian temon en la panelo-redaktilo, kiu ŝajnas sufiĉe universala. Se vi povus sugesti kie meti la html, mi ŝatus adapti oru-kodon por mia navigacia stango.

    Dankon pro dividi viajn sciojn kun la komunumo. Mi feliĉas akiri al vi kafon.

    • 22

      Saluton Phay!

      Ĉiuj dosieroj por la temo de via blogo haveblas tra la Administra panelo por redaktado. Se vi alklakas Prezenton kaj tiam Temo-Redaktilon, vi povus vidi liston de viaj dosieroj dekstre kaj redaktilon maldekstren.

      Se vi deziras, ke ĉi tio estu en via flanka kolumno, vi probable havas Flankan paĝon. Alklaku por redakti ĝin kaj poste metu la HTML-donitan en la paĝon, kie vi ŝatus ĝin.

      Unu noto: La redakto de stilfolio rilatas al via paĝo, do vi devos alŝuti la bildon al la dosierujo pri bildoj de temoj, se vi referencas ĝin kiel al aliaj bildoj en via temo.

      Esperas ke helpo!

    • 23

      Phay,
      Mi renkontis ĉi tiun retejon hodiaŭ kaj havis la saman dilemon kiel vi. Mi ankaŭ volis aldoni bildan mapon al la kap-bildo. Post iom da tempo ludante kun ĝi, mi pravis. Metu la div-HTML en la dosieron header.php. Mi metis ĝin inter kaj. Ne certas, ĉu via ŝablono havas tiun ĝustan kodigon, sed ludu kun ĝi en la header.php-dosiero kaj vi eltrovos ĝin.
      -
      paul

  14. 24

    Dankon pro la rapida respondo!

    Ne, mi ne volis, ke ĝi estu en la flanka kolumno, ĝi estas ĉe la supro de la paĝo (vi povas vidi en la ligilo, kiun mi provizis, la rozkolora navigacia stango, kiu diras kontanto, pri la spektaklo ktp.)

    Mi laboris en la panelo dum la tuta mateno, bedaŭrinde, mi ne certas en kiu dosiero mi metas la html, kiel dirite supre, mi havas plurajn, header.php, main index.php, functions.php, footer.php. Mi ne certas kie enmeti la html-kodon. (la unuan parton, kiun vi donis, mi jam enmetis la reston en mian stilfolion) Mi havas mian bildon tie en la retejo, ĉio estas preta, mi nur bezonas scii, kie aldoni la html-parton de la kodo por adaptiĝi.

    Koran dankon pro via tempo kaj lanĉaj demandoj de novulo.

    Phay

  15. 25

    ... Aŭ eble iu povus afiŝi en la komentoj pri kiu dosiero ni metas la html-parton de la kodo. Sinjoro kelkaj afiŝoj diris, ke li eltrovis ĝin. Mi ne estis tiel bonŝanca.

    Phaylen

  16. 26
  17. 27

    Mi tre malfacile trovas manieron enigi klakeblan bildmapon en wordpress ĉar ĝi forigas html-mapajn etikedojn. Via maniero funkcius, sed mapo de Usono estas evidente kompleksa por ŝraŭbi per ĉi tiu maniero. Mi estas perdita.

    Helpo.

    Ŝajnas, ke flash estas mia sola eblo?

    • 28
  18. 29

    Saluton,

    ŝajnas, ke la bilda mapo kaj la ligoj estas du malsamaj aferoj, ili ne funkcias kune kiel funkcias bilda mapo en html

    kiam mi inkluzivas fonan lokon (maldekstre meze) por la bildo-mapo, la pozicio de la ligoj ne sekvas.

    ia maniero ĉirkaŭiri ĉi tion? mi tre amatoras. Dankon.

  19. 31

    Ĉu simila aliro estus uzata por pli granda kaj pli komplika bildo-mapo, kiel mi provas uzi?

    Se vi vidas mian retejon, alklaku ligojn maldekstren kaj vi vidos la bildon, kiun mi provas uzi kiel bildan mapon (sub la Teksta alfabeto).

    Esence, provante uzi la Bildon por iri al ĉiu sekcio de ĉi tiu listo per litero.

    Evidente, mi pasigis 20 minutojn konstruante mapon per GIMP, kaj tiam WP forigas la mapajn etikedojn, do tiel mi trovis vian retejon.

    Tamen, eble pripensas uzi Flash

    Danke.

  20. 33

    Mi nuntempe uzas ŝablonan aranĝon kaj redaktadon kun miaj propraj aĵoj. Mi volas aldoni bildan mapon, sed mi ne certas kie meti ĝin en la css. la bildo, pri kiu mi volas fari mapon, estas en la kaplinio.

  21. 34

    saluton, mi konstruis mian retejon ĉe joomla ... mi volas uzi ĉi tiun metodon por igi la emblemon de mia paĝo ligo al hejmo, oni diris al mi ke vi ne povas fari ĉi tion per joomla sed ĉi tiu artikolo donas al mi esperon! helpo per retpoŝto estus ege dankita ... dankon

  22. 35

    Saluton Doug - Mi konstruas sufiĉe kompleksan css-bazitan bildan mapon, kiu ankaŭ havas forajn ruliĝojn (ĉi-kaze teksto aperas aliloke sur la paĝo, kiam vi ŝvebas unu el la bildaj retpunktoj). Iel ajn, mi renkontis vian ekzemplon ĉi tie dum esplorado pri tio ... kaj mi pensis dividi la jenan kontribuon:

    1. Por alirebleco, vi ne uzu videblecon: neniu (aŭ ekranon: neniu, se vi konsideris tion) por kaŝi la tekston ĉi tie, kiel elemento kun videbleco: kaŝita ne legos ekranlegantoj (tiuj, kiuj sekvas specifojn) .

    Anstataŭe uzu pli fortikan bildan anstataŭigan teknikon. Mi sugestas aŭ la Phark-metodon aŭ Gilder / Levin - tiuj estas nur la pli bone dokumentitaj nomoj por gugli por trovi la bazajn teknikojn. Mi preferas G / L ĉar ĝi ankaŭ funkcias kun CSS ebligita sed bildoj estas malŝaltitaj.

    2. Dum mi ne vidas ĝin rompi (uzante FF3), via efektivigo de poziciigado ankaŭ havas enecajn riskojn. Absolute poziciigita elemento estas poziciigita rilate al sia plej proksima poziciigita gepatro. Esence vi volus eksplicite starigi pozician kuntekston per apliko de 'position: relative' al #subscription. Tiam la infanoj (la poziciigitaj ligiloj) povas esti poziciigitaj ene de tiu gepatro. Ĉi tiu metodo helpas certigi pli fidindajn rezultojn tra retumiloj.

    Ankaŭ vi devas uzi la poziciigajn deklarojn de "supro: x" kaj "maldekstre: x" (kie x estas la ofseta valoro, diru en px) anstataŭ marĝenoj por pritrakti tiun pozicion. Denove mi ne nepre vidas ĝin rompi kiel vi havas ĝin, sed supre kaj maldekstre celas tion, kial do ne uzi ilin? Krome vi havas flosilojn kaj randojn starigitajn sur la sama elemento, kiu sub specifaj kondiĉoj kaŭzas la "duoblan marĝenan" cimon en IE6 (ĉu vi testis ĉi tion tie?) - dum estas solvo, vi evitas tiun problemon tute uzante top kaj maldekstre anstataŭ randoj por poziciigi ĉi-kaze.

    3. Fine, kial ne uzi semantike solidan neordigitan liston por ĉi tiuj ligoj anstataŭ la sensignifa div?

    Pardonu, ke mi trompas ... Mi nur ŝatas dividi, b / c mi scias per sperto, kiel ekzistas multaj malsamaj manieroj uzi CSS por akiri deziratan rezulton, sed iuj manieroj certe funkcias pli bone (pli fidindaj, krucumaj) ol aliaj . HTH.

  23. 36
  24. 37
  25. 38

    Multan dankon!! Viaj instrukcioj ŝparis al mi HOROJN de laboro ... Mi estas nova pri interreta disvolviĝo, kaj mi nur suferis tra mia unua granda projekto. Mi sukcesis ... la kliento estas feliĉa, ekstaza, kaj ankaŭ mi!

  26. 39

    Saluton, dankegon pro afiŝado de ĉi tio! Jaroj poste kaj ĝi ankoraŭ helpas ... bele! Mi luktas por ligi mian bildmapon en la ĝusta loko. Mi havas standardon kaj mi volas, ke la sociaj ikonoj en la supra dekstra flanko de la standardo ligu per la kodo, kiun vi provizis. Ĝi funkcias bonege, krom ke mi faras ion malĝustan ĉar miaj ligoj aperas sur la ekstrema supra maldekstra flanko de la ekrano, ne super la sociaj ikonoj, sed super la emblemo. Mi certas, ke ĝi estas io simpla, sed mi simple ne povas kompreni ĝin. Mi pensis, ke mi dividos ĝin ĉi tie, se vi havus iujn komprenojn. Dankon denove por afiŝi ĉi tion!

Kion vi pensas?

Ĉi tiu retejo uzas Akismeton por redukti spamon. Lernu, kiel via komento datiĝas.