Kif Tibni Mappa tal-Immaġni bis-CSS

għażliet

Jien ridt xi ħaġa 'geeky' u għalhekk iddeċidejt fuq grafika 'but' li żżomm il-metodi kollha ta 'abbonament għall-blog tiegħi.

Fil-jiem tal-Web 1.0, kollezzjoni ta 'links bħal din tista' tinbena billi tgħaqqad l-immaġni tiegħek b'rabtiet fuq kull grafika, imbagħad tipprova tħejjiha kollha flimkien ma 'tabella. Jista 'jitwettaq ukoll billi tuża mappa tal-immaġni iżda dan ġeneralment jeħtieġ għodda biex tinbena s-sistema tal-koordinati. L-użu ta 'Folji ta' Stil Cascading jagħmilha aktar faċli ... l-ebda immaġni ta 'tagħqid u l-ebda tipprova ssib għodda biex tibni s-sistema ta' koordinati tiegħek!

  1. Ibni l-immaġni tiegħek li tixtieq tuża. Tista 'tuża din il-grafika hawn taħt (ikklikkja lemin u tissejvja biex tniżżel):
    Għażliet
  2. Tella 'l-immaġni tiegħek għal direttorju li huwa relattiv għas-CSS tiegħek. Fil-WordPress, dan jista 'jsir l-aktar faċli billi tpoġġiha f'folder tal-immaġini fid-direttorju tat-tema tiegħek.
  3. Żid l-HTML tiegħek. Huwa sabiħ u sempliċi ... div bi tliet links fiha:
    > div id = "subscribe">> a id = "rss" href = "[il-link tal-feed tiegħek]" title = "Abbona ma 'RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[il-link tal-abbonament tal-email tiegħek" "title =" Abbona bl-Email ">> span class =" hide "> Email> / span >> / a>> a id =" mobile "href = "[il-link mobbli tiegħek]" title = "Ara l-Verżjoni Mobbli" >> span class = "hide"> Mobbli> / span >> / a>> / div>
    
  4. Editja l-Iskeda ta 'Stil Kaskading tiegħek. Int tkun qed iżżid 6 stili differenti. Stil wieħed għad-div ġenerali, 1 għat-tikketta a sabiex ma juri l-ebda dekorazzjoni tat-test, stil wieħed biex jaħbi t-test (użat għall-aċċessibilità) u speċifikazzjoni stil waħda għal kull waħda mill-links:
    #subscribe {/ * blokk tal-immaġini tal-isfond * / display: block; wisa ': 215px; għoli: 60px; sfond: url (images / options.png) bla ripetizzjoni; marġini ta 'fuq: 0px; } #subscribe a {text-decoration: none; } .hide {viżibilità: moħbija; } #rss {/ * RSS Link * / float: left; pożizzjoni: assoluta; wisa ': 50px; għoli: 50px; marġini-xellug: 20px; quċċata tal-marġni: 5px; } #email {/ * Email Link * / float: left; pożizzjoni: assoluta; wisa ': 50px; għoli: 50px; marġini-xellug: 70px; quċċata tal-marġni: 5px; } #mobile {/ * Mobile Link * / float: left; pożizzjoni: assoluta; wisa ': 50px; għoli: 50px; marġini-xellug: 130px; quċċata tal-marġni: 5px; }

Il-pożizzjonament huwa sabiħ u sempliċi ... żid għoli u wisa 'u mbagħad issettja l-marġni tax-xellug mix-xellug tal-immaġni, u l-marġni ta' fuq min-naħa ta 'fuq tal-immaġni!

Din il-kariga "Kif Biex" hija għad-dħul fl-Internet Geeks huma Sexy Ultimate "Kif Biex" Konkors! Nota waħda, huwa veru li mappa tal-immaġni jista 'jkollha poligoni ħafna iktar kumplessi, imma ma rajtx wisq postijiet fejn dak għandu jkun. Innutajt li l-immaġni kbira ta 'RSS fuq il-Geeks huma Sexy sidebar ... dak huwa post tajjeb għal link. 😉

AĠĠORNAT 10/3/2007 għal aċċessibilità aħjar bil-parir ta ' Phil!

Sponsor: Jekk int newbie għad-disinn tal-web, allura Ibni l-Websajt Tiegħek B'Dirett Bl-Użu ta 'HTML & CSS, it-2 Edizzjoni hija indispensabbli. F'din il-gwida faċli biex issegwi titgħallem kif tibni websajt bl-aħjar mod possibbli - billi tagħmilha int stess!

41 Kummenti

  1. 1

    Doug, dak jidher metodu sabiħ, iżda huwa inaċċessibbli ħafna.

    Ikkunsidra utent għomja bi screen reader, utent b'test browser biss jew kull min iżur is-sit mingħajr CSS jew Images attivati ​​(bħal, forsi utent mobbli li qed ifittex il-link għas-sit faċli għall-mowbajl tiegħek). Ħadd minnhom ma jkun jaf dwar dawk it-tliet links għax m'għandhomx test. Jekk l-immaġini huma mitfija utent lanqas biss jara test alternattiv biex jiddeskrivi dak li kien ikun hemm għax hija immaġini fl-isfond.

    Aħjar ikun li tqatta 'l-istampi, tgħaqqadhom, tpoġġihom f'lista u tpoġġihom ħdejn xulxin. Jew saħansitra uża test għar-rabtiet u ibdel it-test billi tuża teknika standard ta 'sostituzzjoni tal-immaġni. Dan jidher konvenjenti, iżda jagħmel l-affarijiet ferm iktar diffiċli / impossibbli għal dawk li ma jużawx browser grafiku standard.

    • 2
      • 3

        Doug,

        JAWS ma jaqrax titoli ta 'rabta awtomatikament, imma għandek raġun, tista' tagħmel. Għalfejn tkun qed tfittex titli ta 'links jekk ma tkunx taf li kien hemm għalkemm, u anke jekk kont, żgur li dan jaqa' għal kwistjoni ta 'użabilità li jfisser li qed tagħti lill-utenti inqas kapaċi esperjenza tat-tieni rata ta' użu tas-sit tiegħek.

        Għall-browsers tat-test, l-artiklu li tippuntini lejn dik il-Lynx jippermettilek ukoll iġġib lista ta 'titli ta' links, imma l-punt tiegħi jibqa 'li jekk ma kontx taf li kien hemm link hemm, peress li ma kienx hemm test fl-ewwel post , għaliex tfittex it-test tat-titlu?

        Fl-aħħarnett, l-attributi tat-titlu tal-link għadhom ma jidhrux għal kull min jibbrawsja mingħajr immaġini attivati ​​jew mingħajr CSS attivat.

        Allura iva, ir-rabtiet mat-titli huma aħjar minn dawk mingħajrhom, iżda f'dan il-każ hija biss marġinali.

        Din hija r-raġuni għaliex l-użu ta 'immaġni, sabiex it-test alternattiv ikun jista' jinqara, jew sostituzzjoni tal-immaġini, sabiex it-test ikun hemm, hija għażla ferm aktar sigura, aktar aċċessibbli u aktar użabbli.

        • 4

          Informazzjoni Tajba, Phil. Jien se nipprova ntejjeb dan bit-test imma sempliċement jaħbi t-test - b'dan il-mod prodott aċċessibbli bħal JAWS jaqra t-test tal-link u t-test jintwera jekk CSS jew Images huma diżattivati.

          Ma naqbilx li l-unika soluzzjoni aċċessibbli tkun li titqiegħed Immaġni b'rabta, għalkemm.

  2. 5
  3. 8

    Jien serqitu. Hemm, għidtha.

    Doug, il-grafika hija meraviljuża u l-ikkodifikar huwa tant oerhört sempliċi li jbeżżagħni (kont qed nilgħab mas-CSS u issa fl-aħħar "ġġibu").

    Irranġa l-kodiċi biex nissodisfa l-bżonnijiet tiegħi, sibt fejn inqiegħed il-bit HTML, u franchement jidher tajjeb u naddaf dik il-parti ta 'fuq tal-ġenb tiegħi li kienet qed issuqni ĠENNI.

    Jien jista 'jkun li jkolli nixtri dak il-kafè għadu!

  4. 10

    Doug,

    Se nkun vuċi li ma taqbilx, billi nuża l-esperjenza tiegħi bħala eżempju. Niftakar l-imejls tagħna meta l-imejl tad-dar tiegħi nbidel u int innutat li kelli sempliċement nagħżel ma 'waħda ġdida tiegħi. Irrid nammetti li kelli heck ta 'żmien "niskopri" il-karatteristika l-ġdida fis-sit tiegħek biex terġa' tidħol. Parti minn dan kien minħabba li r-rabta oriġinali kienet kemmxejn aktar tradizzjonali u kont niftakar vagament f'dik. L-ieħor kien minħabba li n-nofs envelope tal-ġenb sempliċement ma kienx jidher għalija bħala envelope inizjalment. Wara madwar 5 minuti jew iktar bdejt indawwar il-maws fuq kull immaġni u meta wera t-titlu "Abbona b'Email", allura kont naf li kont fin-negozju. Moħħi deher ukoll x'kienet l-istampa tal-link.

    Iżda, għall-inqas għalija, envelop fuq il-ġenb sempliċement ma kienx intuwittiv għalija bħala l-post fejn nabbona għan-notifiki bl-email. U (għax qaluli biex dejjem nispiċċa b'xi ħaġa sabiħa) naqbel ma 'Phil hawn fuq; il-metodu huwa tassew sempliċi u l-oġġett kollu jaħdem tajjeb. Nieħuha l-għodda tad-disinn tiegħek għenet biex jagħtik id-dimensjonijiet eżatti għat-3 taqsimiet; din hija suppożizzjoni korretta? Ikolli nassumi hekk, peress li kieku kelli, ngħidu aħna, immaġni wiesgħa ta '400 pixel ikolli nkun naf l-issettjar it-tajjeb, eċċ.

  5. 12
    • 13

      William,

      Jidher li jista 'jkollok kunflitt bejn l-ismijiet tal-klassi tal-kummenti tiegħek u l-ismijiet tal-klassi fil-grafika tal-ġenb. Tista 'ssemmihom b'mod differenti biex tiċċara l-kunflitt. Għidli jekk għandek bżonn daqqa t'id!

      Doug

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

    Approċċ sabiħ, imma għandi bżonn xi ħaġa għal mappa topografika, allura ma nistax nuża żoni rettangolari ... Naħseb li għandi nuża l-immaġini tal-istil il-qadim bil-koordinati, imma probabbilment se nħaffer ftit iktar fil-fond ...

  11. 19

    Grazzi għal din l-informazzjoni, Doug. Kont ilni hawn qabel u staqsejt kif għamiltha. Ridna noħolqu mappa bħal dik biex tiddaħħal wara l-karigi tagħna, u issa li għandna l-mezzi, nistgħu nagħmluha. Bravo!

  12. 20
  13. 21

    Hello Doug,
    Ħallejt kumment preċedenti imma rrealizzajt li kważi ma offrejt l-ebda għarfien dwar id-dilemma tiegħi. Aħna qed naddattaw tema ta 'wordpress biex tgħinna nniedu s-sitcom onlajn tagħna hawn:

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

    Issa, tara li għandna banner tan-navigazzjoni fin-naħa ta 'fuq, immaġni li ħsibna li nippjanaw kif għandna għexieren ta' drabi qabel. / palmforehad. Ħadd minna ma jifhem tassew is-CSS, imma nfixklu biżżejjed u s'issa għamilna tajjeb sa dan il-punt. L-artiklu tiegħek fl-UNIKA WIEĦED minn għexieren li pprovdew huma ħarsa reali dwar kif tuża l-immaġini tal-immaġni fis-CSS faċilment. Bdejt il-folja tal-istil skont id-direzzjonijiet tiegħek, imma m'għandi l-ebda idea fejn tpoġġi l-HTML. Dak kollu li għidt huwa "Żid l-html tiegħek ... Huwa sabiħ u sempliċi" u mbagħad bdejt għax ħsibt .. "mhux sempliċi biżżejjed għalija!" Ma kontx naf li stajt inżid html f'xi waħda minn dawn il-paġni PHP fl-editur tat-tema. Inpoġġi l-html fl-intestatura? Il-mudell tal-Indiċi Ewlieni? Il-Funzjonijiet? Nassumi li l-utenti kollha tal-wordpress għandhom l-għażla li jeditjaw it-tema tagħhom fl-editur tad-daxxbord, li jidher pjuttost universali fil-funzjonalità. Jekk tista 'tissuġġerixxi fejn tpoġġi l-html, inħobb naddatta kodiċi oru għall-bar tan-navigazzjoni tiegħi.

    Grazzi talli taqsam l-għarfien tiegħek mal-komunità. Jien kuntent li jkollok kafè.

    • 22

      Hi Phay!

      Il-fajls kollha għat-tema tal-blog tiegħek huma disponibbli permezz tal-pannell Ammin għall-editjar. Jekk tikklikkja fuq Preżentazzjoni u mbagħad Editur tat-Tema, għandek tkun tista 'tara lista tal-fajls tiegħek fuq il-lemin u editur fuq ix-xellug.

      Jekk tixtieq li dan ikun fil-ġenb tiegħek, probabbilment ikollok paġna tal-Ġenb. Ikklikkja biex teditjah u mbagħad poġġi l-HTML ipprovdut fil-paġna fejn tixtieqha.

      Nota waħda: L-editjar tal-folja tal-istil huwa relattiv għall-paġna tiegħek, allura jkollok bżonn ttella 'l-istampa fid-direttorju tal-immaġini tat-tema jekk tkun qed tirreferenzjaha bħalma tkun immaġini oħra fit-tema tiegħek.

      Nittama li tgħin!

    • 23

      Phay,
      Iltqajt ma 'dan is-sit illum u kelli l-istess dilemma bħalek. Xtaqt ukoll inżid mappa tal-immaġni mal-header image. Wara li kont nilgħab magħha għal xi ftit, irnexxieli nagħmel sew. Poġġi d-div HTML fil-fajl header.php. Qiegħedha bejn u. Mhux ċert jekk il-mudell tiegħek għandux dik il-kodifikazzjoni eżatta, imma lagħab miegħu fil-fajl header.php u int tafha.
      -
      Paul

  14. 24

    Grazzi tar-rispons mgħaġġel!

    Le, ma ridtx li jkun fil-ġenb tal-ġenb, jinsab fil-parti ta 'fuq tal-paġna (tista' tara fil-link li pprovdejt- il-bar tan-navigazzjoni roża li jgħid il-kontant, dwar l-ispettaklu eċċ.)

    Ilni fil-għodu kollha naħdem fid-daxxbord, sfortunatament, ma nafx f'liema fajl inpoġġi l-html, kif intqal hawn fuq, għandi diversi, header.php, index.php prinċipali, functions.php, footer.php. M'inix ċert fejn ddaħħal il-kodiċi html. (l-ewwel parti li pprovdejt, diġà daħħalt il-kumplament fil-folja tal-istili tiegħi) Għandi l-immaġni tiegħi hemm fuq il-websajt, kollox lest biex imur, jien biss irrid inkun naf fejn żid il-porzjon html tal-kodiċi għall-adattament.

    Grazzi ħafna tal-ħin tiegħek u tpoġġi mistoqsijiet minn novizzi.

    Phay

  15. 25

    ... Jew forsi xi ħadd jista 'jpoġġi fil-kummenti dwar liema fajl inpoġġu l-porzjon html tal-kodiċi fih. Sinjur ftit postijiet' il fuq qal li rriżulta. Ma kontx daqshekk fortunat.

    Phaylen

  16. 26
  17. 27

    Qed inħoss ħafna ħin insib mod kif ninkorpora mappa tal-immaġni li tista 'tikklikkjaha fil-wordpress minħabba li tneħħi t-tikketti tal-mappa html. Il-mod tiegħek jaħdem imma mappa ta 'l-Istati Uniti hija ovvjament mod ta' kumpless biex tinqafel b'dan il-mod. Jien mitluf.

    Għajnuna

    Jidher li l-flash hija l-unika għażla tiegħi?

    • 28

      Dave,

      Jekk tpoġġi l-immaġni fil-mudell tiegħek, int tkun tajjeb. Jekk tpoġġi l-mappa tal-immaġini fil-kontenut attwali, tista 'tħabbat wiċċha ma' kwistjonijiet ta 'filtri. Il-mod kif ħdimt madwar dan huwa terribbli, imma xi drabi użajt iframe.

      Doug

  18. 29

    Hi,

    jidher li l-mappa tal-immaġni u r-rabtiet huma żewġ affarijiet differenti, ma jaħdmux flimkien bħal ma tagħmel immaġni tal-mappa f'html

    meta ninkludi pożizzjonament fl-isfond (iċ-ċentru tax-xellug) għall-mappa tal-immaġni, il-pożizzjonament tal-links ma jsegwix.

    xi mod biex iddur ma 'dan? jien dilettant ħafna. Grazzi.

  19. 31

    Approċċ simili jintuża għal mappa tal-immaġni akbar u aktar ikkumplikata bħal ma qed nipprova nuża?

    Jekk tara s-sit tiegħi, ikklikkja fuq links lejn ix-xellug u tara l-immaġni li qed nipprova nuża bħala mappa tal-immaġni (taħt l-alfabet Test).

    Bażikament, tipprova tuża l-Immaġni biex tmur f'kull taqsima ta 'din il-lista b'ittra.

    Evidentement, qattajt 20 minuta nibni mappa bil-GIMP, u mbagħad WP ineħħi t-tikketti tal-mappa, allura hekk sibt is-sit tiegħek.

    Għalkemm, jista 'jikkontempla li juża Flash

    Grazzi.

  20. 33

    Bħalissa qed nuża mudell ta 'tqassim u editjar bl-affarijiet tiegħi stess. Irrid inżid mappa tal-immaġni, imma m'inix ċert fejn se npoġġiha fis-css. l-immaġni li rrid nagħmel mappa tinsab fil-parti tal-intestatura.

  21. 34

    bonjour, bnejt il-websajt tiegħi fuq joomla ... irrid nuża dan il-metodu biex nagħmel il-logo tal-paġna tiegħi link għad-dar, qaluli li ma tistax tagħmel dan ma 'joomla imma dan l-artiklu jagħtini tama! l-għajnuna permezz tal-email tkun apprezzata ħafna ... grazzi

  22. 35

    Hi Doug - Qed nibni mappa tal-immaġni pjuttost kumplessa bbażata fuq is-css li għandha wkoll qlib remot (f'dan il-każ, it-test juri x'imkien ieħor fuq il-paġna meta tpoġġi waħda mill-hotspots tal-immaġini). Xorta waħda, iltqajt mal-eżempju tiegħek hawnhekk waqt li kont qed nirriċerka dak ... u ħsibt li naqsam l-input li ġej:

    1. Għall-aċċessibilità, m'għandekx tuża viżibilità: xejn (jew wiri: xejn jekk tqis li) biex taħbi t-test hawn, bħala element iddisinjat b'viżibilità: moħbi mhux se jinqara mill-qarrejja tal-iskrin (dawk li jsegwu l-ispeċifikazzjoni) .

    Minflok, uża teknika ta 'sostituzzjoni tal-immaġni aktar robusta. Nissuġġerixxi jew il-metodu Phark jew Gilder / Levin - dawk huma biss l-ismijiet dokumentati aħjar għall-google biex issib it-tekniki bażiċi. Nippreferi G / L għax jaħdem ukoll bis-CSS attivat imma l-immaġini huma mitfija.

    2. Filwaqt li ma narahx jinkiser (billi tuża FF3), l-implimentazzjoni tiegħek tal-pożizzjonament għandha wkoll riskji inerenti. Element assolutament pożizzjonat huwa pożizzjonat relattivament għall-eqreb ġenitur pożizzjonat tiegħu. Bażikament, int trid tissettja b'mod espliċitu kuntest ta 'pożizzjonament billi tapplika' pożizzjoni: relattiva 'għal #abbonament. Imbagħad it-tfal (il-links pożizzjonati) jistgħu jiġu pożizzjonati fi ħdan dak il-ġenitur. Dan il-metodu jgħin biex jiżgura riżultati aktar affidabbli fost il-browsers.

    Ukoll, imbagħad għandek tuża d-dikjarazzjonijiet tal-pożizzjonament ta '"top: x" u "left: x" (fejn x huwa l-valur offset, ngħidu aħna f'px) minflok marġini biex timmaniġġa dak il-pożizzjonament. Għal darb'oħra, mhux neċessarjament naraha tkisser il-mod li għandek, imma l-parti ta 'fuq u tax-xellug huma maħsuba għal dan allura għaliex ma tużaxhom? Barra minn hekk għandek floats u marġini ssettjati fuq l-istess element, li taħt kondizzjonijiet speċifiċi jikkawżaw il-bug ta '"marġni doppju" fl-IE6 (ttestjajt dan hemmhekk?) - waqt li hemm soluzzjoni, tevita dik il-kwistjoni kompletament billi tuża top u ħalla minflok marġini għall-ippożizzjonar f'dan il-każ.

    3. Fl-aħħarnett, għaliex ma tużax lista mhux ordnata semantikament soda għal dawn il-links minflok id-div bla sens?

    Jiddispjacini talli tgerrex fuq ... Inħobb biss naqsam, b / c naf mill-esperjenza kif hemm ħafna modi differenti kif tuża CSS biex tikseb ir-riżultat mixtieq, imma xi modi ċertament jaħdmu aħjar (aktar affidabbli, cross-browser) minn oħrajn . HTH.

  23. 36
  24. 37
  25. 38

    Grazzi ħafna!! L-istruzzjonijiet tiegħek faddluli SIGĦAT ta 'xogħol ... Jien ġdid għall-iżvilupp tal-web, u għadni kemm sofrejt permezz tal-ewwel proġett kbir tiegħi. Jien għamiltu ... il-klijent huwa kuntent, verament estatiku, u jien ukoll!

  26. 39

    Hello, grazzi ħafna talli poġġejt dan! Snin wara u għadu qed jgħin ... sabiħ! Qed nitħabat biex inġib il-mappa tal-immaġni tiegħi biex torbot fil-post it-tajjeb. Għandi banner u rrid li l-ikoni soċjali fin-naħa ta 'fuq tal-lemin tal-banner jgħaqqdu bl-użu tal-kodiċi li tajt. Jaħdem tajjeb, ħlief li qed nagħmel xi ħaġa ħażina għax ir-rabtiet tiegħi qed jidhru fuq in-naħa ta 'fuq tax-xellug tal-iskrin, mhux fuq l-ikoni soċjali, iżda fuq il-logo. Jien ċert li hija xi ħaġa sempliċi, imma sempliċement ma nistax insemmuha. Ħsibt li naqsamha hawn f'każ li jkollok xi għarfien. Grazzi għal darb'oħra talli poġġejt dan!

What do you think?

Dan is-sit juża Akismet biex inaqqas l-ispam. Tgħallem kif il-kumment tiegħek huwa pproċessat.