Kuidas CSS-iga pildikaarti koostada

valikuid

Tahtsin midagi "geeky", nii et otsustasin "tasku" graafika, mis sisaldab kõiki minu blogi tellimismeetodeid.

Veeb 1.0 ajal võiks sellise lingikogu luua, ühendades oma pildi iga graafika linkidega, proovides seejärel kõik koos tabeliga kokku õmmelda. Seda saab saavutada ka kasutades pildikaart kuid selleks on tavaliselt vaja koordinaatsüsteemi ülesehitamiseks tööriista. Kaskaadstiililehtede kasutamine muudab selle tunduvalt lihtsamaks ... ei mingeid pilte ei ühendata ega proovita leida tööriista oma koordinaatide süsteemi loomiseks!

  1. Looge oma pilt, mida soovite kasutada. Seda graafikat saate kasutada allpool (paremklõpsake ja salvestage allalaadimiseks):
    Valikud
  2. Laadige oma pilt üles kataloogi, mis on teie CSS-iga suhteline. WordPressis saab seda kõige lihtsamalt teha, kui asetate selle oma teemakataloogi piltide kausta.
  3. Lisage oma HTML. See on tore ja lihtne ... div, millel on kolm linki:
    > div id = "telli">> a id = "rss" href = "[teie voo link]" title = "Telli RSS-iga" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[teie e-posti tellimislink]" title = "Telli meiliga" >> span class = "hide"> E-post> / span >> / a>> a id = "mobile" href = "[teie mobiililink]" title = "Kuva mobiiliversioon" >> span class = "hide"> Mobiil>> / span >> / a>> / div>
    
  4. Muutke oma kaskaadstiililehte. Lisate 6 erinevat stiili. 1 stiil üldise div jaoks, 1 märgendi jaoks, et see ei kuvaks teksti kaunistusi, 1 stiil teksti peitmiseks (kasutatakse hõlbustuseks) ja 1 stiili spetsifikatsioon iga lingi jaoks:
    #subscribe {/ * taustpildi plokk * / display: block; laius: 215px; kõrgus: 60px; taust: URL (images / options.png) ei kordu; veeriste ülaosa: 0px; } #tellige {text-decoration: none; } .hide {nähtavus: peidetud; } #rss {/ * RSS-link * / ujuk: vasak; positsioon: absoluutne; laius: 50px; kõrgus: 50px; serv vasakul: 20 pikslit; ülemine äär: 5px; } #email {/ * e-posti link * / ujuk: vasakul; positsioon: absoluutne; laius: 50px; kõrgus: 50px; serv vasakul: 70 pikslit; ülemine äär: 5px; } #mobile {/ * mobiililink * / ujuk: vasakul; positsioon: absoluutne; laius: 50px; kõrgus: 50px; serv vasakul: 130 pikslit; ülemine äär: 5px; }

Asukoha määramine on kena ja lihtne ... lisage kõrgus ja laius ning määrake seejärel pildi vasakust servast vasak ja ülemisest servast ülemine veeris!

See "Kuidas" postitus on mõeldud sisselogimiseks Geeksid on seksikas ülim “Kuidas” võistlus! Üks märkus, on tõsi, et pildikaardil võib olla palju keerukamaid hulknurki, kuid ma pole tegelikult näinud liiga palju kohti, kus see peab olema. Ma märkasin, et Geeks on seksikas külgribal suur RSS-pilt ... see on hea koht lingi jaoks. 😉

Uuendatud 10. oktoober 3 parema juurdepääsetavuse huvides Phil!

Sponsor: Kui olete veebidisaini algaja, siis looge oma veebisait õigesti HTML-i ja CSS-i abil, 2. väljaanne on hädavajalik. Selles hõlpsasti jälgitavas juhendis saate teada, kuidas veebisaiti parimal viisil luua - tehes seda ise!

41 Kommentaarid

  1. 1

    Doug, see tundub kena meetod, kuid see on väga kättesaamatu.

    Mõelgem pimedale kasutajale, kellel on ekraanilugeja, kasutajale, kellel on ainult tekstibrauser, või kõigil, kes külastavad saiti ilma CSS-i või piltideta (näiteks mobiilikasutaja, kes otsib linki teie mobiilisõbralikule saidile). Keegi neist ei tea nende kolme lingi kohta, kuna neil pole teksti. Kui pildid on välja lülitatud, ei näe kasutaja isegi alternatiivteksti, et kirjeldada, mis seal oleks olnud, sest see on taustapilt.

    Parem oleks piltide viilutamine, linkimine, nimekirja panemine ja üksteise kõrval hõljumine. Või kasutage linkide jaoks isegi teksti ja asendage tekst tavalise pildi asendamise tehnikaga. See tundub mugav, kuid see muudab asja palju keerulisemaks / võimatumaks neile, kes tavalist graafilist brauserit ei kasuta.

    • 2
      • 3

        Doug,

        JAWS ei loe linkide pealkirju vaikimisi, kuid teil on õigus, küll saab. Miks otsiksite linkide pealkirju, kui te ei teaks, et see seal on, ja isegi kui te seda oleksite leidnud, langeb see kindlasti kasutatavuse probleemini, mis tähendab, et annate vähem võimekatele kasutajatele oma saidi kasutamise teistmoodi kogemuse.

        Tekstibrauserite puhul lubab artikkel, mille te mulle suunate, et Lynxi abil saate üles tuua ka linkide pealkirjade loendi, kuid minu seisukoht jääb, et kui te ei teadnud, et seal on link, kuna esiteks polnud teksti , miks otsiksite tiitliteksti?

        Lõpuks ei ilmu lingi pealkirja atribuudid endiselt kellelegi, kes sirvib, kui pildid pole lubatud või CSS pole lubatud.

        Nii et jah, seosed pealkirjadega on paremad kui ilma, kuid antud juhul on see vaid marginaalne.

        Sellepärast on pildi kasutamine, et alt-teksti oleks võimalik lugeda, või pildi asendamine, nii et tekst oleks olemas, palju turvalisem, kättesaadavam ja kasutatavam variant.

        • 4

          Hea info, Phil. Püüan seda tekstiga täiustada, kuid lihtsalt teksti peita - nii loeb juurdepääsetav toode, näiteks JAWS, lingi teksti ja teksti kuvatakse, kui CSS või Images on keelatud.

          Ma ei nõustu, et ainus juurdepääsetav lahendus oleks siiski lingiga pildi panemine.

  2. 5
  3. 8

    Ma varastasin selle. Seal ma ütlesin seda.

    Doug, graafika on fantastiline ja kodeerimine on nii uskumatult lihtne, et see hirmutab mind (olen CSS-iga mänginud ja nüüd lõpuks "saan aru").

    Muutsin koodi minu vajaduste rahuldamiseks, mõtlesin välja, kuhu HTML-i bitti visata, ja ausalt öeldes näeb see suurepärane välja ja on puhastanud mu külgriba selle ülaosa, mis on mind hulluks ajanud.

    Ma pean võib-olla teile selle kohvi veel ostma!

  4. 10

    Doug,

    Minust saab eriarvamus, kasutades oma kogemust näitena. Mäletan meie e-kirju, kui mu kodune e-posti aadress muutus ja märkisite, et pean lihtsalt oma uuega valima. Pean tunnistama, et mul oli natuke aega teie saidil uut funktsiooni "avastada", et uuesti lubada. Osa sellest oli seetõttu, et algne link oli natuke traditsioonilisem ja mulle jäi see ähmaselt meelde. Teine oli seepärast, et külje poolne ümbrik lihtsalt ei tundunud mulle esialgu ümbrikuna. Umbes viie või enama minuti pärast hakkasin hiirt iga pildi kohal veeretama ja kui pealkiri „Telli meiliga” näitas, teadsin, et olen äris. Mu aju sai ka aru, milline on lingipilt.

    Kuid vähemalt minu jaoks ei olnud külgsuunaline ümbrik mulle kui e-posti märguannete tellimise kohale intuitiivne. Ja (kuna mul kästi alati lõppeda millegi toredaga), olen nõus Philiga eespool; meetod on tõesti lihtne ja kogu ese töötab suurepäraselt. Ma arvan, et teie disainitööriist aitas teil anda kolme sektsiooni täpsed mõõtmed; kas see on õige oletus? Pean seda eeldama, sest kui mul oleks näiteks 3 pikslit lai pilt, peaksin teadma õigeid seadeid jne.

  5. 12
    • 13

      William,

      Tundub, et teie kommentaariklasside ja külgriba graafikas olevate klassinimede vahel võib tekkida vastuolu. Konflikti klaarimiseks võite neid erinevalt nimetada. Andke teada, kui vajate kätt!

      Doug

  6. 14

    Tundub, et kõik töötab nii FF-is kui ka IE-s ... ma arvan, et olete võinud sellel saidil olla, kui ma proovisin kohandada pistikprogrammi, mis ei töötanud päris hästi välja ... 😉

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

    Kena lähenemine, kuid mul on vaja topograafilise kaardi jaoks midagi, nii et ma ei saa ristkülikupiirkondi kasutada ... Ma arvan, et pean kasutama vana stiili koordinaatidega pildikaarti, kuid küllap kaevan natuke sügavamalt ...

  11. 19

    Täname selle teabe eest, Doug. Ma olin siin varem käinud ja mõelnud, kuidas sa seda tegid. Tahtsime luua sellise kaardi, mis lisatakse meie postituste järele, ja nüüd, kui meil on vahendid, saame seda teha. Bravo!

  12. 20
  13. 21

    Tere, Doug,
    Jätsin eelmise kommentaari, kuid sain aru, et vaevalt pakkusin oma dilemmast üldse ülevaadet. Oleme kohandanud WordPress-teemat, et aidata meil oma veebis sitcomi käivitada siin:

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

    Nüüd näete, et meie ülaosas on navigeerimisriba - pilt, mille kavatseme kaardistada, nagu meil on kümneid kordi varem olnud. / palmforehad. Keegi meist ei mõista CSS-i tegelikult, kuid komistame piisavalt ja oleme siiani kõik korras olnud. Teie artikkel AINULT ÜHES ​​kümnest pakutavast on tõeline ülevaade selle kohta, kuidas CSS-is hõlpsasti pildikaarti kasutada. Kirjutasin stiililehte vastavalt teie juhistele, kuid pole aimugi, kuhu HTML paigutada. Kõik, mida ütlesite, on "Lisage oma HTML ... See on kena ja lihtne" ja siis ma surusin, sest arvasin, et "pole minu jaoks piisavalt lihtne!" Ma ei teadnud, et saan HTML-i lisada nendesse PHP-lehtedesse teemiredaktoris. Kas asetan HTML-i päisesse? Peamine indeksi mall? Funktsioonid? Eeldan, et kõigil WordPressi kasutajatel on võimalus oma teemat armatuurlaua redaktoris redigeerida, mis tundub funktsionaalsuses üsna universaalne. Kui oskaksite soovitada html-i paigutada, oleks mul hea meel kohandada oma navigeerimisriba jaoks oru-koodi.

    Täname, et jagasite oma teadmisi kogukonnaga. Mul on hea meel teile kohvi saada.

    • 22

      Tere, Phay!

      Kõik teie ajaveebi teema failid on redigeerimiseks saadaval administraatori paneeli kaudu. Kui klõpsate nupul Esitlus ja seejärel Teemiredaktor, peaksite nägema oma failide loendit paremal ja redaktorit vasakul.

      Kui soovite, et see oleks teie külgribal, on teil tõenäoliselt külgriba leht. Klõpsake selle muutmiseks ja pange HTML siis lehele, kuhu soovite.

      Üks märkus. Stiililehe redigeerimine on teie lehe suhtes võrdne, seega peate pildi üles laadima teemapiltide kataloogi, kui viitate sellele nagu ka teistele oma teema piltidele.

      Loodan, et aitab!

    • 23

      Phay,
      Sattusin sellele saidile täna ja mul oli sama dilemma kui teil. Tahtsin päisepildile lisada ka pildikaardi. Pärast mõnda aega sellega ringi mängimist sain asja õigeks. Pange div HTML päise.php faili. Panin selle vahele ja. Pole kindel, kas teie mallil on täpne kodeering, kuid mängige sellega failis header.php ringi ja saate selle aru.
      -
      Paul

  14. 24

    Täname kiire reageerimise eest!

    Ei, ma ei tahtnud, et see oleks külgribal, see on lehe ülaosas (näete minu antud lingil - roosa navigeerimisriba, mis ütleb contant, etenduse kohta jne.)

    Olen terve hommiku armatuurlaual töötanud, kahjuks pole ma kindel, millisesse faili html asetan, nagu eespool öeldud, mul on mitu, header.php, main index.php, function.php, footer.php. Ma pole kindel, kuhu HTML-kood sisestada. (esimene osa, mille te esitasite, olen ülejäänud osa juba oma stiililehte sisestanud) Mul on veebisaidil oma pilt olemas, kõik on valmis kasutamiseks, ma lihtsalt pean teadma, kuhu lisada kohandamiseks HTML-i koodiosa.

    Suur tänu teie aja ja algaja küsimuste esitamise eest.

    Phay

  15. 25

    ... Või võib-olla keegi võiks kommentaaridesse postitada, millisesse faili me HTML-i osa koodi paneme. Mõni postitusega mõni härrasmees ütles, et ta mõtles selle välja. Mul pole nii vedanud.

    Phaylen

  16. 26
  17. 27

    Mul on kuradima aeg leida viis, kuidas klõpsatav pildikaart WordPressisse kinnistada, kuna see ribab HTML-kaardisilte. Teie viis toimiks, kuid USA kaart on ilmselgelt viis keerukaks keerata. Ma olen eksinud.

    Abi.

    Tundub, et välk on minu ainus võimalus?

    • 28

      Dave,

      Kui panete pildi oma malli, saate kõik hästi. Kui lisate pildikaardi tegelikku sisusse, võite kokku puutuda filtriprobleemidega. See, kuidas olen selle ümber töötanud, on kohutav, kuid mõnikord olen kasutanud iframe'i.

      Doug

  18. 29

    Tere,

    tundub, et pildikaart ja lingid on kaks erinevat asja, need ei tööta koos nagu HTML-i pildikaart

    kui lisan pildikaardi taustapositsiooni (vasakul keskel), ei järgne linkide positsioneerimist.

    on kuidagi võimalik sellest mööda minna? ma olen väga amatöör. aitäh.

  19. 31

    Kas sarnast lähenemist kasutatakse suurema ja keerukama pildikaardi puhul, nagu ma proovin kasutada?

    Kui vaatate minu saiti, klõpsake vasakul asuvatel linkidel ja näete pilti, mida proovin pildikaardina kasutada (teksti tähestiku all).

    Põhimõtteliselt proovin pildi abil liikuda tähtede kaupa selle loendi igasse ossa.

    Ilmselt kulutasin 20 minutit GIMP-iga kaardi ehitamiseks ja seejärel eemaldas WP kaardimärgid, nii et leidsin teie saidi.

    Võib siiski kaaluda Flashi kasutamist

    Tänu.

  20. 33

    kasutan praegu malli paigutust ja toimetan oma asjadega. Ma tahan lisada pildikaardi, kuid ma pole kindel, kuhu see css-i paigutada. pilt, millest ma tahan kaarti teha, asub päise osas.

  21. 34

    tere, ehitasin oma veebisaidi joomlale ... tahan seda meetodit kasutada, et muuta oma lehe logo kodulingiks, mulle öeldi, et u ei saa seda joomlaga teha, kuid see artikkel annab mulle lootust! abi e-posti teel oleks väga teretulnud ... tänan teid

  22. 35

    Tere, Doug - Ehitan välja üsna keeruka css-põhise pildikaardi, millel on ka kaugliikumine (antud juhul kuvatakse teksti lehe mujal, kui hõljutate ühte pildi leviala). Igatahes leidsin seda uurides teie näite ... ja mõtlesin, et jagan järgmist sisendit:

    1. Juurdepääsetavuse huvides ei tohiks te teksti peitmiseks siin nähtavuse stiilis elemendina kasutada nähtavust: none (või display: none, kui seda pidasite): varjatud ei loe ekraanilugejad (need, kes järgivad spetsifikatsioone) .

    Selle asemel kasutage tugevamat pildi asendamise tehnikat. Ma soovitan kas Pharki meetodit või Gilder / Levinit - need on lihtsalt paremini dokumenteeritud nimed, mida põhitehnikate leidmiseks Google'isse sirvida. Eelistan G / L-i, kuna see töötab ka CSS-iga, kuid pildid on välja lülitatud.

    2. Kuigi ma ei näe, et see puruneb (kasutades FF3), on ka teie positsioneerimise rakendamisel loomupärased riskid. Absoluutselt positsioneeritud element paikneb lähima positsioneeritud vanema suhtes. Põhimõtteliselt soovite määratleda selgesõnaliselt positsioneerimiskonteksti, rakendades #subscriptionile 'position: suhteline'. Siis saab lapsed (positsioneeritud lingid) selle vanema sisse paigutada. See meetod aitab tagada usaldusväärsemad tulemused brauserites.

    Samuti peaksite selle positsioneerimise asemel kasutama veeriste asemel positsioneerimisdeklaratsioone "top: x" ja "left: x" (kus x on nihke väärtus, näiteks pikslites). Jällegi, ma ei näe seda tingimata nii, nagu see teil on, kuid ülemine ja vasak on mõeldud selleks, miks mitte neid kasutada? Lisaks on teil samale elemendile seatud ujukid ja veerised, mis konkreetsetes tingimustes põhjustavad IE6-s topeltmarginaali vea (kas testisite seda seal?) - kuigi see on parandatud, väldite seda probleemi täielikult, kasutades top ja vasakul sel juhul positsioneerimise veeriste asemel.

    3. Lõpuks, miks mitte kasutada nende linkide jaoks mõttetult heli korrastamata loendit mõttetu div asemel?

    Vabandust, et edasi lendasin ... Mulle lihtsalt meeldib jagada . HTH.

  23. 36
  24. 37
  25. 38

    Tänan sind väga!! Teie juhised salvestasid mulle TUNDI tööd ... Ma olen veebiarenduses uus ja kannatasin just läbi oma esimese suure projekti. Ma sain selle hakkama ... klient on tegelikult õnnelik, ekstaasis ja nii ka mina!

  26. 39

    Tere, suur aitäh selle postitamise eest! Aastaid hiljem ja see aitab endiselt ... tore! Ma näen vaeva, et minu pildikaart saaks õiges kohas linkida. Mul on bänner ja ma tahan, et bänneri paremas ülanurgas olevad suhtlusikoonid linkiksid teie kasutatud koodi abil. See töötab suurepäraselt, välja arvatud see, et ma teen midagi valesti, kuna minu lingid kuvatakse ekraani vasakus servas vasakul ülal, mitte sotsiaalmeediakoonide, vaid logo kohal. Olen kindel, et see on midagi lihtsat, kuid ma lihtsalt ei saa sellest aru. Mõtlesin, et jagan seda siin, kui teil on mingeid teadmisi. Täname veel kord selle postitamise eest!

Mis sa arvad?

Sellel saidil kasutatakse rämpsposti vähendamiseks Akismetit. Vaadake, kuidas teie andmeid töödeldakse.