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 konservi kiel elŝuti):
    opcioj
  2. Alŝutu vian bildon al dosierujo relative al via CSS. En WordPress, ĉi tio plej facile facilas 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 entuta 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 plurangulojn, 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 ekranlegilo, uzanton kun nur teksta retumilo aŭ iu ajn vizitanta la retejon sen CSS aŭ Bildoj ebligitaj (kiel, eble movebla uzanto serĉanta la ligon al via movebla amika retejo). Neniu el ili scios pri tiuj tri ligiloj ĉar ili ne havas tekston. Se bildoj estas malŝaltitaj, uzanto eĉ ne vidos alttekston por priskribi kio estintus 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ĉ uzu tekston por la ligiloj kaj anstataŭigu la tekston per norma anstataŭiga tekniko de bildoj. Ĉi tio ŝajnas oportuna, sed ĝi faras aferojn multe pli malfacilaj/maleblaj por tiuj, kiuj ne uzas norman grafikan retumilon.

    • 2
      • 3

        Doug,

        JAWS ne legas titolojn de ligiloj defaŭlte, sed vi pravas, ĝi povas fari. Kial vi serĉus titolojn de ligiloj, se vi tamen ne scius, ke ĝi estas tie, kaj eĉ se vi estus, certe ĉi tio falas al uzeblo-problemo, kio signifas, ke vi donas al malpli kapablaj uzantojn duan sperton uzi vian retejon.

        Por tekstaj retumiloj, la artikolo, kiun vi atentigas min al tiu Linko, ankaŭ permesas al vi aperigi liston de ligiltitoloj, sed mia punkto restas, ke se vi ne sciis, ke tie estas ligilo, ĉar unue ne estis teksto. , kial vi serĉus titoltekston?

        Fine, la atributoj de la titolo de ligo ankoraŭ ne aperos por iu ajn foliumanta sen bildoj aktivigitaj aŭ sen CSS ebligita.

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

        Tial uzi bildon, por ke altteksto estu legebla, aŭ bildoanstataŭigo, por ke la teksto estu tie, estas multe pli sekura, pli alirebla kaj pli uzebla opcio.

        • 4

          Bona Informo, Phil. Mi provos plibonigi tion per teksto sed simple kaŝi la tekston – tiel alirebla produkto kiel JAWS legos la ligan tekston kaj la teksto aperos se CSS aŭ Bildoj estas malŝaltitaj.

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

  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 ĝi timigas min (ludis kun CSS kaj nun mi finfine "akiras ĝin").

    Ŝanĉis la kodon por renkonti miajn bezonojn, eltrovis kie enmeti la HTML-pecon, kaj sincere ĝi aspektas bonege kaj purigis tiun supron de mia flanka kolumno, kiu frenezigis min.

    Eble mi ankoraŭ devos aĉeti 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 devas simple elekti mian novan. Mi devas konfesi, ke mi tre multe "malkovris" la novan funkcion en via retejo por denove elekti. Parto de tio estis ĉar la origina ligilo estis iom pli tradicia kaj mi malklare memoris tiun. La alia estis ĉar la flanka duonkoverto simple ne aspektis kiel koverto al mi komence. Post ĉirkaŭ 5 aŭ pli da minutoj mi komencis ruli mian muson super ĉiu bildo kaj kiam la titolo "Abonu per Retpoŝto" montriĝis, tiam mi sciis, ke mi estas en komerco. Mia cerbo ankaŭ eltrovis, kio estas la ligbildo.

    Sed, almenaŭ por mi, flanka koverto simple ne estis intuicia por mi kiel la loko por aboni retpoŝtajn sciigojn. Kaj (ĉar oni diris al mi ĉiam fini per io bela) mi konsentas kun Phil supre; la metodo estas vere simpla kaj la tuta ero funkcias bonege. Mi opinias, ke via dezajna ilo helpis doni al vi la ĝustajn dimensiojn por la 3 sekcioj; ĉu tio estas ĝusta supozo? Mi devas supozi tion, ĉar se mi havus, ekzemple, 400-pikselan larĝan bildon, 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 kolumna grafiko. Vi povas nomi ilin malsame por klarigi la konflikton. Sciigu min se 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 malnovstilan bildmapon kun koordinatoj, sed verŝajne mi fosos iom pli profunde...

  11. 19

    Dankon pro ĉi tiu informo, Doug. Mi estis ĉi tie antaŭe kaj scivolis kiel vi faris tion. 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 tute apenaŭ proponis pri mia dilemo. Ni adaptis vortpressan temon por helpi nin lanĉi nian retan 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 havis dekojn da fojoj antaŭe. /palmforehad. Neniu el ni vere komprenas CSS, sed ni sufiĉe trafas kaj ĝis nun bone agis ĝis ĉi tiu punkto. Via artikolo en la NUR UNU el dekduoj, kiuj provizis, estas realaj komprenoj pri kiel facile uzi bildmapadon en CSS. Mi redaktis la stilfolion laŭ viaj indikoj, sed ne scias kie meti la HTML-on. Ĉio, kion vi diris, estas "Aldonu vian html-on... Ĝi estas bela kaj simpla" kaj tiam mi timiĝis ĉar mi pensis.. "Ne sufiĉe simpla por mi!" Mi ne sciis, ke mi povus aldoni html-on al iu ajn el ĉi tiuj php-paĝoj en la temoredaktilo. Ĉu mi metas la html-on en la kaplinion? Ĉu la ŝablono Ĉefa Indekso? La Funkcioj? Mi supozas, ke ĉiuj uzantoj de Wordpress havas la eblon redakti sian temon en la panela redaktilo, kiu ŝajnas sufiĉe universala laŭ funkcieco. Se vi povus sugesti kie meti la html-on, mi ŝatus adapti oru-kodon por mia navigadbreto.

    Dankon pro dividi vian scion kun la komunumo. Mi ĝojas havigi al vi kafon.

    • 22

      Saluton Phay!

      Ĉiuj dosieroj por la temo de via blogo estas disponeblaj per la Administra panelo por redaktado. Se vi klakas sur Prezento kaj poste Temo-Redaktilo, vi devus povi vidi liston de viaj dosieroj dekstre kaj redaktilon maldekstre.

      Se vi volas, ke ĉi tio estu en via flanka kolumno, vi verŝajne havas paĝon flanka kolumno. Alklaku por redakti ĝin kaj poste metu la HTML provizitan 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 en la dosierujon de etosbildoj se vi referencas ĝin kiel vi farus aliajn bildojn 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 bildmapon al la kapbildo. Post ludado kun ĝi dum iom da tempo, mi bone komprenis. Metu la div HTML en la header.php dosiero. 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 flankbreto, ĝi estas ĉe la supro de la paĝo (vi povas vidi en la ligilo, kiun mi provizis - la rozkoloran navigadbreton, kiu diras kontent, pri la spektaklo ktp..)

    Mi laboris en la panelo la tutan matenon, bedaŭrinde, mi ne certas, en kiun dosieron mi metas la html-on, kiel dirite supre, mi havas plurajn, header.php, main index.php, functions.php, footer.php. Mi ne certas kie enmeti la html-kodon. (la unua parto kiun vi disponigis, mi jam enmetis la reston en mian stilfolion) Mi havas mian bildon tie en la retejo, ĉio estas preta por iri, mi nur bezonas scii kie aldoni la html-parton de la kodo por adapti.

    Koran dankon pro via tempo kaj respondi demandojn de novulo.

    Phay

  15. 25

    … Aŭ eble iu povus afiŝi en la komentojn pri kiu dosiero ni metas la html-parton de la kodo enen. Sinjoro kelkajn afiŝojn supre diris, ke li eltrovis ĝin. Mi ne estis tiel bonŝanca.

    Phaylen

  16. 26
  17. 27

    Mi treege trovas manieron enigi alklakeblan bildmapon en wordpress ĉar ĝi forigas html-mapetikedojn. Via maniero funkcius, sed mapo de Usono evidente estas tre kompleksa por ĉi tiu maniero. Mi estas perdita.

    Helpo.

    Ŝajnas, ke fulmo estas mia sola opcio?

  18. 29

    Saluton,

    ŝajnas ke la bildmapo kaj la ligiloj estas du malsamaj aferoj, ili ne funkcias kune kiel kiel bildmapo en html faras

    kiam mi inkluzivas fonan pozicion (meze maldekstre) por la bildmapo, la poziciigado de la ligiloj ne sekvas.

    iun manieron ĉirkaŭiri ĉi tion? mi estas tre amatora. Dankon.

  19. 31

    Ĉu simila aliro estus uzata por pli granda kaj pli komplika bildmapo kiel mi provas uzi?

    Se vi rigardas mian retejon, alklaku ligilojn maldekstren kaj vi vidos la bildon, kiun mi provas uzi kiel bildmapon (sub la Teksta alfabeto).

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

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

    Tamen, eble pripensos uzi Flash

    Danke.

  20. 33

    mi nuntempe uzas ŝablonon aranĝon kaj redaktas kun miaj propraj aĵoj. Mi volas aldoni bildmapon, 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 sur joomla...mi volas uzi ĉi tiun metodon por fari la emblemon de mia paĝo ligo al hejmo, oni diris al mi, ke vi ne povas fari tion per joomla, sed ĉi tiu artikolo donas al mi esperon! helpo per retpoŝto estus multe aprezita….dankon

  22. 35

    Saluton Doug - Mi konstruas sufiĉe kompleksan bildmapon bazitan sur css, kiu ankaŭ havas forajn ruliĝojn (en ĉi tiu kazo, teksto montriĝas aliloke sur la paĝo kiam vi ŝvebas unu el la bildpunktoj). Kiel ajn, mi trovis vian ekzemplon ĉi tie dum esplorado de tio... kaj mi pensis, ke mi konigus la sekvan enigaĵon:

    1. Por alirebleco, vi ne uzu visibility:none (aŭ display:none se vi konsideris tion) por kaŝi la tekston ĉi tie, kiel elemento stilita kun videbleco: kaŝita ne estos legata de ekranlegiloj (tiuj kiuj sekvas spec) .

    Anstataŭe, uzu pli fortikan bildan anstataŭan teknikon. Mi proponas aŭ la Phark-metodon aŭ Gilder/Levin - tiuj estas nur la pli bone dokumentitaj nomoj por guglo 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 proprajn riskojn. Absolute poziciigita elemento estas poziciigita relative al sia plej proksima poziciigita gepatro. Esence, vi volus eksplicite agordi pozician kuntekston aplikante 'position:relative' al #abono. 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 tiam uzu la poziciajn deklarojn de "supro: x" kaj "maldekstre: x" (kie x estas la kompensa valoro, ekzemple en px) prefere ol marĝenoj por trakti tiun poziciigon. Denove, mi ne nepre vidas ĝin rompi kiel vi havas ĝin, sed supro kaj maldekstre estas destinitaj por ĉi tio, do kial ne uzi ilin? Plie, vi havas flosaĵojn kaj randojn fiksitajn sur la sama elemento, kiuj sub specifaj kondiĉoj kaŭzas la cimon de "duobla marĝeno" en IE6 (ĉu vi testis ĉi tion tie?) - dum ekzistas solvo, vi evitas tiun problemon tute uzante supro. kaj maldekstra anstataŭ randoj por poziciigado en ĉi tiu kazo.

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

    Pardonu pro dronado... Mi nur ŝatas kunhavigi, 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, interretumilo) ol aliaj. . HTH.

  23. 36
  24. 37
  25. 38

    Multan dankon!! Viaj instrukcioj ŝparis al mi HORojn da laboro...Mi estas nova pri TTT-disvolviĝo, kaj mi ĵus suferis pro mia unua granda projekto. Mi faris ĝin... la kliento estas feliĉa, ekstaza fakte, kaj ankaŭ mi!

  26. 39

    Saluton, koran dankon pro afiŝi ĉi tion! Jarojn poste kaj ĝi ankoraŭ helpas... bela! Mi penas ligi mian bildmapon en la ĝusta loko. Mi havas standardon kaj mi volas, ke la sociaj piktogramoj en la supra dekstra flanko de la standardo ligu per la kodo, kiun vi provizis. Ĝi funkcias bonege, krom mi faras ion malĝustan ĉar miaj ligiloj aperas ĉe la ekstrema 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 eltrovi ĝin. Mi pensis, ke mi dividus ĝin ĉi tie, se vi havas iujn komprenojn. Dankon denove pro afiŝi ĉi tion!

Kion vi pensas?

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