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 prentjie 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 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 komplekse 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.

    Beskou 'n blinde gebruiker met 'n skermleser, 'n gebruiker met slegs 'n teksblaaier of iemand wat die webwerf besoek sonder CSS of beelde geaktiveer (soos 'n mobiele gebruiker wat miskien die skakel na u mobiele vriendelike webwerf soek). Nie een van hulle sal van die drie skakels weet nie omdat hulle geen teks het nie. As die prente uit is, kan die gebruiker nie eers die teks sien om te beskryf wat daar sou wees nie, want dit is 'n agtergrond.

    Die beste is om die beelde te sny, te koppel, in 'n lys te plaas en langs mekaar te dryf. Of gebruik selfs teks vir die skakels en vervang die teks met behulp van 'n standaard beeldvervangingstegniek. Dit lyk gerieflik, maar dit maak dinge baie moeiliker / onmoontlik vir diegene wat nie 'n standaardgrafiese blaaier gebruik nie.

    • 2
      • 3

        Doug,

        JAWS lees nie skakeltitels by verstek nie, maar u kan reg wees. Waarom sou u skakeltitels soek as u nie geweet het dat dit daar was nie, en selfs al was dit, dan is dit beslis 'n bruikbaarheidsprobleem wat beteken dat u minder vaardige gebruikers 'n tweederangse ervaring van die gebruik van u webwerf gee.

        Vir teksblaaiers kan u in die artikel wat u na Lynx wys, u ook 'n lys met skakeltitels opstel, maar my punt bly dat as u nie weet dat daar 'n skakel is nie, aangesien daar in die eerste plek geen teks was nie , waarom sou u titelteks soek?

        Ten slotte sal skakeltitelkenmerke steeds nie verskyn vir enigiemand wat blaai sonder dat beelde geaktiveer is 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 die rede waarom die gebruik van 'n beeld, sodat alt-teks gelees kan word, of die vervanging van foto's, sodat die teks daar is, 'n baie veiliger, meer toeganklike en bruikbare opsie is.

        • 4

          Goeie inligting, Phil. Ek gaan probeer om dit met teks te verbeter, maar net die teks wegsteek - op die manier sal 'n toeganklike produk soos JAWS die skakelteks lees en die teks word vertoon as CSS of Images is uitgeskakel.

          Ek stem nie saam dat die enigste toeganklike oplossing is om 'n beeld met 'n skakel te plaas nie.

  2. 5
  3. 8

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

    Doug, die grafika is fantasties en die kodering is so ongelooflik eenvoudig dat dit my bang maak (speel al met CSS en nou kry ek dit uiteindelik).

    Het die kode aangepas om aan my behoeftes te voldoen, vasgestel waar die HTML-bietjie moet ingegooi word, en eerlik lyk dit goed en het die bokant van my sybalk wat my INSANE aangedryf het, skoongemaak.

    Ek moet dalk net nog daardie koffie vir jou koop!

  4. 10

    Doug,

    Ek gaan 'n afwykende stem wees en my ervaring as voorbeeld gebruik. Ek onthou ons e-posse toe my tuis-e-pos verander het, en u het opgemerk dat ek eenvoudig my nuwe e-pos moes aanmeld. Ek moet erken dat ek die nuwe funksie op u werf 'n bietjie ontdek het om weer aan te sluit. 'N Deel hiervan was omdat die oorspronklike skakel 'n bietjie meer tradisioneel was en dat ek daardie een vaagweg onthou het. Die ander was omdat die sywaartse halwe koevert aanvanklik net nie vir my soos 'n koevert gelyk het nie. Na ongeveer vyf of meer minute het ek my muis oor elke beeld begin rol en toe die titel "Teken in met e-pos" verskyn, het ek geweet dat ek besig was. My brein het ook agtergekom wat die skakelfoto was.

    Maar ten minste vir my was 'n sywaartse koevert net nie vir my intuïtief nie, aangesien dit die plek was om in te teken op e-poskennisgewings. En (omdat daar vir my gesê is om altyd met iets lekkers te eindig) stem ek saam met Phil hierbo; die metode is baie eenvoudig en die hele item werk uitstekend. Ek neem aan dat u ontwerpinstrument gehelp het om u die presiese afmetings vir die drie afdelings te gee; is dit 'n korrekte aanname? Ek moet dit aanneem, want as ek byvoorbeeld 'n beeld van 3 pixel het, sal ek die regte instellings moet ken, ens.

  5. 12
    • 13

      William,

      Dit lyk asof u 'n konflik kan hê tussen u kommentaarklasname en die klasname in die sybalkgrafiek. U kan dit anders noem om die konflik op te klaar. Laat weet my as u 'n hand nodig het!

      Doug

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

    Goeie benadering, maar ek het iets nodig vir 'n topografiese kaart, dus kan ek nie reghoekareas gebruik nie ... Ek dink ek moet die ou stylbeeldkaart met koördinate gebruik, maar ek sal waarskynlik dieper delf ...

  11. 19

    Dankie vir hierdie inligting, Doug. Ek was al vantevore hier en het gewonder hoe u dit gedoen het. Ons wou so 'n kaart skep 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 besef dat ek amper geen insig in my dilemma bied 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 u sien dat ons 'n navigasiebanner aan die bokant het, 'n afbeelding wat ons van plan was om te karteer, soos ons al dekades vantevore gehad het. / palmforehad. Niemand van ons verstaan ​​CSS regtig nie, maar ons struikel genoeg en tot dusver het dit goed gedoen. U artikel in die ENIGSTE een van die tientalle wat verskaf is, is 'n werklike insig in hoe u afbeeldings in CSS maklik kan gebruik. Ek het die stylblad volgens u aanwysings geëet, maar het geen idee waar om die HTML te plaas nie. Al wat u gesê het, is: "Voeg u html by ... dit is mooi en eenvoudig" en toe krimp ek ineen omdat ek dink .. "nie eenvoudig genoeg vir my nie!" Ek het nie geweet dat ek html by enige van hierdie php-bladsye in die tema-redakteur kon voeg nie. Plaas ek die html in die kop? Die hoofindeks-sjabloon? Die funksies? Ek neem aan dat alle WordPress-gebruikers die opsie het om hul tema te redigeer in die dashboard-redakteur, wat redelik universeel lyk in funksionaliteit. As u sou voorstel waar u die html moet plaas, pas ek graag die oru-kode aan vir my navagation bar.

    Dankie dat u u kennis met die gemeenskap gedeel het. Ek is bly om vir u 'n koffie te kry.

    • 22

      Hallo Phay!

      Al die lêers vir die tema van u blog is beskikbaar vir redigering deur die adminpaneel. As u op Presentasie en dan op Theme Editor klik, sou u 'n lys van u lêers aan die regterkant en 'n redakteur aan die linkerkant kon sien.

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

      Een opmerking: die wysiging van die stylblad is relatief tot u bladsy, dus u moet die foto na die temabeelgids oplaai as u daarna verwys, soos met ander beelde in u tema.

      Hoop dit help!

    • 23

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

  14. 24

    Dankie vir die vinnige reaksie!

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

    Ek het die hele oggend in die dashboard gewerk, helaas, ek weet nie 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 weet nie waar om die html-kode in te voeg nie. (die eerste deel wat u gegee het, ek het die res al in my stylblad ingevoeg) Ek het my beeld daar op die webwerf, alles is gereed om te gaan, ek moet net weet waar u die HTML-gedeelte van die kode moet byvoeg om aan te pas.

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

    Phay

  15. 25

    ... Of miskien kan iemand in die kommentaar plaas in watter lêer ons die html-gedeelte van die kode plaas. 'N Man wat 'n paar poste op het, het gesê dat hy dit uitvind. Ek was nie so gelukkig nie.

    Phaylen

  16. 26
  17. 27

    Ek vind 'n helse tyd om 'n manier te vind om 'n klikbare beeldkaart in WordPress in te bed, omdat dit html-kaartplaatjies strook. U manier sou werk, maar 'n kaart van die VSA is natuurlik baie ingewikkeld om op hierdie manier te werk. Ek is verlore.

    Hulp.

    Dit wil voorkom asof flits my enigste opsie is?

    • 28

      Dave,

      As u die prentjie in u sjabloon plaas, sal dit goed gaan met u. As u die prentkaart in die werklike inhoud plaas, kan u filterprobleme ondervind. Die manier waarop ek hieraan gewerk het, is verskriklik, maar soms het ek 'n iframe gebruik.

      Doug

  18. 29

    Hi,

    dit lyk asof die beeldkaart en die skakels twee verskillende dinge is; dit werk nie saam soos 'n beeldkaart in html nie

    as ek agtergrondposisionering (middel links) vir die prentkaart insluit, volg die posisionering van die skakels nie.

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

  19. 31

    Sou 'n soortgelyke benadering gebruik word vir 'n groter en ingewikkelder beeldkaart soos wat ek probeer gebruik?

    As u my webwerf sien, klik op die skakels aan die linkerkant en dan sien u die prentjie wat ek as 'n beeldkaart wil gebruik (onder die teksalfabet).

    Om die prentjie te probeer gebruik om letterlik na elke afdeling in hierdie lys te gaan.

    Klaarblyklik het ek 20 minute lank 'n kaart met GIMP gebou en WP verwyder die kaartkaartjies, so ek het u webwerf gevind.

    Dit kan egter oorweeg om Flash te gebruik

    Dankie.

  20. 33

    ek gebruik tans 'n sjabloonuitleg en redigering met my eie goed. Ek wil 'n beeldkaart byvoeg, maar ek weet nie waar om dit in die CSS te plaas nie. die prentjie waarvan ek 'n kaart wil maak, is in die kopstuk.

  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, ek het gesê dat u dit nie met joomla kan doen nie, maar hierdie artikel gee my hoop! hulp via e-pos sal baie waardeer word .... dankie

  22. 35

    Hallo Doug - ek is besig om 'n taamlik ingewikkelde css-gebaseerde beeldkaart uit te bou wat ook afgeleë rollovers het (in hierdie geval word teks elders op die bladsy vertoon as u een van die hotspots van die beeld hou). Hoe dit ook al sy, ek het u voorbeeld hier raakgeloop terwyl ek daaroor ondersoek het ... en ek het gedink dat ek die volgende insette sou deel:

    1. Vir toeganklikheid, moet u nie sigbaarheid gebruik nie: geen (of vertoon: geen as u dit sou beskou) om die teks hier te verberg nie, as 'n element wat sigbaar is: verborge sal nie deur skermlesers gelees word nie (die wat volg op spesifikasies) .

    Gebruik eerder 'n meer robuuste beeldvervangingstegniek. Ek stel voor 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 dit nie sien breek nie (met behulp van FF3), hou u implementering van posisionering ook inherente risiko's in. 'N Element wat absoluut geposisioneer is, word geplaas in verhouding tot die ouer wat die naaste geposisioneer is. Eintlik wil u eksplisiet 'n posisioneringskonteks instel deur 'position: relative' toe te pas op # subscribe. Dan kan die kinders (die geposisioneerde skakels) binne daardie ouer geposisioneer word. Hierdie metode help om meer betroubare resultate in blaaiers te verseker.

    U moet ook die posisioneringsverklarings van "top: x" en "left: x" (waar x die offsetwaarde is, sê in px) gebruik, eerder as marges om die posisionering te hanteer. Weereens, ek sien nie noodwendig dat dit breek soos u dit het nie, maar bo en links is hiervoor bedoel. Waarom gebruik u dit nie? Boonop is daar floats en marges op dieselfde element ingestel, wat onder spesifieke omstandighede die "dubbele marge" -fout in IE6 veroorsaak (het u dit daar getoets?) - hoewel daar 'n oplossing is, vermy u die probleem heeltemal deur die top en links in plaas van marges vir posisionering in hierdie geval.

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

    Jammer dat ek verder dreun ... Ek deel net, b / c, ek weet uit ervaring hoe daar baie verskillende maniere is om CSS te gebruik om die gewenste resultaat te behaal, maar sommige maniere werk beslis beter (betroubaarder, dwarsblaaier) as ander . HTH.

  23. 36
  24. 37
  25. 38

    Baie dankie!! U instruksies het my URE werk bespaar ... Ek is nuut in die ontwikkeling van webwerwe en het net gely deur my eerste groot projek. Ek het dit gemaak ... die kliënt is gelukkig, ekstaties, en ek ook!

  26. 39

    Hallo, baie dankie dat u dit gepos het! Jare later help dit nog ... lekker! Ek sukkel om my prentkaart op die regte plek te laat skakel. Ek het 'n banier en wil hê dat die sosiale ikone regs bo in die banier moet skakel met behulp van die kode wat u verskaf het. Dit werk uitstekend, behalwe dat ek iets verkeerd doen, want my skakels verskyn heel links bo op die skerm, nie oor die sosiale ikone nie, maar oor die logo. Ek is seker dit is iets eenvoudig, maar ek kan dit net nie agterkom nie. Het gedink ek deel dit hier as u insigte het. Nogmaals dankie dat u dit gepos het!

Wat dink jy?

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