Kako izraditi mapu slika pomoću CSS-a

opcije

Htio sam nešto 'geeky' pa sam se odlučio za 'džepnu' grafiku koja sadrži sve metode pretplate za moj blog.

U doba Weba 1.0, kolekcija ovakvih veza mogla bi se stvoriti spajanjem vaše slike s vezama na svakoj grafici, a zatim pokušavajući sve to sašiti natrag zajedno s tablicom. To se također može postići korištenjem karta slike ali za to je obično potreban alat za izgradnju koordinatnog sustava. Korištenje kaskadnih tabela stilova čini ovo mnoštvo lakšim ... bez spajanja slika i bez pokušaja pronalaska alata za izgradnju vašeg koordinatnog sustava!

  1. Izgradite svoju sliku koju želite koristiti. Možete koristiti ovu grafiku u nastavku (kliknite desnim gumbom miša i spremite za preuzimanje):
    Opcije
  2. Prenesite svoju sliku u direktorij koji je u odnosu na vaš CSS. U WordPressu se to najlakše može učiniti smještanjem u mapu slika u direktoriju tema.
  3. Dodajte svoj HTML. Lijepo je i jednostavno ... div s tri veze:
    > div id = "subscribe">> a id = "rss" href = "[vaš feed link]" title = "Pretplatite se sa RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[vaš link za pretplatu na e-poštu]" title = "Pretplatite se putem e-pošte" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[vaš mobilni link]" title = "Pogledajte mobilnu verziju" >> span class = "hide"> Mobile> / span >> / a>> / div>
    
  4. Uredite svoj Cascading Style Sheet. Dodati ćete 6 različitih stilova. 1 stil za cjelokupni div, 1 za oznaku, tako da ne prikazuje nikakav ukras teksta, 1 stil za skrivanje teksta (koristi se za pristupačnost) i 1 specifikacija stila za svaku od veza:
    #subscribe {/ * blok pozadinske slike * / display: block; širina: 215px; visina: 60px; pozadina: url (images / options.png) bez ponavljanja; margin-top: 0px; } # pretplatite se na {text-decoration: none; } .hide {vidljivost: skriveno; } #rss {/ * RSS Link * / float: lijevo; položaj: apsolutni; širina: 50px; visina: 50px; margina-lijevo: 20 piksela; margin-top: 5 piksela; } #email {/ * Link e-pošte * / float: lijevo; položaj: apsolutni; širina: 50px; visina: 50px; margina-lijevo: 70 piksela; margin-top: 5 piksela; } #mobile {/ * Mobile Link * / float: lijevo; položaj: apsolutni; širina: 50px; visina: 50px; margina-lijevo: 130 piksela; margin-top: 5 piksela; }

Pozicioniranje je lijepo i jednostavno ... dodajte visinu i širinu, a zatim postavite lijevu marginu s lijeve strane slike, a gornju marginu s gornje strane slike!

Ovaj "How To" post namijenjen je ulasku u Geekovi su vrhunsko seksi natjecanje "Kako treba"! Jedna napomena, istina je da karta slika može imati puno složenije poligone, ali zapravo nisam vidio previše mjesta na kojima to mora imati. Primijetio sam da je velika stara RSS slika na Geeksima seksi bočna traka ... to je dobro mjesto za vezu. 😉

AŽURIRANO 10 za bolju dostupnost uz savjete Phil!

Sponzor: Ako ste početnik u web dizajnu, onda napravite vlastitu web stranicu na pravi način koristeći HTML i CSS, drugo izdanje mora imati. U ovom jednostavnom vodiču naučit ćete kako napraviti web stranicu na najbolji mogući način - radeći to sami!

41 Komentari

  1. 1

    Doug, to se čini lijepom metodom, ali je vrlo nepristupačna.

    Razmotrite slijepog korisnika s čitačem zaslona, ​​korisnika s preglednikom samo s tekstom ili bilo koga tko posjećuje web mjesto bez omogućenih CSS-a ili Slike (na primjer, možda mobilni korisnik koji traži vezu do vaše mobilne stranice). Nitko od njih neće znati za te tri poveznice jer nemaju tekst. Ako su slike isključene, korisnik neće ni vidjeti alt tekst da opiše što bi tamo bilo, jer je to pozadinska slika.

    Bolje bi bilo izrezati slike, povezati ih, staviti na popis i lebdjeti jednu pored druge. Ili čak koristite tekst za veze i zamijenite tekst standardnom tehnikom zamjene slike. To se čini prikladnim, ali čini stvari puno težim / nemogućim za one koji ne koriste standardni grafički preglednik.

    • 2
      • 3

        Doug,

        JAWS prema zadanim postavkama ne čita naslove veza, ali u pravu ste, može. Zašto biste tražili naslove veza ako ipak niste znali da ih ima, a čak i da jeste, to sigurno pada na pitanje upotrebljivosti, što znači da manje sposobnim korisnicima dajete drugorazredno iskustvo korištenja vaše web stranice.

        Za tekstualne preglednike, članak koji mi usmjerite prema tom Lynxu također vam omogućuje da napravite popis naslova veza, ali moja poanta ostaje da ako niste znali da postoji veza, jer uopće nije bilo teksta , zašto biste tražili naslovni tekst?

        Napokon, atributi naslova veze i dalje se neće pojavljivati ​​svima koji pregledavaju bez omogućenih slika ili bez omogućenih CSS-a.

        Tako da, veze s naslovima su bolje od onih bez njih, ali u ovom slučaju to je samo rubno.

        Zbog toga je upotreba slike, tako da se zamjenski tekst može čitati, ili zamjena slike, tako da je tekst tamo, puno sigurnija, pristupačnija i korisnija opcija.

        • 4

          Dobre informacije, Phil. Pokušat ću to poboljšati tekstom, ali jednostavno sakriti tekst - tako će pristupačni proizvod poput JAWS pročitati tekst veze i tekst će se prikazati ako su CSS ili Slike onemogućeni.

          Ne slažem se da bi jedino dostupno rješenje bilo staviti sliku s vezom.

  2. 5
  3. 8

    Ukrao sam ga. Eto, rekao sam.

    Doug, grafika je fantastična, a kodiranje je nevjerojatno jednostavno da me plaši (igrao sam se s CSS-om i sad sam napokon "shvatio").

    Dotjerao sam kôd kako bi udovoljio mojim potrebama, smislio kamo ubaciti HTML bit, i iskreno, izgleda sjajno i očistio je vrh moje bočne trake koji me je ludovao.

    Samo bih ti možda još morao kupiti tu kavu!

  4. 10

    Doug,

    Bit ću protivni glas, koristeći svoje iskustvo kao primjer. Sjećam se naše e-pošte kada se moja kućna e-pošta promijenila i primijetili ste da sam se jednostavno morao odlučiti za svoju novu. Moram priznati da sam imao vremena "otkrivati" novu značajku na vašoj web lokaciji da bih se ponovno uključio. Dio je toga bio i zato što je izvorna poveznica bila malo tradicionalnija i toga sam se maglovito sjećao. Druga je bila zato što mi bočna napola omotnica u početku jednostavno nije izgledala poput omotnice. Nakon otprilike 5 ili više minuta počeo sam prelaziti mišem po svakoj slici i kad se prikazao naslov "Pretplati se e-poštom", tada sam znao da poslujem. Moj je mozak također shvatio koja je slika veze.

    Ali, barem meni, bočna omotnica jednostavno nije bila intuitivna kao mjesto za pretplatu na obavijesti e-poštom. I (jer mi je rečeno da uvijek završim s nečim lijepim) slažem se s Phil gore; metoda je stvarno jednostavna i cijeli predmet izvrsno funkcionira. Pretpostavljam da vam je vaš alat za dizajn pomogao dati tačne dimenzije za 3 odjeljka; je li to ispravna pretpostavka? Moram to pretpostaviti, jer da imam, recimo, sliku širine 400 piksela, morao bih znati ispravne postavke itd.

  5. 12
    • 13

      William,

      Čini se da biste mogli imati sukob između imena klasa komentara i naziva klasa na grafičkoj bočnoj traci. Možete ih imenovati drugačije da biste razjasnili sukob. Javite mi ako vam treba pomoć!

      Doug

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

    Dobar pristup, ali trebam nešto za topografsku kartu, tako da ne mogu koristiti područja pravokutnika ... Mislim da moram upotrijebiti slikovnu kartu starog stila s koordinatama, ali vjerojatno ću kopati malo dublje ...

  11. 19

    Hvala na ovim informacijama, Doug. Već sam bio ovdje i pitao se kako si to uspio. Željeli smo stvoriti takvu kartu koju ćemo umetnuti nakon naših postova, a sada kad imamo sredstava, možemo to i učiniti. Bravo!

  12. 20
  13. 21

    Bok Doug,
    Ostavio sam prethodni komentar, ali shvatio sam da teško dajem ikakav uvid u svoju dilemu. Prilagođavali smo wordpress temu kako bi nam pomogli da ovdje pokrenemo naš internetski sitcom:

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

    Sad ćete vidjeti da na vrhu imamo natpis za navigaciju, sliku koju smo namjeravali mapirati kao i desetke puta prije. / palmforehad. Nitko od nas zapravo ne razumije CSS, ali posrćemo okolo dovoljno i do sada smo se dobro snašli do ovog trenutka. Vaš članak u SAMO JEDNOM od desetaka koji su pruženi stvaran je uvid u to kako lako koristiti mapiranje slika u CSS-u. Obradio sam tablicu stilova prema vašim uputama, ali nemam pojma gdje smjestiti HTML. Sve što ste rekli je "Dodajte svoj html ... Lijepo je i jednostavno", a onda sam se naježio jer sam pomislio .. "Nije mi dovoljno jednostavno!" Nisam znao da mogu dodati html na bilo koju od ovih php stranica u uređivaču tema. Želim li postaviti html u zaglavlje? Predložak glavnog indeksa? Funkcije? Pretpostavljam da svi korisnici wordpress-a imaju mogućnost uređivanja svoje teme u uređivaču nadzorne ploče, što se čini prilično univerzalnim u funkcionalnosti. Ako biste mogli predložiti gdje smjestiti html, volio bih prilagoditi oru kôd za svoju navagacijsku traku.

    Zahvaljujemo što ste svoje znanje podijelili sa zajednicom. Sretna sam što sam vam donijela kavu.

    • 22

      Bok Phay!

      Sve datoteke s temom vašeg bloga dostupne su putem administratorske ploče za uređivanje. Ako kliknete Prezentacija, a zatim Uređivač tema, trebali biste moći vidjeti popis datoteka s desne strane, a uređivač s lijeve strane.

      Ako želite da ovo bude na vašoj bočnoj traci, vjerojatno imate stranicu bočne trake. Kliknite da biste ga uredili, a zatim stavite HTML na stranicu na željenu stranicu.

      Jedna napomena: Uređivanje tablice stilova odnosi se na vašu stranicu, pa ćete sliku morati prenijeti u direktorij slika tema ako je referencirate kao i ostale slike u svojoj temi.

      Nadam se da pomaže!

    • 23

      Phay,
      Danas sam naišao na ovu stranicu i imao sam istu dilemu kao i vi. Također sam želio dodati mapu slike na sliku zaglavlja. Nakon što sam se neko vrijeme poigrao s tim, dobro sam shvatio. Stavite div HTML u datoteku header.php. Stavio sam je između i. Niste sigurni ima li vaš predložak točno kodiranje, ali poigrajte se s njim u datoteci header.php i shvatit ćete.
      -
      Pavle

  14. 24

    Hvala na brzom odgovoru!

    Ne, nisam želio da to bude na bočnoj traci, nalazi se na vrhu stranice (možete vidjeti na poveznici koju sam naveo - ružičastoj navigacijskoj traci koja govori konstantno, o emisiji itd.)

    Cijelo jutro radim na nadzornoj ploči, nažalost, nisam siguran u koju datoteku stavljam html, kao što je gore rečeno, imam ih nekoliko, header.php, main index.php, functions.php, footer.php. Nisam siguran gdje umetnuti html kod. (prvi dio koji ste dali, ostatak sam već umetnuo u svoj tabelu stilova) Imam svoju sliku tamo na web stranici, sve je spremno za rad, samo moram znati gdje dodati html dio koda za prilagodbu.

    Hvala puno na vašem vremenu i postavljanju pitanja od početnika.

    Phay

  15. 25

    ... Ili bi možda netko mogao objaviti u komentarima u koju datoteku smještamo html dio koda. Gospodin koji je objavio nekoliko postova rekao je da je to shvatio. Nisam imao te sreće.

    Phaylen

  16. 26
  17. 27

    Dovraga pronalazim način za ugrađivanje mape slike na koju je moguće kliknuti u wordpress jer uklanja HTML oznake karte. Vaš bi način funkcionirao, ali karta SAD-a očito je složen način da se zeznete na ovaj način. Izgubljen sam.

    Pomozite.

    Čini se da mi je bljesak jedina opcija?

    • 28

      Dave,

      Ako sliku stavite u svoj predložak, bit ćete u redu. Ako mapu slika stavite u stvarni sadržaj, mogli biste naići na probleme s filtrom. Način na koji sam to zaobišao je užasan, ali ponekad sam koristio iframe.

      Doug

  18. 29

    Bok,

    čini se da su mapa slike i veze dvije različite stvari, one ne rade zajedno kao što to radi mapa slike u html-u

    kada uključim pozicioniranje u pozadini (sredina lijevo) za mapu slike, pozicioniranje veza se ne nastavlja.

    bilo koji način da se ovo zaobiđe? ja sam vrlo amaterski. Hvala vam.

  19. 31

    Bi li se sličan pristup koristio za veću i složeniju mapu slika kakvu pokušavam koristiti?

    Ako pregledate moju web stranicu, kliknite veze na lijevoj strani i vidjet ćete sliku koju pokušavam koristiti kao mapu slike (pod abecedom teksta).

    U osnovi, pokušavajući koristiti sliku za odlazak na svaki odjeljak ovog popisa slovom.

    Očito sam proveo 20 minuta gradeći kartu s GIMP-om, a zatim WP uklanja oznake karte, pa sam tako pronašao vašu stranicu.

    Ipak, možete razmišljati koristeći Flash

    Hvala.

  20. 33

    Trenutno koristim izgled i uređivanje predloška sa svojim stvarima. Želim dodati mapu slike, ali nisam siguran gdje je smjestiti u css. slika za koju želim napraviti kartu nalazi se u zaglavlju.

  21. 34

    pozdrav, sagradio sam svoje web mjesto na joomli ... želim ovom metodom napraviti logotip svoje stranice poveznicom do kuće, rečeno mi je da to ne mogu učiniti s joomlom, ali ovaj članak mi daje nadu! pomoć putem e-maila bila bi jako zahvalna ... hvala vam

  22. 35

    Zdravo Doug - gradim prilično složenu mapu slika temeljenu na css-u koja također ima daljinsko prevrtanje (u ovom slučaju tekst se prikazuje negdje drugdje na stranici kada zadržite jedno od žarišnih točaka slike). Bilo kako bilo, ovdje sam naišao na vaš primjer istražujući to ... i mislio sam podijeliti sljedeći podatak:

    1. Radi pristupačnosti, ne biste trebali koristiti vidljivost: none (ili display: none ako ste to smatrali) da biste ovdje sakrili tekst, kao element stiliziran s vidljivošću: čitači zaslona (oni koji slijede specifikacije) neće pročitati skriveni .

    Umjesto toga, upotrijebite robusniju tehniku ​​zamjene slike. Predlažem ili Pharkovu metodu ili Gilder / Levin - to su samo bolje dokumentirana imena koja se mogu potražiti u Googleu kako bi se pronašle osnovne tehnike. Više volim glavnu knjigu jer radi i s omogućenim CSS-om, ali slike su isključene.

    2. Iako ne vidim da se lomi (pomoću FF3), vaša implementacija pozicioniranja također ima svojstvene rizike. Apsolutno pozicionirani element pozicioniran je u odnosu na najbliži roditelj. U osnovi, željeli biste izričito postaviti kontekst pozicioniranja primjenom "position: relative" na #subscription. Tada se djeca (pozicionirane poveznice) mogu smjestiti unutar tog roditelja. Ova metoda pomaže u osiguravanju pouzdanijih rezultata u svim preglednicima.

    Također, trebali biste koristiti deklaracije pozicioniranja "top: x" i "left: x" (gdje je x vrijednost pomaka, recimo u px), a ne margine za rukovanje tim pozicioniranjem. Opet, ne vidim nužno da se lomi onako kako vi to imate, ali gornji i lijevi su namijenjeni ovome, pa zašto ih ne biste koristili? Uz to, postavljeni su floats i margine na istom elementu, koji pod određenim uvjetima uzrokuju pogrešku "double margin" u IE6 (jeste li to tamo testirali?) - iako postoji rješenje, taj problem u potpunosti izbjegavate korištenjem top i ostavljeno umjesto margina za pozicioniranje u ovom slučaju.

    3. Konačno, zašto za ove poveznice umjesto besmislenog div-a ne upotrijebiti semantički neuređeni popis?

    Žao mi je što se droniram ... Volim samo podijeliti, b / c. Iz iskustva znam kako postoji mnogo različitih načina korištenja CSS-a za postizanje željenog rezultata, ali neki načini zasigurno rade bolje (pouzdaniji, više-preglednički) od drugih . HTH.

  23. 36
  24. 37
  25. 38

    Puno ti hvala!! Vaše su mi upute uštedjele SATI rada ... Novi sam u web razvoju i upravo sam pretrpio svoj prvi veliki projekt. Uspio sam ... klijent je sretan, zapravo oduševljen, a i ja sam!

  26. 39

    Pozdrav, puno vam hvala što ste ovo objavili! Godinama kasnije i dalje pomaže ... lijepo! Mučim se da se moja mapa slika poveže na pravom mjestu. Imam natpis i želim da se ikone društvenih mreža u gornjem desnom dijelu natpisa povezuju pomoću koda koji ste naveli. Izvrsno funkcionira, osim što radim nešto pogrešno, jer se moje veze pojavljuju na krajnjoj lijevoj strani zaslona, ​​ne preko društvenih ikona, već preko logotipa. Siguran sam da je to nešto jednostavno, ali jednostavno ne mogu shvatiti. Mislio sam da bih ga ovdje podijelio u slučaju da imate neke uvide. Hvala još jednom što ste ovo objavili!

Što vi mislite?

Ova web stranica koristi Akismet za smanjenje neželjene pošte. Saznajte kako se podaci vašeg komentara obrađuju.