Hoe om 'n beeldkaart met CSS op te stel

opsies

Ek wou iets 'geeky' hê, en daarom besluit ek op 'n 'pocket' -afbeelding wat al die inskrywingsmetodes vir my blog bevat.

In die dae van Web 1.0 kan 'n versameling skakels soos hierdie gebou word deur u beeld met skakels op elke afbeelding op te splits en dan alles weer aanmekaar te werk met 'n tafel. Dit kan ook bereik word deur 'n beeldkaart maar dit vereis gewoonlik 'n instrument om die koördinaatstelsel uit te bou. As u Cascading Style Sheets gebruik, maak dit u baie makliker ... sonder om beelde te splits en geen instrument te probeer vind om u koördinaatstelsel te bou nie!

  1. Bou u beeld wat u wil gebruik. U kan hierdie afbeelding hieronder gebruik (regsklik en stoor om af te laai):
    Opsies
  2. Laai u beeld op na 'n gids wat relatief is tot u CSS. In WordPress kan dit die maklikste gedoen word deur dit in 'n afbeeldingsmap in u temagids te plaas.
  3. Voeg u HTML by. Dit is lekker eenvoudig ... 'n div met drie skakels daarin:
    > div id = "subscribe">> a id = "rss" href = "[your feed link]" title = "Teken in op RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[u e-pos inteken skakel]" title = "Teken in met e-pos" >> span class = "hide"> E-pos> / span >> / a>> a id = "mobile" href = "[u mobiele skakel]" title = "Bekyk mobiele weergawe" >> span class = "hide"> Mobiel> / span >> / a>> / div>
    
  4. Wysig u Cascading Style Sheet. U sal 6 verskillende style byvoeg. 1 styl vir die algehele div, 1 vir die a-tag sodat dit geen teksversiering vertoon nie, 1 styl om die teks te verberg (gebruik vir toeganklikheid) en 1 stylspesifikasie vir elk van die skakels:
    #subscribe {/ * agtergrondprentblok * / vertoning: blok; breedte: 215px; hoogte: 60px; agtergrond: url (images / options.png) nie-herhaal; marge-top: 0px; } #subscribe a {text-decoration: none; } .versteek {sigbaarheid: verborge; } #rss {/ * RSS-skakel * / float: links; posisie: absoluut; breedte: 50px; hoogte: 50px; marge-links: 20px; marge-top: 5px; } #email {/ * E-pos skakel * / float: links; posisie: absoluut; breedte: 50px; hoogte: 50px; marge-links: 70 px; marge-top: 5px; } #mobile {/ * Mobile Link * / float: links; posisie: absoluut; breedte: 50px; hoogte: 50px; marge-links: 130 px; marge-top: 5px; }

Die posisionering is mooi en eenvoudig ... voeg 'n hoogte en breedte by en stel dan die linkerkant van die linkerkant van die afbeelding en die boonste kant van die boonste kant van die prentjie!

Hierdie "How To" -pos is vir toegang tot die Geeks is 'n ultieme "How To" -wedstryd! Een opmerking, dit is waar dat 'n beeldkaart veel meer ingewikkelde veelhoeke kan hê, maar ek het nie regtig te veel plekke gesien waar dit 'n moet wees nie. Ek het opgemerk dat 'n groot ol 'RSS-beeld op die Geeks 'n sexy sybalk is ... dit is 'n goeie plek vir 'n skakel. 😉

OPGEDATEER 10/3/2007 vir beter toeganklikheid met die advies van Phil!

borg: As u 'n beginner is vir webontwerp, dan moet u u eie webwerf op die regte manier bou met HTML & CSS, 2de uitgawe. In hierdie maklik-om-te-volg-gids leer u hoe u 'n webwerf op die beste manier kan bou - deur dit self te doen!

41 Comments

  1. 1

    Doug, dit lyk na 'n goeie metode, maar dit is baie ontoeganklik.

    Oorweeg 'n blinde gebruiker met 'n skermleser, 'n gebruiker met 'n teksblaaier of enigiemand wat die webwerf besoek sonder CSS of Beelde geaktiveer (soos miskien 'n mobiele gebruiker wat die skakel na jou selfoonvriendelike webwerf soek). Nie een van hulle sal van daardie drie skakels weet nie, want hulle het geen teks nie. As beelde af is, sal 'n gebruiker nie eens alt-teks sien om te beskryf wat daar sou gewees het nie, want dit is 'n agtergrondprent.

    Beter sal wees om die beelde te sny, hulle te koppel, dit in 'n lys te plaas en dit langs mekaar te laat dryf. Of gebruik selfs teks vir die skakels en vervang die teks deur 'n standaard beeldvervangingstegniek te gebruik. Dit lyk gerieflik, maar dit maak dinge baie moeiliker/onmoontlik vir diegene wat nie 'n standaard grafiese blaaier gebruik nie.

    • 2
      • 3

        Doug,

        JAWS lees nie skakeltitels by verstek nie, maar jy is reg, dit kan doen. Hoekom sou jy na skakeltitels soek as jy egter nie geweet het dat dit daar is nie, en selfs al was jy, dit lei sekerlik tot 'n bruikbaarheidsprobleem wat beteken dat jy minder bekwame gebruikers 'n tweederangse ervaring van die gebruik van jou werf gee.

        Vir teksblaaiers, die artikel waarna jy my wys dat Lynx jou ook toelaat om 'n lys van skakeltitels te bring, maar my punt bly dat as jy nie geweet het dat daar 'n skakel daar was nie, aangesien daar in die eerste plek geen teks was nie , hoekom sal jy titelteks soek?

        Ten slotte, skakeltitelkenmerke sal steeds nie verskyn vir enigiemand wat blaai sonder prente geaktiveer of sonder CSS geaktiveer nie.

        So ja, skakels met titels is beter as dié sonder, maar in hierdie geval is dit net marginaal.

        Dit is hoekom die gebruik van 'n beeld, sodat alt-teks gelees kan word, of beeldvervanging, sodat die teks daar is, 'n baie veiliger, meer toeganklike en meer bruikbare opsie is.

        • 4

          Goeie inligting, Phil. Ek gaan probeer om dit met teks te verbeter, maar steek bloot die teks weg – so sal 'n toeganklike produk soos JAWS die skakelteks lees en die teks sal vertoon word as CSS of Beelde gedeaktiveer is.

          Ek stem egter nie saam dat die enigste toeganklike oplossing sou wees om 'n prent met 'n skakel te plaas nie.

  2. 5
  3. 8

    Ek het dit gesteel. Daar, ek het dit gesê.

    Doug, die grafika is fantasties en die kodering is so ongelooflik eenvoudig dat dit my bang maak (het met CSS gespeel en nou “kry dit” uiteindelik).

    Het die kode aangepas om aan my behoeftes te voldoen, uitgepluis waar om die HTML-bietjie in te gooi, en om die waarheid te sê, dit lyk wonderlik en het daardie bokant van my sidebar skoongemaak wat my KANSIEK gemaak het.

    Ek sal dalk net nog daardie koffie vir jou moet koop!

  4. 10

    Doug,

    Ek gaan 'n andersdenkende stem wees en my ervaring as 'n voorbeeld gebruik. Ek onthou ons e-posse toe my huis se e-pos verander het en jy opgemerk het dat ek eenvoudig met my nuwe een moes inteken. Ek moet erken dat ek 'n baie tyd gehad het om die nuwe kenmerk op jou webwerf te "ontdek" om weer in te teken. Deel hiervan was omdat die oorspronklike skakel 'n bietjie meer tradisioneel was en ek het daardie een vaagweg onthou. Die ander een was omdat die sywaartse halwe koevert aanvanklik net nie vir my soos 'n koevert gelyk het nie. Na so 5 of meer minute het ek my muis oor elke prent begin rol en toe die "Subscribe with Email" titel wys, toe het ek geweet ek is in besigheid. My brein het ook uitgepluis wat die skakelfoto was.

    Maar, ten minste vir my, was 'n sywaartse koevert net nie vir my intuïtief as die plek om in te teken op e-poskennisgewings nie. En (want ek is aangesê om altyd met iets lekker af te sluit) stem ek saam met Phil hierbo; die metode is regtig eenvoudig en die hele item werk uitstekend. Ek neem aan dat jou ontwerpinstrument gehelp het om vir jou die presiese afmetings vir die 3 afdelings te gee; is dit 'n korrekte aanname? Ek moet so aanneem, want as ek byvoorbeeld 'n 400 pixel wye beeld gehad het, sou ek die regte instellings moes ken, ens.

  5. 12
    • 13

      William,

      Dit lyk of jy dalk 'n konflik het tussen jou opmerkingklasname en die klasname in die sidebar-grafika. Jy kan hulle anders noem om die konflik op te klaar. Laat weet my as jy 'n hand nodig het!

      Doug

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

    Lekker benadering, maar ek het iets nodig vir 'n topografiese kaart, so ek kan nie reghoekige areas gebruik nie ... Ek dink ek moet die ou styl beeldkaart met koördinate gebruik, maar ek sal waarskynlik 'n bietjie dieper delf ...

  11. 19

    Dankie vir hierdie inligting, Doug. Ek was al voorheen hier en het gewonder hoe jy dit gedoen het. Ons wou so 'n kaart geskep het om na ons plasings in te voeg, en noudat ons die middele het, kan ons dit doen. Bravo!

  12. 20
  13. 21

    Hallo Doug,
    Ek het 'n vorige opmerking gelaat, maar het besef dat ek amper geen insig in my dilemma gegee het nie. Ons het 'n wordpress-tema aangepas om ons te help om ons aanlyn sitkom hier bekend te stel:

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

    Nou sal jy sien ons het 'n navigasiebanier bo-aan, 'n prent wat ons bedoel het om te karteer soos ons dosyne kere voorheen gehad het. /palmvoorhad. Nie een van ons verstaan ​​CSS regtig nie, maar ons struikel genoegsaam rond en het tot dusver goed gevaar tot op hierdie punt. Jou artikel in die ENIGSTE EEN uit dosyne wat verskaf is, is werklike insig oor hoe om beeldkartering in CSS maklik te gebruik. Ek het die stylblad volgens jou aanwysings gemaak, maar het geen idee waar om die HTML te plaas nie. Al wat jy gesê het is "Voeg jou html by ... Dit is lekker en eenvoudig" en toe het ek ineengekrimp omdat ek gedink het .. "nie eenvoudig genoeg vir my nie!" Ek het nie geweet ek kan html by enige van hierdie php-bladsye in die tema-redigeerder voeg nie. Plaas ek die html in die kopskrif? Die hoofindeks-sjabloon? Die funksies? Ek neem aan dat alle WordPress-gebruikers die opsie het om hul tema in die dashboardredigeerder te wysig, wat redelik universeel lyk in funksionaliteit. As jy kan voorstel waar om die html te plaas, sal ek graag die oru-kode vir my navigasiebalk wil aanpas.

    Dankie dat jy jou kennis met die gemeenskap deel. Ek is bly om vir jou 'n koffie te gee.

    • 22

      Hallo Phay!

      Al die lêers vir jou blog se tema is beskikbaar deur die Admin-paneel vir redigering. As jy op Presentation en dan Theme Editor klik, behoort jy 'n lys van jou lêers aan die regterkant en 'n redigeerder aan die linkerkant te kan sien.

      As jy wil hê dat dit in jou sidebar moet wees, het jy waarskynlik 'n Sidebar-bladsy. Klik om dit te wysig en plaas dan die HTML wat verskaf word op die bladsy waar jy dit wil hê.

      Een nota: Die wysiging van die stylblad is relatief tot jou bladsy, so jy sal die prent na die tema-prente-gids moet oplaai as jy daarna verwys soos na ander prente in jou tema.

      Hoop dit help!

    • 23

      Phay,
      Ek het vandag op hierdie webwerf afgekom en het dieselfde dilemma as jy gehad. Ek wou ook 'n beeldkaart by die kopskrif voeg. Nadat ek 'n rukkie daarmee rondgespeel het, het ek dit reggekry. Plaas die div HTML in die header.php lêer. Ek sit dit tussen en . Nie seker of jou sjabloon daardie presiese kodering het nie, maar speel daarmee in die header.php-lêer en jy sal dit uitvind.
      -
      Paul

  14. 24

    Dankie vir die vinnige reaksie!

    Nee, ek wou nie hê dit moet in die sybalk wees nie, dit is bo-aan die bladsy (jy kan sien in die skakel wat ek verskaf het - die pienk navigasiebalk wat sê kontant, oor die show ens..)

    Ek het die hele oggend in die dashboard gewerk, ek is ongelukkig nie seker in watter lêer ek die html plaas nie, soos hierbo genoem, ek het verskeie, header.php, main index.php, functions.php, footer.php. Ek is nie seker waar om die html-kode in te voeg nie. (die eerste deel wat jy verskaf het, ek het reeds die res in my stylblad ingevoeg) Ek het my beeld daar op die webwerf, alles is gereed om te gaan, ek moet net weet waar om die html-gedeelte van die kode by te voeg om aan te pas.

    Baie dankie vir jou tyd en vrae van 'n beginner.

    maal

  15. 25

    … Of dalk kan iemand in die kommentaar plaas oor watter lêer ons die html-gedeelte van die kode plaas. 'n Meneer 'n paar plasings hoër het gesê hy het dit uitgepluis. Ek was nog nie so gelukkig nie.

    Phaylen

  16. 26
  17. 27

    Ek het 'n helse tyd om 'n manier te vind om 'n klikbare beeldkaart in WordPress in te bed, want dit stroop html-kaartetikette. Jou manier sal werk, maar 'n kaart van die VSA is natuurlik baie ingewikkeld om op hierdie manier te skroef. Ek is verlore.

    Hulp.

    Dit lyk of flits my enigste opsie is?

    • 28

      Dave,

      As jy die prent in jou sjabloon plaas, sal dit goed wees. As u die beeldkaart in die werklike inhoud plaas, kan u filterprobleme ondervind. Die manier waarop ek hieroor gewerk het, is verskriklik, maar soms het ek 'n iframe gebruik.

      Doug

  18. 29

    Hi,

    dit blyk dat die beeldkaart en die skakels twee verskillende dinge is, hulle werk nie saam soos hoe 'n beeldkaart in HTML werk nie

    wanneer ek agtergrondposisionering (links middel) vir die beeldkaart insluit, volg die posisionering van die skakels nie op nie.

    enige manier om dit te omseil? ek is baie amateur. Dankie.

  19. 31

    Sou 'n soortgelyke benadering gebruik word vir 'n groter en meer ingewikkelde beeldkaart soos ek probeer gebruik?

    As jy my webwerf bekyk, klik op skakels aan die linkerkant en jy sal die prent sien wat ek as 'n prentkaart probeer gebruik (onder die Teks-alfabet).

    Basies, probeer om die Beeld te gebruik om per letter na elke afdeling van hierdie lys te gaan.

    Klaarblyklik het ek 20 minute spandeer om 'n kaart met GIMP te bou, en dan verwyder WP die kaartetikette, so dit is hoe ek jou webwerf gevind het.

    Dit kan egter oorweeg om Flash te gebruik

    Dankie.

  20. 33

    Ek gebruik tans 'n sjabloonuitleg en redigeer met my eie goed. Ek wil 'n beeldkaart byvoeg, maar ek is nie seker waar om dit in die css te plaas nie. die prent waarvan ek 'n kaart wil maak, is in die kopgedeelte.

  21. 34

    hallo, ek het my webwerf op joomla gebou ... ek wil hierdie metode gebruik om die logo van my bladsy 'n skakel na die huis te maak, daar is vir my gesê jy kan dit nie met joomla doen nie, maar hierdie artikel gee my hoop! hulp per e-pos sal baie waardeer word ... dankie

  22. 35

    Hallo Doug – Ek is besig om 'n taamlik komplekse css-gebaseerde beeldkaart uit te bou wat ook afgeleë rollovers het (in hierdie geval word teks elders op die bladsy vertoon wanneer jy een van die beeldhotspots beweeg). In elk geval, ek het op jou voorbeeld hier afgekom terwyl ek dit nagevors het ... en ek het gedink ek sal die volgende insette deel:

    1. Vir toeganklikheid, moet jy nie sigbaarheid:geen (of vertoon:geen as jy dit oorweeg het) gebruik om die teks hier te versteek nie, as 'n element wat met sigbaarheid gestileer is: versteek sal nie deur skermlesers gelees word nie (diegene wat spesifikasie volg) .

    Gebruik eerder 'n meer robuuste beeldvervangingstegniek. Ek stel voor of die Phark-metode of Gilder/Levin - dit is net die beter gedokumenteerde name om te google om die basiese tegnieke te vind. Ek verkies G/L, want dit werk ook met CSS geaktiveer, maar beelde is afgeskakel.

    2. Alhoewel ek nie sien dat dit breek nie (met FF3), het jou implementering van posisionering ook inherente risiko's. 'n Absoluut geposisioneerde element is relatief tot sy naaste geposisioneerde ouer geposisioneer. Basies wil jy uitdruklik 'n posisioneringskonteks stel deur 'posisie:relatief' op #subskripsie toe te pas. Dan kan die kinders (die geposisioneerde skakels) binne daardie ouer geposisioneer word. Hierdie metode help om meer betroubare resultate oor blaaiers heen te verseker.

    U moet dan ook die posisioneringsverklarings van "bo: x" en "links: x" (waar x die verrekenwaarde is, sê in px) eerder as kantlyne gebruik om daardie posisionering te hanteer. Weereens, ek sien dit nie noodwendig breek soos jy dit het nie, maar bo en links is hiervoor bedoel, so hoekom gebruik dit nie? Boonop het jy dryf en marges op dieselfde element gestel, wat onder spesifieke omstandighede die “dubbelmarge”-fout in IE6 veroorsaak (het jy dit daar getoets?) – terwyl daar 'n oplossing is, vermy jy daardie probleem heeltemal deur top te gebruik en links in plaas van kantlyne vir posisionering in hierdie geval.

    3. Laastens, waarom nie 'n semanties gesonde ongeordende lys vir hierdie skakels gebruik in plaas van die betekenislose div nie?

    Jammer dat ek voortgedreun het ... Ek deel net graag, ek weet uit ondervinding hoe daar baie verskillende maniere is om CSS te gebruik om 'n gewenste resultaat te kry, maar sommige maniere werk beslis beter (betroubaarder, kruisblaaier) as ander . HTH.

  23. 36
  24. 37
  25. 38

    Baie dankie!! Jou instruksies het my URE se werk gespaar ... Ek is nuut met webontwikkeling, en ek het sopas gely deur my eerste groot projek. Ek het dit gemaak ... die kliënt is gelukkig, ekstaties eintlik, en ek ook!

  26. 39

    Hallo, baie dankie dat jy dit geplaas het! Jare later en dit help steeds ... lekker! Ek sukkel om my beeldkaart op die regte plek te laat skakel. Ek het 'n banier en ek wil hê dat die sosiale ikone regs bo op die banier moet skakel met die kode wat jy verskaf het. Dit werk uitstekend, behalwe dat ek iets verkeerd doen omdat my skakels heel bo links op die skerm verskyn, nie oor die sosiale ikone nie, maar oor die logo. Ek is seker dit is iets eenvoudig, maar ek kan dit net nie uitmaak nie. Het gedink ek sal dit hier deel vir ingeval jy enige insigte het. Weereens dankie dat jy dit geplaas het!

Wat dink jy?

Hierdie webwerf gebruik Akismet om spam te verminder. Leer hoe jou opmerking verwerk is.