Cara Membuat Peta Gambar dengan CSS

Pilihan

Saya menginginkan sesuatu yang 'culun' jadi saya memutuskan pada grafik 'saku' yang menyimpan semua metode berlangganan untuk blog saya.

Di zaman Web 1.0, kumpulan tautan seperti ini dapat dibangun dengan menyambungkan gambar Anda dengan tautan pada setiap grafik, lalu mencoba menjahit semuanya kembali menjadi satu dengan tabel. Itu juga bisa dilakukan dengan menggunakan file peta gambar tapi itu biasanya membutuhkan alat untuk membangun sistem koordinat. Memanfaatkan Cascading Style Sheets membuat ini lebih mudah… tidak ada gambar penyambungan dan tidak mencoba mencari alat untuk membangun sistem koordinat Anda!

  1. Bangun citra Anda yang ingin Anda gunakan. Anda dapat menggunakan grafik di bawah ini (klik kanan dan simpan sebagai untuk mengunduh):
    Opsi
  2. Unggah gambar Anda ke direktori yang berhubungan dengan CSS Anda. Di WordPress, ini dapat dilakukan paling mudah dengan menempatkannya di folder gambar di direktori tema Anda.
  3. Tambahkan HTML Anda. Sangat bagus dan sederhana… div dengan tiga tautan di dalamnya:
    > div id = "subscribe">> a id = "rss" href = "[link feed Anda]" title = "Berlangganan RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[link langganan email Anda]" title = "Berlangganan dengan Email" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[your mobile link]" title = "Lihat Versi Seluler" >> span class = "hide"> Seluler> / span >> / a>> / div>
    
  4. Edit Lembar Gaya Bertingkat Anda. Anda akan menambahkan 6 gaya berbeda. 1 gaya untuk div keseluruhan, 1 untuk tag sehingga tidak menampilkan dekorasi teks apa pun, 1 gaya untuk menyembunyikan teks (digunakan untuk aksesibilitas) dan 1 spesifikasi gaya untuk setiap tautan:
    #subscribe {/ * blok gambar latar belakang * / display: block; lebar: 215px; tinggi: 60px; background: url (images / options.png) tanpa pengulangan; margin-top: 0px; } #subscribe a {text-decoration: none; } .hide {visibility: hidden; } #rss {/ * Tautan RSS * / float: kiri; posisi: mutlak; lebar: 50px; tinggi: 50px; margin kiri: 20px; margin-top: 5px; } #email {/ * Tautan Email * / float: kiri; posisi: mutlak; lebar: 50px; tinggi: 50px; margin kiri: 70px; margin-top: 5px; } #mobile {/ * Tautan Seluler * / float: kiri; posisi: mutlak; lebar: 50px; tinggi: 50px; margin kiri: 130px; margin-top: 5px; }

Posisinya bagus dan sederhana… tambahkan tinggi dan lebar, lalu atur margin kiri dari sisi kiri gambar, dan margin atas dari sisi atas gambar!

Posting "Cara" ini untuk masuk ke Geeks adalah Kontes "Cara" yang paling seksi! Satu catatan, memang benar bahwa peta gambar dapat memiliki poligon yang jauh lebih kompleks, tetapi saya belum pernah melihat terlalu banyak tempat yang harus dimiliki. Saya benar-benar memperhatikan bahwa gambar RSS besar di Geeks adalah sidebar Seksi… itu tempat yang bagus untuk sebuah tautan. 😉

DIPERBARUI 10/3/2007 untuk aksesibilitas yang lebih baik dengan saran Phil!

Sponsor: Jika Anda seorang pemula dalam desain web, maka Bangun Situs Web Anda Sendiri Dengan Cara yang Benar Menggunakan HTML & CSS, Edisi ke-2 adalah hal yang harus dimiliki. Dalam panduan yang mudah diikuti ini, Anda akan belajar bagaimana membangun situs web dengan cara terbaik - dengan melakukannya sendiri!

41 Komentar

  1. 1

    Doug, itu sepertinya metode yang bagus, tapi sangat tidak bisa diakses.

    Pertimbangkan pengguna tunanetra dengan pembaca layar, pengguna dengan browser hanya teks, atau siapa pun yang mengunjungi situs tanpa mengaktifkan CSS atau Gambar (misalnya, mungkin pengguna seluler yang mencari tautan ke situs ramah seluler Anda). Tak satu pun dari mereka akan mengetahui tentang ketiga tautan tersebut karena mereka tidak memiliki teks. Jika gambar dimatikan pengguna bahkan tidak akan melihat teks alt untuk menggambarkan apa yang akan ada di sana karena itu adalah gambar latar belakang.

    Lebih baik mengiris gambar, menautkannya, memasukkannya ke dalam daftar dan mengapungkannya di samping satu sama lain. Atau bahkan gunakan teks untuk tautan dan ganti teks menggunakan teknik penggantian gambar standar. Ini tampaknya nyaman, tetapi membuat segalanya lebih sulit / tidak mungkin bagi mereka yang tidak menggunakan browser grafis standar.

    • 2
      • 3

        Doug,

        JAWS tidak membaca judul tautan secara default, tetapi Anda benar, itu bisa. Mengapa Anda mencari judul tautan jika Anda tidak tahu itu ada di sana, dan bahkan jika Anda ada, pasti ini turun ke masalah kegunaan yang berarti Anda memberi pengguna yang kurang mampu pengalaman tingkat kedua dalam menggunakan situs Anda.

        Untuk peramban teks, artikel yang Anda arahkan ke saya ke Lynx juga memungkinkan Anda untuk memunculkan daftar judul tautan, tetapi maksud saya tetap bahwa jika Anda tidak tahu ada tautan di sana, karena tidak ada teks pada awalnya , mengapa Anda mencari teks judul?

        Terakhir, atribut judul tautan tetap tidak akan muncul untuk siapa pun yang menjelajah tanpa mengaktifkan gambar atau tanpa mengaktifkan CSS.

        Jadi ya, tautan dengan judul lebih baik daripada yang tidak, tetapi dalam kasus ini hanya marginal.

        Inilah sebabnya mengapa menggunakan gambar, agar teks alt dapat dibaca, atau penggantian gambar, sehingga teksnya ada, adalah opsi yang jauh lebih aman, lebih mudah diakses, dan lebih bermanfaat.

        • 4

          Info Bagus, Phil. Saya akan mencoba meningkatkan ini dengan teks tetapi cukup menyembunyikan teks - dengan cara itu produk yang dapat diakses seperti JAWS akan membaca teks tautan dan teks akan ditampilkan jika CSS atau Gambar dinonaktifkan.

          Saya tidak setuju bahwa satu-satunya solusi yang dapat diakses adalah meletakkan Gambar dengan tautan.

  2. 5
  3. 8

    Saya mencurinya. Di sana, saya mengatakannya.

    Doug, grafiknya fantastis dan pengkodeannya sangat sederhana sehingga membuatku takut (telah bermain dengan CSS dan sekarang akhirnya aku "mengerti").

    Menyesuaikan kode untuk memenuhi kebutuhan saya, mencari tahu di mana harus meletakkan bit HTML, dan terus terang itu tampak hebat dan telah membersihkan bagian atas sidebar saya yang telah membuat saya GILA.

    Aku mungkin harus membelikanmu kopi itu!

  4. 10

    Doug,

    Saya akan menjadi suara yang tidak setuju, menggunakan pengalaman saya sebagai contoh. Saya ingat email kami ketika email rumah saya berubah dan Anda mencatat bahwa saya harus ikut serta dengan yang baru. Harus saya akui bahwa saya sempat “menemukan” fitur baru di situs Anda untuk ikut serta lagi. Sebagian karena tautan asli sedikit lebih tradisional dan saya samar-samar ingat yang itu. Yang lainnya adalah karena amplop setengah yang menyamping pada awalnya tidak terlihat seperti amplop bagi saya. Setelah sekitar 5 menit atau lebih, saya mulai mengarahkan mouse saya ke setiap gambar dan ketika judul "Berlangganan dengan Email" muncul, saya tahu saya sedang berbisnis. Otak saya juga menemukan gambar tautan itu.

    Tapi, setidaknya bagi saya, amplop samping tidak intuitif bagi saya sebagai tempat berlangganan notifikasi email. Dan (karena saya diberitahu untuk selalu mengakhiri dengan sesuatu yang menyenangkan) saya setuju dengan Phil di atas; metode ini sangat sederhana dan keseluruhan item bekerja dengan baik. Saya menganggapnya alat desain Anda membantu memberi Anda dimensi yang tepat untuk 3 bagian; apakah itu asumsi yang benar? Saya harus berasumsi demikian, karena jika saya memiliki, katakanlah, gambar selebar 400 piksel, saya perlu mengetahui pengaturan yang tepat, dll.

  5. 12
    • 13

      William,

      Sepertinya Anda mungkin mengalami konflik antara nama kelas komentar dan nama kelas pada grafik bilah sisi. Anda dapat memberi nama berbeda untuk menyelesaikan konflik. Beri tahu saya jika Anda butuh bantuan!

      Doug

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

    Pendekatan yang bagus, tapi saya butuh sesuatu untuk peta topografi, jadi saya tidak bisa menggunakan area persegi panjang… Saya rasa saya harus menggunakan peta gambar gaya lama dengan koordinat, tapi saya mungkin akan menggali lebih dalam…

  11. 19

    Terima kasih atas info ini, Doug. Saya pernah ke sini sebelumnya dan bertanya-tanya bagaimana Anda melakukannya. Kami ingin membuat peta seperti itu untuk disisipkan setelah posting kami, dan sekarang kami memiliki sarana, kami dapat melakukannya. Bravo!

  12. 20
  13. 21

    Hai Doug,
    Saya meninggalkan komentar sebelumnya tetapi menyadari bahwa saya hampir tidak memberikan wawasan apa pun tentang dilema saya sama sekali. Kami telah mengadaptasi tema wordpress untuk membantu kami meluncurkan sitkom online kami di sini:

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

    Sekarang, Anda akan melihat kami memiliki spanduk navigasi di bagian atas, gambar yang ingin kami petakan seperti yang telah kami lakukan puluhan kali sebelumnya. / palmforehad. Tak satu pun dari kita benar-benar memahami CSS, tapi kita tersandung cukup dan sejauh ini telah melakukan dengan baik sampai titik ini. Artikel Anda di HANYA SATU dari lusinan artikel yang disediakan merupakan wawasan nyata tentang cara memanfaatkan pemetaan gambar di CSS dengan mudah. Saya menggunakan stylesheet sesuai dengan petunjuk Anda, tetapi tidak tahu di mana harus menempatkan HTML. Yang Anda katakan hanyalah “Tambahkan html Anda… Ini bagus dan sederhana” lalu saya merasa ngeri karena saya pikir .. “tidak cukup sederhana untuk saya!” Saya tidak tahu saya bisa menambahkan html ke salah satu halaman php ini di editor tema. Apakah saya menempatkan html di header? Template Indeks Utama? Fungsinya? Saya berasumsi semua pengguna wordpress memiliki opsi untuk mengedit tema mereka di editor dasbor, yang tampaknya cukup universal dalam fungsinya. Jika Anda dapat menyarankan di mana menempatkan html, saya ingin menyesuaikan kode oru untuk bilah navigasi saya.

    Terima kasih telah membagikan pengetahuan Anda dengan komunitas. Saya senang membuatkan Anda kopi.

    • 22

      Hai Phay!

      Semua file untuk tema blog Anda tersedia melalui panel Admin untuk diedit. Jika Anda mengklik Presentasi lalu Theme Editor, Anda seharusnya dapat melihat daftar file Anda di sebelah kanan dan editor di sebelah kiri.

      Jika Anda ingin ini ada di sidebar Anda, Anda mungkin memiliki halaman Sidebar. Klik untuk mengeditnya dan kemudian letakkan HTML yang disediakan di dalam halaman yang Anda inginkan.

      Satu catatan: Pengeditan lembar gaya berhubungan dengan halaman Anda, jadi Anda harus mengunggah gambar ke direktori gambar tema jika Anda mereferensikannya seperti gambar lain di tema Anda.

      Harapan yang membantu!

    • 23

      Phay,
      Saya menemukan situs ini hari ini dan memiliki dilema yang sama seperti Anda. Saya juga ingin menambahkan peta gambar ke gambar header. Setelah bermain-main dengannya sebentar, saya benar. Letakkan HTML div di file header.php. Saya meletakkannya di antara dan. Tidak yakin apakah templat Anda memiliki pengkodean yang tepat, tetapi bermain-main dengannya di file header.php dan Anda akan mengetahuinya.
      -
      paul

  14. 24

    Terima kasih atas tanggapan yang cepat!

    Tidak, saya tidak ingin berada di sidebar, itu di bagian atas halaman (Anda dapat melihat di link yang saya sediakan- bilah navigasi merah muda yang bertuliskan contant, tentang pertunjukan dll ..)

    Saya telah bekerja di dashboard sepanjang pagi, sayangnya, saya tidak yakin di file mana saya meletakkan html, seperti yang disebutkan di atas, saya punya beberapa, header.php, main index.php, functions.php, footer.php. Saya tidak yakin di mana harus memasukkan kode html. (bagian pertama yang Anda berikan, saya sudah memasukkan sisanya ke dalam stylesheet saya) Saya memiliki gambar saya di sana di situs web, semuanya sudah siap, saya hanya perlu tahu di mana harus menambahkan bagian html dari kode untuk diadaptasi.

    Terima kasih banyak atas waktu Anda dan menjawab pertanyaan dari seorang pemula.

    Phay

  15. 25

    … Atau mungkin seseorang dapat memposting di komentar tentang file mana yang kita tempatkan bagian html dari kode itu. Seorang pria di beberapa posting mengatakan dia menemukan jawabannya. Saya belum seberuntung itu.

    Phaylen

  16. 26
  17. 27

    Saya mengalami kesulitan menemukan cara untuk menyematkan peta gambar yang dapat diklik di wordpress karena menghapus tag peta html. Cara Anda akan berhasil tetapi peta AS jelas merupakan cara yang rumit untuk dikacaukan dengan cara ini. Saya tersesat.

    Bantuan

    Sepertinya flash adalah satu-satunya pilihan saya?

    • 28

      Dave,

      Jika Anda meletakkan gambar di template Anda, Anda akan baik-baik saja. Jika Anda meletakkan peta gambar di konten sebenarnya, Anda dapat mengalami masalah filter. Cara saya mengatasinya sangat buruk, tetapi terkadang saya menggunakan iframe.

      Doug

  18. 29

    Hai,

    Tampaknya peta gambar dan tautan adalah dua hal yang berbeda, keduanya tidak bekerja sama seperti yang dilakukan peta gambar di html

    ketika saya menyertakan pemosisian latar belakang (kiri tengah) untuk peta gambar, pemosisian tautan tidak ditindaklanjuti.

    ada cara untuk menyiasati ini? Saya sangat amatir. Terima kasih.

  19. 31

    Akankah pendekatan serupa digunakan untuk peta gambar yang lebih besar dan lebih rumit seperti yang saya coba gunakan?

    Jika Anda melihat situs saya, klik tautan di sebelah kiri dan Anda akan melihat gambar yang saya coba gunakan sebagai peta gambar (di bawah alfabet Teks).

    Pada dasarnya, mencoba menggunakan Gambar untuk pergi ke setiap bagian dari daftar ini dengan huruf.

    Terbukti, saya menghabiskan 20 menit membangun peta dengan GIMP, dan kemudian WP menghapus tag peta, jadi begitulah cara saya menemukan situs Anda.

    Padahal, mungkin berpikir untuk menggunakan Flash

    Terima kasih.

  20. 33

    Saat ini saya menggunakan tata letak template dan mengedit dengan barang saya sendiri. Saya ingin menambahkan peta gambar, tetapi saya tidak yakin di mana harus meletakkannya di css. gambar yang ingin saya buat peta ada di bagian header.

  21. 34

    halo, saya membangun situs web saya di joomla… saya ingin menggunakan metode ini untuk membuat logo halaman saya menjadi tautan ke rumah, saya telah diberitahu bahwa Anda tidak dapat melakukan ini dengan joomla tetapi artikel ini memberi saya harapan! bantuan melalui email akan sangat dihargai…. terima kasih

  22. 35

    Hai Doug - Saya sedang membuat peta gambar berbasis css yang agak rumit yang juga memiliki rollover jarak jauh (dalam hal ini, teks ditampilkan di tempat lain pada halaman saat Anda mengarahkan kursor ke salah satu hotspot gambar). Bagaimanapun, saya menemukan contoh Anda di sini saat meneliti itu ... dan saya pikir saya akan membagikan masukan berikut:

    1. Untuk aksesibilitas, Anda tidak boleh menggunakan visibility: none (atau display: none jika Anda mempertimbangkannya) untuk menyembunyikan teks di sini, karena elemen yang diberi gaya visibility: hidden tidak akan dibaca oleh pembaca layar (yang mengikuti spesifikasi) .

    Sebagai gantinya, gunakan teknik penggantian gambar yang lebih kuat. Saya menyarankan metode Phark atau Gilder / Levin - itu hanya nama yang didokumentasikan dengan lebih baik ke google untuk menemukan teknik dasar. Saya lebih suka G / L karena ini juga berfungsi dengan CSS diaktifkan tetapi gambar dimatikan.

    2. Meskipun saya tidak melihatnya melanggar (menggunakan FF3), implementasi pemosisian Anda juga memiliki risiko yang melekat. Elemen yang diposisikan secara mutlak diposisikan relatif terhadap induk yang diposisikan paling dekat. Pada dasarnya, Anda ingin menyetel konteks pemosisian secara eksplisit dengan menerapkan 'position: relative' ke #subscription. Kemudian anak-anak (tautan yang diposisikan) dapat diposisikan di dalam induk itu. Metode ini membantu memastikan hasil yang lebih andal di seluruh browser.

    Selain itu, Anda harus menggunakan deklarasi pemosisian "top: x" dan "left: x" (di mana x adalah nilai offset, katakanlah dalam px) daripada margin untuk menangani pemosisian itu. Sekali lagi, saya tidak selalu melihatnya melanggar cara Anda memilikinya, tetapi atas dan kiri dimaksudkan untuk ini jadi mengapa tidak menggunakannya? Selain itu, ada float dan margin yang disetel pada elemen yang sama, yang dalam kondisi tertentu menyebabkan bug "margin ganda" di IE6 (apakah Anda mengujinya di sana?) - sementara ada perbaikan, Anda menghindari masalah itu sepenuhnya dengan menggunakan top dan kiri sebagai ganti margin untuk pemosisian dalam kasus ini.

    3. Terakhir, mengapa tidak menggunakan daftar tak berurutan yang terdengar semantik untuk tautan ini daripada div yang tidak berarti?

    Maaf untuk terus mengoceh… Saya hanya ingin berbagi, b / c saya tahu dari pengalaman bagaimana ada banyak cara berbeda untuk menggunakan CSS untuk mendapatkan hasil yang diinginkan, tetapi beberapa cara pasti bekerja lebih baik (lebih dapat diandalkan, lintas-browser) daripada yang lain . HTH.

  23. 36
  24. 37
  25. 38

    Terima kasih banyak!! Instruksi Anda menyelamatkan saya JAM kerja… Saya baru dalam pengembangan web, dan saya menderita melalui proyek besar pertama saya. Saya berhasil… kliennya senang, sebenarnya sangat gembira, dan saya juga!

  26. 39

    Halo, terima kasih banyak telah memposting ini! Bertahun-tahun kemudian dan itu masih membantu… bagus! Saya kesulitan untuk membuat peta gambar saya ditautkan di tempat yang tepat. Saya memiliki spanduk dan saya ingin ikon sosial di kanan atas spanduk ditautkan menggunakan kode yang Anda berikan. Ini berfungsi dengan baik, kecuali saya melakukan sesuatu yang salah karena tautan saya muncul di sisi kiri atas layar, bukan di atas ikon sosial, tetapi di atas logo. Saya yakin itu sesuatu yang sederhana, tetapi saya tidak bisa memahaminya. Saya pikir saya akan membagikannya di sini jika Anda memiliki wawasan. Sekali lagi terima kasih telah memposting ini!

Bagaimana menurut Anda?

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.