Kako napraviti mapu slika sa CSS-om

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šajem da se sve to zajedno sašije sa tablicom. To se takođe može postići upotrebom mapa slika ali za to je obično potreban alat za izgradnju koordinatnog sistema. Upotreba kaskadnih tabela stilova čini ovo tonom lakšom ... bez spajanja slika i bez pokušaja pronalaska alata za izgradnju vašeg koordinatnog sistema!

  1. Napravite svoju sliku koju želite koristiti. Možete koristiti ovu donju grafiku (kliknite desnim tasterom miša i sačuvajte za preuzimanje):
    mogućnosti
  2. Otpremite svoju sliku u direktorij koji je u odnosu na vaš CSS. U WordPressu to možete najlakše učiniti ako ga stavite u mapu slika u direktoriju tema.
  3. Dodajte svoj HTML. Lijepo je i jednostavno ... div sa tri veze:
    > div id = "pretplatite se">> 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 kaskadni stil. 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 veza * / float: lijevo; pozicija: apsolutna; širina: 50px; visina: 50px; margina-lijevo: 20px; margin-top: 5px; } #email {/ * Link e-pošte * / float: lijevo; pozicija: apsolutna; širina: 50px; visina: 50px; margina-lijevo: 70px; margin-top: 5px; } #mobile {/ * Mobile Link * / float: lijevo; pozicija: apsolutna; širina: 50px; visina: 50px; margina-lijevo: 130px; margin-top: 5px; }

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 post "Kako da" služi za ulazak u Geekovi su vrhunsko seksi takmičenje "Kako"! Jedna napomena, istina je da mapa slike može imati mnogo 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, 2. 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 lokaciju bez omogućenih CSS-a ili slika (poput, možda mobilnog korisnika koji traži vezu do vaše web lokacije prilagođene mobilnim uređajima). Niko od njih neće znati za ta tri linka jer nemaju tekst. Ako su slike isključene, korisnik neće ni vidjeti alt tekst da opiše šta bi tamo bilo, jer je to slika u pozadini.

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

    • 2
      • 3

        Doug,

        JAWS ne čita naslove veza prema zadanim postavkama, 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, ovo sigurno pada na pitanje upotrebljivosti, što znači da manje sposobnim korisnicima dajete drugorazredno iskustvo korištenja vaše stranice.

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

        Konačno, 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, ali u ovom slučaju to je samo marginalno.

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

        • 4

          Dobre informacije, Phil. Pokušat ću to poboljšati tekstom, ali jednostavno sakriti tekst - na taj će način pristupni 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 tako nevjerovatno jednostavno da me plaši (igrao sam se s CSS-om i sad sam konačno "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 vodio LUDIM.

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

  4. 10

    Doug,

    Biću protivni glas, koristeći svoje iskustvo kao primjer. Sjećam se naše e-pošte kada se moja kućna adresa e-pošte promijenila i primijetili ste da sam se jednostavno morao odlučiti za svoj novi. Moram priznati da sam neko vrijeme "otkrio" novu značajku na vašoj web lokaciji da bih se ponovo uključio. Dio toga je bio i zato što je originalna poveznica bila malo tradicionalnija i toga sam se maglovito sjećao. Druga je bila zbog toga što mi bočna napola koverta u početku jednostavno nije izgledala poput koverte. Nakon otprilike 5 ili više minuta počeo sam prelaziti mišem preko svake slike i kad se prikazao naslov „Pretplati se e-poštom“, tada sam znao da poslujem. Moj mozak je također shvatio koja je slika veze.

    Ali, barem meni, bočna koverta jednostavno nije bila intuitivna kao mjesto za pretplatu na obavještenja putem e-pošte. I (jer mi je rečeno da uvijek završim s nečim lijepim) slažem se s Phil-om gore; metoda je zaista jednostavna i cijeli predmet izvrsno funkcionira. Pretpostavljam da je vaš alat za dizajn pomogao da vam daju tačne dimenzije za 3 dijela; je li to tačna 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 imena klasa na grafici bočne trake. 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 koristiti imagemapu starog stila s koordinatama, ali vjerojatno ću malo dublje kopati ...

  11. 19

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

  12. 20
  13. 21

    Zdravo Doug,
    Ostavio sam prethodni komentar, ali shvatio sam da jedva dajem ikakav uvid u svoju dilemu. Prilagođavamo wordpress temu kako bi nam pomogli da ovdje pokrenemo naš mrežni 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 ranije. / palmforehad. Niko od nas zaista ne razumije CSS, ali posrćemo okolo dovoljno i do sada smo dobro prošli do ovog trenutka. Vaš članak u SAMO JEDNOM od desetaka koji su pruženi pravi je uvid u to kako lako koristiti mapiranje slika u CSS-u. Obradio sam tabelu 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 .. "nedovoljno jednostavno za mene!" Nisam znao da mogu dodati html na bilo koju od ovih php stranica u uređivaču tema. Da li da postavim 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 izgleda prilično univerzalno u funkcionalnosti. Ako biste mogli predložiti gdje smjestiti html, volio bih prilagoditi oru kôd svojoj traci za navigaciju.

    Hvala što ste svoje znanje podijelili sa zajednicom. Drago mi je da vam donesem kafu.

    • 22

      Zdravo Phay!

      Sve datoteke za temu vašeg bloga dostupne su putem Administratorskog panela za uređivanje. Ako kliknete na Presentation, a zatim na Editor tema, trebali biste moći vidjeti listu datoteka s desne strane, a editor s lijeve strane.

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

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

      Nadam se da to 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 ga 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 linku koji sam pružio - ružičastoj navigacijskoj traci koja govori konstantno, o emisiji itd.)

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

    Puno vam hvala 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

    Imam pakao pronalazeći način za ugrađivanje mape slike na koju se može kliknuti u wordpress jer uklanja HTML oznake mape. Vaš način bi funkcionirao, ali mapa SAD-a očito je složen način da se zeznete na ovaj način. Izgubljen sam.

    Pomoć.

    Čini se da je blic moja jedina opcija?

    • 28

      Dave,

      Ako sliku stavite u svoj predložak, bit ćete dobro. 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

    Hi,

    č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? jako sam amater. hvala ti.

  19. 31

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

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

    U osnovi, pokušavam koristiti sliku da bih prešao na svaki odjeljak ove liste slovom.

    Očito sam proveo 20 minuta gradeći kartu pomoću GIMP-a, a zatim WP uklanja oznake mape, pa sam tako pronašao vašu web lokaciju.

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

    Hvala.

  20. 33

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

  21. 34

    zdravo, sagradio sam svoju web stranicu 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 bi bila jako zahvalna ... hvala vam

  22. 35

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

    1. Radi pristupačnosti ne biste trebali koristiti vidljivost: ništa (ili prikaz: nema ako ste to smatrali) da biste ovdje sakrili tekst, kao element stiliziran vidljivošću: skriveni neće čitati ekrani (oni koji slijede specifikacije) .

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

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

    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, što pod određenim uvjetima uzrokuje grešku „dvostruke margine“ 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 ne bi koristili semantički neuređenu listu umjesto besmislenog div-a?

    Ž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 sigurno rade bolje (pouzdaniji, više pregledači) od drugih . HTH.

  23. 36
  24. 37
  25. 38

    Hvala ti puno!! Vaše su mi upute uštedjele SATI rada ... Nova sam u razvoju web stranica i upravo sam patila kroz 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 pravo mjesto. Imam natpis i želim da se ikone društvenih mreža u gornjem desnom dijelu natpisa povezuju pomoću koda koji ste naveli. Odlično funkcionira, osim što radim nešto pogrešno, jer se moji linkovi pojavljuju na krajnjoj lijevoj strani ekrana, ne preko društvenih ikona, već preko logotipa. Siguran sam da je to nešto jednostavno, ali jednostavno ne mogu to shvatiti. Mislio sam da bih je podijelio ovdje u slučaju da imate neke uvide. Hvala još jednom što ste ovo objavili!

Šta ti misliš?

Ova stranica koristi Akismet kako bi smanjila neželjenu poštu. Saznajte kako se podaci vašeg komentara obrađuju.