Cara Nggawe Peta Gambar nganggo CSS

opsi

Aku pengin soko 'geeky' mula aku mutusake grafis 'saku' sing ngemot kabeh cara langganan ing blogku.

Ing jaman Web 1.0, koleksi tautan kaya iki bisa digawe kanthi nyampur gambar sampeyan kanthi tautan ing saben grafis, banjur nyoba njahit kabeh kanthi tabel. Sampeyan uga bisa ditindakake kanthi nggunakake peta gambar nanging biasane mbutuhake alat kanggo mbangun sistem koordinat. Nggunakake Lembar Gaya Cascading nggawe iki luwih gampang ... ora ana gambar sing splicing lan ora nyoba golek alat kanggo mbangun sistem koordinat!

  1. Gawe gambar sing pengin digunakake. Sampeyan bisa nggunakake grafis iki ing ngisor iki (klik-tengen lan simpen kanggo didownload):
    Pilihan
  2. Upload gambar sampeyan menyang direktori sing ana gandhengane karo CSS sampeyan. Ing WordPress, iki bisa ditindakake kanthi gampang kanthi dilebokake ing folder gambar ing direktori tema sampeyan.
  3. Tambahake HTML sampeyan. Iku apik lan gampang… div sing ana telung link:
    > div id = "subscribe">> a id = "rss" href = "[link feed sampeyan]" title = "Lengganan RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[tautan langganan email sampeyan]" title = "Lengganan nganggo Email" >> span class = "hide"> Email> / span >> / a>> a id = "seluler" href = "[link seluler sampeyan]" title = "Deleng Versi Mobile" >> span class = "hide"> Mobile> / span >> / a>> / div>
    
  4. Owahi Lembar Gaya Cascading. Sampeyan bakal nambah 6 gaya sing beda. 1 gaya kanggo div umum, 1 kanggo tag dadi ora ditampilake dekorasi teks, 1 gaya kanggo ndhelikake teks (digunakake kanggo aksesibilitas) lan 1 spesifikasi gaya kanggo saben tautan:
    #subscribe {/ * blok gambar latar mburi * / tampilan: blok; jembaré: 215px; dhuwur: 60px; latar mburi: url (gambar / pilihan.png) ora mbaleni; ndhuwur-wates: 0px; } #lengganan {hiasan-teks: ora ana; } .dhelikake {visibilitas: ndhelik; } #rss {/ * Tautan RSS * / float: kiwa; jabatan: mutlak; jembaré: 50px; dhuwur: 50px; kiwa-kiwa: 20px; ndhuwur-wates: 5px; } #email {/ * Link Email * / float: kiwa; jabatan: mutlak; jembaré: 50px; dhuwur: 50px; kiwa-kiwa: 70px; ndhuwur-wates: 5px; } #mobile {/ * Mobile Link * / float: kiwa; jabatan: mutlak; jembaré: 50px; dhuwur: 50px; kiwa-kiwa: 130px; ndhuwur-wates: 5px; }

Posisi apik lan gampang… tambahake dhuwur lan jembar banjur setel wates kiwa saka sisih kiwa gambar, lan wates ndhuwur saka sisih ndhuwur gambar!

Iki kirim "Cara" kanggo mlebu menyang Geeks minangka Kontes "How To" sing paling seksi! Siji cathetan, sejatine peta gambar bisa duwe poligon sing luwih rumit, nanging aku durung nate weruh akeh banget panggonan sing kudune ana. Aku ngerti yen gambar RSS gedhe ing Geeks yaiku sidebar seksi ... iku papan sing apik kanggo link. 😉

UPDATED 10/3/2007 kanggo aksesibilitas sing luwih apik kanthi saran saka Phil!

Sponsor: Yen sampeyan wong anyar kanggo desain web, banjur Mbangun Situs Web Sampeyan Kanthi Cara sing Kanan Nggunakake HTML & CSS, Edisi 2 kudu ana. Ing pandhuan sing gampang diikuti iki, sampeyan bakal sinau babagan cara nggawe situs web kanthi cara paling gampang - kanthi nindakake dhewe!

41 Komentar

  1. 1

    Doug, kayane kalebu metode sing apik, nanging ora bisa diakses.

    Coba gunakake pangguna sing wuta kanthi pamaca layar, pangguna sing mung browser teks utawa sapa wae sing ngunjungi situs tanpa CSS utawa Gambar sing diaktifake (kaya, bisa uga pangguna seluler sing nggoleki link menyang situs sing ramah seluler). Ora ana sing bakal ngerti babagan telung tautan kasebut amarga ora duwe teks. Yen gambar ora aktif, pangguna ora bakal bisa ndeleng teks alt kanggo nggambarake apa sing bakal ana amarga gambar latar mburi.

    Luwih becik irisan gambar, sambungake, lebokake ing dhaptar lan pasang ing jejere. Utawa nggunakake teks kanggo tautan lan ngganti teks nggunakake teknik ngganti gambar standar. Katon trep, nanging nggawe perkara dadi luwih angel / mokal kanggo sing ora nggunakake browser grafis standar.

    • 2
      • 3

        Doug,

        JAWS ora maca judhul link minangka standar, nanging sampeyan bener, bisa uga. Napa sampeyan bakal golek judhul tautan yen sampeyan ora ngerti manawa ana, lan sanajan sampeyan ana, mesthine iki bakal nyebabake masalah kegunaan sing tegese sampeyan menehi pengalaman pangguna kaping pindho kanggo nggunakake situs sampeyan.

        Kanggo browser teks, artikel sing sampeyan arahake menyang Lynx uga ngidini sampeyan nggawa dhaptar judhul tautan, nanging intine sampeyan ora ngerti yen ana link ing kana, amarga ora ana teks ing wiwitan. , kenapa sampeyan golek teks judhul?

        Pungkasan, atribut judhul tautan isih ora katon kanggo sapa wae sing browsing tanpa gambar utawa tanpa CSS aktif.

        Ya, link karo judhul luwih apik tinimbang sing ora ana, nanging ing kasus iki mung wates.

        Mula nggunakake gambar, saengga alt teks bisa diwaca, utawa ngganti gambar, saengga teks kasebut ana, minangka pilihan sing luwih aman, gampang diakses lan bisa digunakake.

        • 4

          Info apik, Phil. Aku bakal nyoba nambah karo teks nanging ndhelikake teks - kanthi cara produk sing bisa diakses kaya JAWS bakal maca teks link lan teks bakal ditampilake yen CSS utawa Gambar dipateni.

          Aku ora setuju manawa mung solusi sing bisa diakses yaiku nyelehake Gambar kanthi tautan.

  2. 5
    • 6
      • 7

        Babagan sing asring ora digatekake, Phil! Kajaba iku, nggawe aplikasi sampeyan bisa diakses asring uga duwe asil mesin telusuran sing apik.

        Aku seneng banget karo keahlian lan umpan balik!

  3. 8

    Aku nyolong. Ana, aku ngomong.

    Doug, grafis sing apik banget lan kodhe pancen gampang banget, mula wedi karo aku (main karo CSS lan saiki aku "entuk").

    Nggawe kode kanggo nyukupi kabutuhanku, ngerti endi sing bakal nyelehake HTML, lan terus terang katon apik lan wis ngresiki sisih ndhuwur sidebarku sing wis nggawa aku INSANE.

    Aku mung kudu tuku kopi mau!

  4. 10

    Doug,

    Aku bakal dadi swara sing ora setuju, nggunakake pengalaman minangka conto. Aku kelingan email nalika email omahku diganti lan sampeyan nyathet aku kudu milih sing anyar. Aku kudu ngakoni yen wis rada suwe "nemokake" fitur anyar ing situs sampeyan kanggo milih maneh. Bagéyan iki amarga tautan asli rada tradisional lan aku ora sengaja ngelingi link kasebut. Sing liyane yaiku amarga amplop setengah miring ora katon kaya amplop kanggo aku. Sawise udakara 5 menit utawa luwih, aku wiwit muter mouse ing saben gambar lan nalika judhul "Lengganan nganggo Email" ditampilake, mula aku ngerti yen aku ana ing bisnis. Otakku uga ngerti apa gambar sing ana.

    Nanging, paling ora kanggo aku, amplop miring ora intuisi kanggo aku minangka papan kanggo langganan kabar email. Lan (amarga aku dikandhani supaya mesthi dipungkasi karo sing apik) aku setuju karo Phil ing ndhuwur; cara iki pancen gampang lan kabeh item bisa digunakake kanthi apik. Aku nganggep alat desain sampeyan mbantu menehi dimensi sing pas kanggo 3 bagean; apa asumsi sing bener? Aku kudu nganggep, amarga yen aku duwe, gambar gambar 400 piksel, aku kudu ngerti setelan sing bener, lsp.

  5. 12
    • 13

      William,

      Kayane sampeyan duwe konflik antarane jeneng kelas komentar lan jeneng kelas ing grafik sidebar. Sampeyan bisa menehi jeneng kanthi beda kanggo ngatasi konflik kasebut. Ayo kula ngerti yen sampeyan butuh tangan!

      Doug

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

    Pendekatan sing apik, nanging aku butuh peta topografi, mula aku ora bisa nggunakake area persegi dowo… Aku kudu nggunakake citra gaya lawas kanthi koordinat, nanging bisa uga luwih jero digali…

  11. 19

    Thanks kanggo info iki, Doug. Aku wis mrene sadurunge lan kepingin weruh kepiye carane sampeyan nindakake. Kita pengin nggawe peta sing kaya ngono kanggo dipasang sawise kiriman, lan saiki wis duwe sarana, kita bisa nindakake. Bravo!

  12. 20
  13. 21

    Hai Doug,
    Aku ninggalake komentar sadurunge, nanging aku ngerti yen aku meh ora menehi wawasan bab dilema babar pisan. Kita wis adaptasi tema wordpress kanggo mbantu ngluncurake sitkom online ing kene:

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

    Saiki, sampeyan bakal weruh manawa ana spanduk pandhu arah ing ndhuwur, gambar sing arep dipetakan kaya sing wis puluhan kali sadurunge. / palem. Ora ana siji wae sing pancen ora ngerteni CSS, nanging kita kesandhung cekap lan saiki durung bisa rampung nganti saiki. Artikel sampeyan ing ONLY ONE saka puluhan sing disedhiyakake wawasan nyata babagan cara nggunakake imajinasi ing CSS kanthi gampang. Aku nyusun styleheet miturut pandhuane sampeyan, nanging ora ngerti arep nyelehake HTML ing endi. Kabeh sing sampeyan ucapake yaiku "Nambahake html sampeyan ... Iku apik lan sederhana" banjur saya krasa amarga mikir .. "ora cukup gampang kanggo aku!" Aku ora ngerti aku bisa nambah html menyang kaca php kasebut ing editor tema. Apa aku nyelehake html ing header? Cithakan Indeks Utama? Fungsi-fungsi kasebut? Aku nganggep kabeh pangguna wordpress duwe pilihan kanggo nyunting tema ing editor dashboard, sing katon fungsional banget. Yen sampeyan bisa menehi saran kanggo nyelehake html, aku bakal adaptasi kode oru kanggo garis navagasi.

    Matur nuwun kanggo nuduhake ilmu karo komunitas. Aku seneng golek kopi.

    • 22

      Hai Phay!

      Kabeh file kanggo tema blog sampeyan kasedhiya liwat panel Admin kanggo diowahi. Yen sampeyan ngeklik Presentasi banjur Tema Editor, sampeyan kudu bisa ndeleng dhaptar file ing sisih tengen lan editor ing sisih kiwa.

      Yen sampeyan pengin dadi ing sidebar, sampeyan bisa uga duwe kaca Sidebar. Klik kanggo nyunting banjur lebokake HTML sing disedhiyakake ing kaca sing sampeyan karepake.

      Siji cathetan: Suntingan gaya iku relatif karo kaca sampeyan, mula sampeyan kudu ngunggah gambar menyang direktori gambar tema yen sampeyan ngrujuk kaya gambar liyane ing tema sampeyan.

      Pengarep sing mbantu!

    • 23

      Phay,
      Aku saiki nemoni situs iki lan duwe masalah sing padha karo sampeyan. Aku uga pengin nambah peta gambar menyang gambar header. Sawise muter-muter sawetara wektu, aku entuk bener. Lebokake div HTML ing file header.php. Aku sijine ing antarane lan. Ora yakin manawa template sampeyan duwe kode sing tepat, nanging muter ing file header.php lan sampeyan bakal ngerteni.
      -
      Paul

  14. 24

    Matur nuwun kanggo nanggepi cepet!

    Ora, aku ora pengin ana ing sidebar, ana ing sisih ndhuwur kaca (sampeyan bisa ndeleng ing tautan sing dakwenehake- bar navigasi jambon sing ujar kontan, babagan pertunjukan dll ..)

    Aku wis kerja ing dashboard kabeh esuk, sayang, aku ora yakin ing file sing dak pasang html, kaya sing kasebut ing ndhuwur, aku duwe sawetara, header.php, index.php utama, functions.php, footer.php Aku ora yakin ing endi masang kode html. (pérangan pisanan sing sampeyan nyedhiyakake, aku wis nyisipake sisane menyang lembar gaya) Aku duwe gambar ing situs web, kabeh wis siyap, aku mung kudu ngerti endi sing bakal nambah bagean html kode sing wis dicocogake.

    Matur nuwun kanthi sanget kanggo wektu lan pitakonan babagan pemula.

    Phay

  15. 25

    … Utawa bisa uga ana wong sing bisa ngirim komentar babagan file sing bakal kita wenehake bagean kode html. Wong sing sawetara postingan ujar manawa dheweke ngerti. Aku durung begja.

    Phaylen

  16. 26
  17. 27

    Aku kepengin banget golek cara kanggo masang peta gambar sing bisa diklik ing wordpress amarga ngilangi tag peta html. Cara sampeyan bakal bisa digunakake, nanging peta AS jelas bisa nggawe kompleks nganggo cara iki. Aku ilang.

    Pitulung.

    Kayane lampu kilat minangka siji-sijine pilihanku?

    • 28

      Dave,

      Yen sampeyan nyelehake gambar ing cithakan, sampeyan ora apa-apa. Yen sampeyan nyelehake peta gambar ing konten nyata, sampeyan bisa uga nemoni masalah filter. Cara nggarap iki pancen nggegirisi, nanging kala-kala nggunakake iframe.

      Doug

  18. 29

    Hi,

    kayane peta gambar lan tautane ana rong perkara, mula ora bisa digunakake bareng kaya peta gambar ing html

    nalika aku nyakup posisi latar mburi (kiwa tengah) kanggo peta gambar, posisi link ora diterusake.

    cara kanggo ngubengi iki? aku amatir banget. matur nuwun.

  19. 31

    Apa pendekatan sing padha digunakake kanggo peta gambar sing luwih gedhe lan rumit kaya sing dakkarepake?

    Yen sampeyan ndeleng situsku, klik link ing sisih kiwa lan sampeyan bakal bisa ndeleng gambar sing dak coba digunakake minangka peta gambar (ing ngisor alfabet Teks).

    Sejatine, nyoba nggunakake Gambar kanggo mbukak saben bagean ing dhaptar iki kanthi surat.

    Terbukti, aku ngenteni 20 menit kanggo nggawe peta karo GIMP, banjur WP mbusak label peta, mula aku nemokake situs sampeyan.

    Sanajan, bisa uga mikir nggunakake Flash

    Thanks.

  20. 33

    aku saiki nggunakake tata letak template lan nyunting nganggo barangku dhewe. Aku pengin nambah peta gambar, nanging aku ora yakin ing endi papane ing css. gambar sing pengin digawe peta ing bagean header.

  21. 34

    hello, aku nggawe situs web ing joomla… aku pengin nggunakake metode iki kanggo nggawe logo kaca dadi tautan menyang omah, aku wis dikandhani sampeyan ora bisa nindakake iki karo joomla nanging artikel iki menehi pangarep-arep! pitulung liwat email bakal dihargai…. matur nuwun

  22. 35

    Hai Doug - Aku nggawe peta gambar adhedhasar css sing rumit sing uga duwe rollover jarak jauh (ing kasus iki, teks ditampilake ing panggon liya ing kaca nalika sampeyan mbukak salah sawijining hotspot gambar). Kepiye wae, aku nemokake conto sampeyan ing kene nalika nggoleki ... lan aku mikir bakal nuduhake masukan ing ngisor iki:

    1. Kanggo aksesibilitas, sampeyan ora kudu nggunakake visibilitas: ora ana (utawa tampilan: ora ana yen sampeyan nganggep) kanggo ndhelikake teks ing kene, minangka elemen kanthi gaya visibilitas: didhelikake ora bakal diwaca dening pamaca layar (sing ngetutake spek) .

    Nanging, gunakake teknik panggantos gambar sing luwih kuat. Aku saranake cara Phark utawa Gilder / Levin - iku mung jeneng sing luwih apik kanggo google kanggo nemokake teknik dhasar. Aku luwih seneng G / L amarga bisa uga aktif karo CSS nanging gambar dipateni.

    2. Nalika aku ora ngerteni yen bejat (nggunakake FF3), implementasi posisi sampeyan uga duwe risiko alami. Unsur sing diposisikan pancen diposisikan relatif karo wong tuwa sing paling cedhak. Intine, sampeyan pengin kanthi eksplisit nyetel konteks posisi kanthi ngetrapake 'posisi: relatif' karo #subscription. Banjur bocah-bocah (link sing diposisikan) bisa dipanggonke ing wong tuwa kasebut. Cara iki mbantu njamin asil sing luwih dipercaya ing browser.

    Kajaba iku, sampeyan banjur kudu nggunakake pranyatan posisi "ndhuwur: x" lan "kiwa: x" (ing endi x minangka nilai offset, ujar ing px) tinimbang wates kanggo ngatasi posisi kasebut. Maneh, aku ora mesthi ndeleng manawa sampeyan ngrusak, nanging ndhuwur lan kiwa kanggo tujuan iki, kenapa ora digunakake? Ditambah maneh sampeyan duwe float lan margin sing disetel ing elemen sing padha, sing miturut kahanan tartamtu nyebabake bug "margin kaping pindho" ing IE6 (apa sampeyan nyoba iki?) - Nalika ana perbaikan, sampeyan ngindhari masalah kasebut kanthi nggunakake ndhuwur lan kiwa, ora margine kanggo posisi ing kasus iki.

    3. Pungkasane, kenapa ora nggunakake dhaptar sing ora diatur kanthi semantik kanggo tautan kasebut tinimbang div sing ora ana artine?

    Nuwun sewu amarga droning… Aku mung pengin nuduhake, b / c, aku ngerti saka macem-macem cara nggunakake CSS kanggo entuk asil sing dikarepake, nanging sawetara cara luwih bisa digunakake (luwih dipercaya, lintas-browser) tinimbang liyane . HTH

  23. 36
  24. 37
  25. 38

    Matur nuwun kanthi sanget !! Pandhuan sampeyan nylametake aku JAM kerja ... Aku anyar babagan pangembangan web, lan mung nemoni proyek gedhe sing pertama. Aku wis entuk ... klien seneng, seneng tenan, lan aku uga!

  26. 39

    Halo, matur nuwun kanthi sanget kanggo ngirim iki! Pirang-pirang taun mengko lan isih mbantu ... apik! Aku berjuang supaya peta gambarku bisa dihubungake ing papan sing bener. Aku duwe spanduk lan pengin lambang sosial ing sisih tengen ndhuwur spanduk bisa dihubungake nggunakake kode sing wis diwenehake. Iku apik banget, kajaba aku nindakake kesalahan amarga tautane katon ing sisih kiwa ndhuwur layar, ora liwat lambang sosial, nanging liwat logo. Aku yakin iku gampang, nanging aku ora bisa ngerteni. Panginten aku bakal nuduhake ing kene yen sampeyan duwe pemahaman. Matur suwun maneh kanggo ngirim iki!

Apa sampeyan mikir?

Situs iki nggunakake Akismet kanggo ngurangi spam. Sinau babagan proses data sampeyan.