Sådan oprettes et billedkort med CSS

optioner

Jeg ville have noget 'nørdet', så jeg besluttede mig for en 'lommegrafik', der indeholder alle abonnementsmetoderne til min blog.

I dagene af Web 1.0 kunne en samling af links som dette bygges ved at splejse dit billede op med links på hver grafik og derefter prøve at sy det hele sammen igen med et bord. Det kunne også opnås ved at bruge en billede kort men det kræver normalt et værktøj til at opbygge koordinatsystemet. Brug af Cascading Style Sheets gør dette ton lettere ... ingen splejsning af billeder og intet forsøg på at finde et værktøj til at opbygge dit koordinatsystem!

  1. Byg dit billede, som du gerne vil bruge. Du kan bruge denne grafik nedenfor (højreklik og gem for at downloade):
    Indstillinger
  2. Upload dit billede til et bibliotek, der er relateret til din CSS. I WordPress kan dette gøres nemmest ved at placere det i en billedmappe i dit temakatalog.
  3. Tilføj din HTML. Det er pænt og simpelt ... en div med tre links i:
    > div id = "subscribe">> a id = "rss" href = "[dit feedlink]" title = "Abonner med RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[dit link til e-mail-abonnement]" title = "Abonner med e-mail" >> span class = "hide"> E-mail> / span >> / a>> a id = "mobile" href = "[dit mobillink]" title = "Se mobilversion" >> span class = "hide"> Mobil> / span >> / a>> / div>
    
  4. Rediger dit Cascading Style Sheet. Du tilføjer 6 forskellige stilarter. 1 stil for den samlede div, 1 for et tag, så det ikke viser nogen tekstdekoration, 1 stil for at skjule teksten (bruges til tilgængelighed) og 1 stilspecifikation for hvert af linkene:
    #subscribe {/ * baggrundsbillede blok * / display: blok; bredde: 215px; højde: 60px; baggrund: url (images / options.png) ingen gentagelse; margin-top: 0px; } #subscribe a {text-decoration: none; } .hide {synlighed: skjult; } #rss {/ * RSS Link * / float: venstre; position: absolut; bredde: 50px; højde: 50px; margen til venstre: 20 px; margin-top: 5 px; } #email {/ * E-mail-link * / float: venstre; position: absolut; bredde: 50px; højde: 50px; margen til venstre: 70 px; margin-top: 5 px; } #mobile {/ * Mobile Link * / float: left; position: absolut; bredde: 50px; højde: 50px; margen til venstre: 130 px; margin-top: 5 pixel; }

Positioneringen er pæn og enkel ... tilføj en højde og bredde, og indstil derefter venstre margen fra venstre side af billedet og øverste margen fra den øverste side af billedet!

Dette "How To" -indlæg er til indrejse i Nørder er sexet ultimativ "How To" -konkurrence! En note, det er rigtigt, at et billedkort kan have meget mere komplekse polygoner, men jeg har ikke rigtig set for mange steder, hvor det er et must have. Jeg bemærkede, at store ol 'RSS-billeder på Geeks er Sexet sidebjælke ... det er et godt sted for et link. 😉

OPDATERET 10/3/2007 for bedre tilgængelighed med råd fra Phil!

Sponsor: Hvis du er nybegynder til webdesign, så opbyg dit eget websted på den rigtige måde ved hjælp af HTML & CSS, 2. udgave er et must-have. I denne nemme at følge guide lærer du, hvordan du bygger et websted på den bedst mulige måde - ved at gøre det selv!

41 Kommentarer

  1. 1

    Doug, det virker som en god metode, men den er meget utilgængelig.

    Overvej en blind bruger med en skærmlæser, en bruger med kun en tekstbrowser eller nogen, der besøger webstedet uden CSS eller billeder aktiveret (som måske en mobilbruger på udkig efter linket til dit mobilvenlige sted). Ingen af ​​dem kender til disse tre links, fordi de ikke har nogen tekst. Hvis billeder er slået fra, kan en bruger ikke engang se alt-tekst for at beskrive, hvad der ville have været der, fordi det er et baggrundsbillede.

    Bedre ville være at skære billederne, linke dem, placere dem på en liste og flyde dem ved siden af ​​hinanden. Eller endda brug tekst til linkene og udskift teksten ved hjælp af en standard billedudskiftningsteknik. Dette virker praktisk, men det gør tingene meget sværere / umulige for dem, der ikke bruger en standard grafisk browser.

    • 2
      • 3

        Doug,

        JAWS læser ikke linktitler som standard, men du har ret, det kan. Hvorfor ville du være på udkig efter linktitler, hvis du ikke vidste, at det var der, og selvom du var, falder dette helt sikkert til et brugervenligt problem, hvilket betyder, at du giver mindre dygtige brugere en andenrangs oplevelse af at bruge dit websted.

        For tekstbrowsere giver den artikel, du peger mig mod Lynx, dig også mulighed for at hente en liste over linktitler, men min pointe er, at hvis du ikke vidste, at der var et link der, da der i første omgang ikke var nogen tekst , hvorfor vil du kigge efter titeltekst?

        Endelig vises linkattitelattributter stadig ikke for nogen, der gennemser uden billeder aktiveret eller uden CSS aktiveret.

        Så ja, links til titler er bedre end dem uden, men i dette tilfælde er det kun marginalt.

        Derfor er det meget sikrere, mere tilgængeligt og mere brugbart at bruge et billede, så alt tekst kan læses eller udskiftning af billeder, så teksten er der.

        • 4

          God info, Phil. Jeg vil prøve at forbedre dette med tekst, men bare skjule teksten - på den måde læser et tilgængeligt produkt som JAWS linkteksten, og teksten vises, hvis CSS eller billeder er deaktiveret.

          Jeg er uenig i, at den eneste tilgængelige løsning ville være at placere et billede med et link.

  2. 5
  3. 8

    Jeg stjal det. Der sagde jeg det.

    Doug, grafikken er fantastisk, og kodningen er så utrolig enkel, at jeg skræmmer mig (har spillet med CSS, og nu får jeg endelig "det").

    Justerede koden for at imødekomme mine behov, fandt ud af, hvor jeg skulle slippe HTML-biten, og ærligt talt ser den godt ud og har ryddet op i toppen af ​​min sidebjælke, der har kørt mig SINNESK.

    Jeg skal muligvis bare købe den kaffe til dig endnu!

  4. 10

    Doug,

    Jeg vil være en afvigende stemme og bruge min erfaring som et eksempel. Jeg husker vores e-mails, da min hjemmemail blev ændret, og du bemærkede, at jeg bare skulle tilmelde mig min nye. Jeg må indrømme, at jeg havde en hel del tid til at "opdage" den nye funktion på dit websted for at tilmelde dig igen. En del af dette skyldtes, at det oprindelige link var lidt mere traditionelt, og jeg huskede det vagt. Den anden skyldtes, at den halve konvolut sidelæns bare ikke lignede en konvolut for mig oprindeligt. Efter cirka 5 eller flere minutter begyndte jeg at rulle musen over hvert billede, og da titlen "Abonner med e-mail" viste, vidste jeg, at jeg var i gang. Min hjerne fandt også ud af, hvad linkbilledet var.

    Men i det mindste for mig var en sidelæns konvolut bare ikke intuitiv for mig som stedet at abonnere på e-mail-underretninger. Og (fordi jeg blev bedt om altid at ende med noget pænt) er jeg enig med Phil ovenfor; metoden er virkelig enkel, og hele varen fungerer godt. Jeg antager, at dit designværktøj hjalp dig med at give dig de nøjagtige dimensioner for de 3 sektioner; er det en korrekt antagelse? Jeg må antage det, da hvis jeg fx havde et billede på 400 pixel, ville jeg have brug for at kende de rigtige indstillinger osv.

  5. 12
    • 13

      William,

      Det ser ud til, at du muligvis har en konflikt mellem dine kommentar klassens navne og klassens navne i sidebjerggrafikken. Du kan navngive dem forskelligt for at rydde op i konflikten. Lad mig vide, hvis du har brug for en hånd!

      Doug

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

    Dejlig tilgang, men jeg har brug for noget til et topografisk kort, så jeg kan ikke bruge rektangelområder ... Jeg tror, ​​jeg er nødt til at bruge det gamle stil-imagemap med koordinater, men jeg vil sandsynligvis grave lidt dybere ...

  11. 19

    Tak for disse oplysninger, Doug. Jeg havde været her før og spekulerede på, hvordan du gjorde det. Vi ønskede at skabe et kort som det for at indsætte efter vores indlæg, og nu hvor vi har midlerne, kan vi gøre det. Bravo!

  12. 20
  13. 21

    Hej Doug,
    Jeg efterlod en tidligere kommentar, men indså, at jeg slet ikke tilbød noget indblik i mit dilemma. Vi har tilpasset et wordpress-tema for at hjælpe os med at starte vores online sitcom her:

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

    Nu kan du se, at vi har et navigationsbanner øverst, et billede, som vi havde til hensigt at kortlægge, som vi har snesevis af gange før. / palmforehad. Ingen af ​​os forstår virkelig ikke CSS, men vi snubler tilstrækkeligt rundt og har hidtil gjort det okay indtil nu. Din artikel i KUN ÉN ud af snesevis, der leveres, er reel indsigt i, hvordan man nemt kan bruge imagemapping i CSS. Jeg redigerede stilarket i henhold til dine anvisninger, men har ingen idé om, hvor jeg skal placere HTML. Alt hvad du sagde er "Tilføj din html ... Det er pænt og simpelt" og så krøb jeg mig sammen, fordi jeg tænkte .. "ikke enkel nok for mig!" Jeg vidste ikke, at jeg kunne tilføje html til nogen af ​​disse php-sider i temaditoren. Placerer jeg html i overskriften? Hovedindeksskabelonen? Funktionerne? Jeg antager, at alle wordpress-brugere har mulighed for at redigere deres tema i dashboardeditoren, hvilket virker ret universelt i funktionalitet. Hvis du kunne foreslå, hvor du skulle placere html'en, ville jeg elske at tilpasse oru-kode til min navigationslinje.

    Tak for at dele din viden med samfundet. Jeg er glad for at få dig en kop kaffe.

    • 22

      Hej Phay!

      Alle filerne til din blogs tema er tilgængelige via adminpanelet til redigering. Hvis du klikker på Præsentation og derefter Tema Editor, skal du kunne se en liste over dine filer til højre og en editor til venstre.

      Hvis du ønsker, at dette skal være i dit sidebjælke, har du sandsynligvis en sidebjælkeside. Klik for at redigere det, og anbring derefter den angivne HTML inden for den side, hvor du vil have det.

      Én note: Redigeringen af ​​typografiarket er i forhold til din side, så du bliver nødt til at uploade billedet til temabilledmappen, hvis du henviser til det som med andre billeder i dit tema.

      Håber det hjælper!

    • 23

      Phay,
      Jeg stødte på dette sted i dag og havde det samme dilemma som dig. Jeg ville også tilføje et billedkort til overskriften. Efter at have spillet med det et stykke tid fik jeg det rigtigt. Sæt div HTML i header.php-filen. Jeg lagde det mellem og. Ikke sikker på, om din skabelon har den nøjagtige kodning, men leg rundt med den i header.php-filen, og du finder ud af det.
      -
      paul

  14. 24

    Tak for det hurtige svar!

    Nej, jeg ville ikke have det i sidebjælken, det er øverst på siden (du kan se i det link, jeg leverede - den lyserøde navigationslinje, der siger contant, om showet osv.)

    Jeg har arbejdet i instrumentbrættet hele morgenen, desværre er jeg ikke sikker på, i hvilken fil jeg placerer html, som nævnt ovenfor, jeg har flere, header.php, main index.php, functions.php, footer.php. Jeg er ikke sikker på, hvor jeg skal indsætte html-koden. (den første del, du angav, jeg har allerede indsat resten i mit stilark) Jeg har mit billede der på hjemmesiden, alt er klar til at gå, jeg skal bare vide, hvor jeg skal tilføje html-delen af ​​koden til tilpasning.

    Mange tak for din tid og spørgsmål fra en nybegynder.

    Phay

  15. 25

    ... Eller måske nogen kunne skrive i kommentarerne om, hvilken fil vi placerer html-delen af ​​koden i. En gentleman et par indlæg op sagde, at han regnede med det. Jeg har ikke været så heldig.

    Phaylen

  16. 26
  17. 27

    Jeg har en helvede tid med at finde en måde at integrere et klikbart billedkort i wordpress på, fordi det stryger html-korttags. Din måde ville fungere, men et kort over USA er naturligvis meget kompliceret at skrue på med denne måde. Jeg er faret vild.

    Hjælp.

    Det ser ud til, at flash er min eneste mulighed?

    • 28

      Dave,

      Hvis du lægger billedet i din skabelon, har du det godt. Hvis du sætter billedkortet i det faktiske indhold, kan du løbe ind i filterproblemer. Den måde, jeg har arbejdet omkring dette på, er forfærdeligt, men til tider har jeg brugt en iframe.

      Doug

  18. 29

    Hej,

    det ser ud til, at billedkortet og linkene er to forskellige ting, de fungerer ikke sammen som hvordan et billedkort i html fungerer

    når jeg inkluderer baggrundspositionering (midt til venstre) for billedkortet, følger placeringen af ​​linkene ikke op.

    nogen måde at komme omkring dette? Jeg er meget amatør. tak skal du have.

  19. 31

    Ville en lignende tilgang bruges til et større og mere kompliceret billedkort, som jeg prøver at bruge?

    Hvis du ser mit websted, skal du klikke på links til venstre og du vil se det billede, jeg prøver at bruge som et billedkort (under tekstalfabetet).

    Dybest set forsøger du at bruge billedet til at gå til hvert afsnit på denne liste med bogstaver.

    Jeg brugte åbenbart 20 minutter på at bygge et kort med GIMP, og derefter fjerner WP kortmærkerne, så det var sådan, jeg fandt dit websted.

    Dog kan overveje at bruge Flash

    Tak.

  20. 33

    Jeg bruger i øjeblikket et skabelonlayout og redigering med mine egne ting. Jeg vil tilføje et billedkort, men jeg er ikke sikker på, hvor jeg skal placere det i css. det billede, jeg vil lave et kort over, er i overskriftsdelen.

  21. 34

    hej, jeg byggede min hjemmeside på joomla ... jeg vil bruge denne metode til at gøre logoet på min side til et link til hjemmet, jeg har fået at vide, at du ikke kan gøre dette med joomla, men denne artikel giver mig håb! hjælp via e-mail ville blive meget værdsat .... tak

  22. 35

    Hej Doug - Jeg bygger et ret komplekst css-baseret billedkort, der også har fjernoverførsler (i dette tilfælde vises teksten et andet sted på siden, når du holder markøren over et af billedhotspotsne). Under alle omstændigheder stødte jeg på dit eksempel her, mens jeg undersøgte det ... og jeg troede, jeg ville dele følgende input:

    1. For tilgængelighed skal du ikke bruge synlighed: ingen (eller visning: ingen, hvis du overvejede det) til at skjule teksten her, som et element med synlighed: skjult læses ikke af skærmlæsere (dem, der følger specifikation) .

    Brug i stedet en mere robust billedudskiftningsteknik. Jeg foreslår enten Phark-metoden eller Gilder / Levin - det er bare de bedre dokumenterede navne til at google for at finde de grundlæggende teknikker. Jeg foretrækker G / L, da det også fungerer med CSS aktiveret, men billeder er slået fra.

    2. Selvom jeg ikke kan se det bryde (ved hjælp af FF3), har din implementering af positionering også iboende risici. Et absolut placeret element er placeret i forhold til dets nærmeste placerede forælder. Dybest set vil du udtrykkeligt indstille en positioneringskontekst ved at anvende 'position: relative' til #subscription. Derefter kan børnene (de placerede links) placeres inden for den forælder. Denne metode hjælper med at sikre mere pålidelige resultater på tværs af browsere.

    Du skal også bruge placeringserklæringerne "top: x" og "left: x" (hvor x er forskydningsværdien, siger i px) i stedet for margener til at håndtere denne positionering. Igen kan jeg ikke nødvendigvis se det bryde som du har det, men øverst og venstre er beregnet til dette, så hvorfor ikke bruge dem? Derudover har du sat floats og margener på det samme element, som under specifikke forhold forårsager "dobbelt margin" -fejlen i IE6 (testede du dette der?) - mens der er en løsning, undgår du problemet helt ved hjælp af top og venstre i stedet for margener til positionering i dette tilfælde.

    3. Endelig, hvorfor ikke bruge en semantisk sund uordnet liste til disse links i stedet for den meningsløse div?

    Undskyld for droning ... Jeg kan bare lide at dele, b / c Jeg ved af erfaring, hvordan der er mange forskellige måder at bruge CSS på for at få det ønskede resultat, men nogle måder fungerer bestemt bedre (mere pålidelig, cross-browser) end andre . HTH.

  23. 36
  24. 37
  25. 38

    Mange tak!! Dine instruktioner sparede mig TIMER med arbejde ... Jeg er ny inden for webudvikling, og jeg har lige lidt igennem mit første store projekt. Jeg klarede det ... klienten er glad, ekstatisk faktisk, og det gør jeg også!

  26. 39

    Hej, mange tak for at sende dette! År senere, og det hjælper stadig ... dejligt! Jeg kæmper for at få mit billedkort til at linke det rigtige sted. Jeg har et banner, og jeg ønsker, at de sociale ikoner øverst til højre på banneret skal linke ved hjælp af den kode, du har angivet. Det fungerer godt, bortset fra at jeg laver noget forkert, fordi mine links vises øverst til venstre på skærmen, ikke over de sociale ikoner, men over logoet. Jeg er sikker på, at det er noget simpelt, men jeg kan bare ikke finde ud af det. Tænkte at jeg ville dele det her, hvis du har nogen indsigt. Tak igen for at sende dette!

Hvad mener du?

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.