Menandai

Di dalam wadah

• satu atau lebih elemen< >... Elemen-elemen ini tidak memiliki konten, tetapi menentukan wilayah geometris peta gambar dan hyperlink yang terkait dengan setiap wilayah.
• konten tingkat blok. Konten ini harus menyertakan< >yang menentukan wilayah geometris peta dan tautan yang terkait dengan setiap wilayah

Jika tag

Jika wilayah tumpang tindih, elemen yang menentukan wilayah yang muncul sebelumnya di dokumen akan diutamakan.

Html: 3.2 | 4 / XHTML: 1.0 | 1.1

Sintaksis

Atribut

kelas	mendefinisikan nama kelas yang akan digunakan
dir	mendefinisikan arah karakter: ltr - dari kiri ke kanan rtl - kanan ke kiri
indo	pengenal unik
lang	mendefinisikan bahasa dokumen yang ditampilkan
nama	nama peta gambar. Digunakan sebagai nilai parameter peta pengguna dari tag
onblur	elemen tidak fokus
onclick	klik salah satu elemen
ondblclick	klik dua kali pada sebuah elemen
sedang fokus	mendapatkan fokus berdasarkan elemen
onkeydown	menekan tombol saat elemen memiliki fokus
onkeypress	menekan dan melepaskan kunci saat elemen memiliki fokus
onkeyup	lepaskan tombol yang ditekan sebelumnya saat elemen memiliki fokus
onmousedown	mengklik tombol mouse saat elemen memiliki fokus
onmousemove	pergerakan penunjuk mouse saat elemen memiliki fokus
onmouseout	pindahkan penunjuk mouse dari elemen
onmouseover	menempatkan penunjuk mouse di atas elemen
onmouseup	melepaskan tombol mouse yang ditekan sebelumnya saat elemen memiliki fokus
gaya	menentukan style sheet sebaris
judul	tooltip

Contoh

• tag penutup diperlukan ()
• atribut id diperlukan
• disarankan untuk memberikan alternatif tekstual ke kartu grafis untuk kasus-kasus tersebut ketika grafik tidak tersedia atau pengguna tidak bisa mendapatkannya
• tidak disarankan untuk menggunakan gambar peta sebagai navigasi utama, karena dukungan yang buruk di browser lama dan suara

Menandai - elemen level blok, mis. konten tag selalu dimulai di baris baru. Jeda baris juga ditambahkan setelah tag.

HTML - Pelajaran 15. Peta navigasi - peta

Banyak halaman html menggunakan apa yang disebut peta gambar untuk mengatur tautan. Dalam pendekatan ini, sebuah gambar diambil dan tautan ditambatkan ke berbagai wilayahnya. Contoh paling umum adalah peta wisata dunia, Anda mengklik bagiannya dengan negara dan Anda akan dibawa ke halaman yang didedikasikan untuk negara itu.

Peta gambar semacam itu dapat berupa sisi klien dan sisi server. Tautan peta klien disimpan dalam dokumen itu sendiri, dan dengan mengklik mouse, browser itu sendiri menentukan ke area mana koordinat titik ini merujuk dan mengikuti tautan yang diinginkan.

Dalam versi server, koordinat ini pertama kali dikirim ke server, diproses di sana oleh program khusus, dan hanya setelah itu link diikuti Jelas, peta navigasi sisi klien lebih disukai. Kami akan mempertimbangkannya.

Sebagai contoh, misalkan kita adalah toko peralatan rumah tangga dan di header website kita terdapat gambar berikut:

Mari kita buat peta navigasi darinya, mis. mengklik lemari es akan membawa Anda ke halaman yang didedikasikan untuk lemari es (dengan model, deskripsi dan harga), mengklik penyedot debu dan mesin cuci ke halaman masing-masing.

Untuk melakukan ini, kita perlu mendeskripsikan area dalam gambar ini yang akan menjadi tautan. Tag digunakan untuk mendeskripsikan area seperti itu. dengan hanya satu parameter nama, yang menentukan nama peta referensi dan kemudian digunakan untuk merujuk ke peta ini.

Kartu kami harus terhubung ke gambar kami, untuk ini di tag Anda perlu menambahkan parameter usemap, yang nilainya adalah nama peta kita setelah tanda # (hash):
Untuk mendeskripsikan area tertentu di dalam tag tag digunakan ... Tag ini memiliki parameter berikut:

• bentuk - mendefinisikan bentuk area, dapat mengambil nilai-nilai berikut:
  • rektif - area berbentuk persegi panjang,
  • lingkaran - area berbentuk lingkaran,
  • poli - luas dalam bentuk poligon,
  • default - seluruh area.
• cootds - mengatur koordinat area terpisah:
  • untuk rektif koordinat sudut kiri atas dan kanan bawah persegi panjang ditetapkan,
  • untuk lingkaran koordinat pusat lingkaran dan jari-jari ditetapkan,
  • untuk poli menentukan koordinat simpul poligon dalam urutan yang diinginkan.
• href - mendefinisikan alamat tautan.
• target - digunakan saat menggunakan bingkai dan menunjukkan bingkai tempat memuat halaman.
• alt - mengatur teks alternatif untuk area tersebut.

Kami memiliki tiga area, jadi akan ada tiga tag : yang pertama adalah area persegi panjang di sekitar penyedot debu, yang kedua adalah area persegi panjang di sekitar mesin cuci, yang ketiga adalah area di sekitar lemari es.
Sekarang kita perlu menentukan koordinat area ini. Padahal, ini adalah proses yang memakan waktu paling lama. Dalam contoh kami, kami memutuskan bahwa area akan menjadi persegi panjang dan membuat tugas lebih mudah bagi kami sendiri, tetapi bayangkan berapa banyak titik yang perlu Anda tetapkan, misalnya, untuk melingkari negara pada peta. Namun, kita perlu mengatur koordinat sudut kiri atas dan kanan bawah dari tiga persegi panjang.

Untuk keperluan ini, biasanya beberapa program digunakan, misalnya Image Ready, yang memiliki alat khusus untuk menguraikan area dan secara otomatis membangun deskripsi area ini. Memeriksa pengoperasian program ini tidak termasuk dalam kursus HTML, jadi di sini kita akan mengatur koordinat "menurut mata". Lihat lagi gambar kami:

Gambar kami memiliki lebar 738 piksel dan tinggi 192 piksel. Mari menggambar garis di sepanjang perbatasan area kita dan secara kasar menentukan koordinatnya. Kami sekarang siap untuk menambahkan parameter ini ke tag kami. .

Hasil:

Sekarang area kami telah menjadi tautan (jika Anda menggerakkan kursor mouse, itu berubah menjadi telapak tangan). Tidak ada halaman lemari es di situs ini, jadi link mengarah ke halaman yang sama, tetapi jika Anda membuat halaman yang Anda inginkan, mengklik area tersebut akan melompat.

Ini menyimpulkan pelajaran kita. Anda sudah familiar dengan semua fitur bahasa HTML. Untuk mengkonsolidasikan keterampilan Anda, baca dua pelajaran Membuat situs web - tata letak spreadsheet.

Terakhir, saya harus mengatakan bahwa ada dua elemen hebat lainnya dalam tag HTML

dan ... Sebenarnya, ini adalah tag yang sangat penting, tetapi untuk mengelolanya tanpa CSS, saya menganggapnya hanya sebagai "penyimpangan", jadi tag tersebut dijelaskan secara detail di

Baru-baru ini, banyak halaman Web menggunakan apa yang disebut peta gambar untuk mengatur tautan. Implementasi fitur ini disediakan oleh bahasa HTML dan memungkinkan Anda untuk mengikat tautan hypertext ke berbagai area gambar. Pendekatan ini lebih jelas daripada penggunaan tautan tekstual biasa, karena pengguna tidak dapat membaca deskripsi verbal tautan, tetapi segera memahami artinya dalam gambar grafik.

Bahkan pengguna pemula, yang berkeliaran di Internet, akan segera menemukan peta gambar. Dalam gambar. 6.1 menunjukkan halaman Web dari salah satu perusahaan komputer terbesar di Rusia. Menu utama di halaman ini adalah peta gambar dengan link terkait.

Peluncuran mesin pencari terkenal Yahoo! juga menghasilkan halaman yang berisi peta gambar. Bagian paling atas dari gambar yang ditampilkan berisi empat tombol dengan kata "Yahoo!" di antaranya. Kursor pada gambar menunjuk ke tombol pertama, dan bentuk kursor memperjelas bahwa yang terakhir menunjuk ke tautan, yang alamatnya terlihat di bilah status browser. Tautan yang diwujudkan oleh tombol-tombol ini dibuat dengan menggunakan teknologi peta gambar.

Namun, Anda tidak boleh berasumsi bahwa peta gambar harus digunakan di mana pun klik tautan diperlukan. Penting untuk mempertimbangkan apakah penggunaan peta gambar masuk akal dalam kasus ini atau itu, setelah mempertimbangkan semua pro dan kontranya. Bab ini berisi semua informasi yang perlu Anda ketahui tentang penggunaan peta gambar.

Dalam bab ini, Anda akan mempelajari:

• Apa itu peta gambar dan bagaimana cara kerjanya
• Cara membuat file konfigurasi peta gambar
• Cara membuat tautan dalam dokumen HTML menggunakan peta gambar

Ara. 6.1.Contoh halaman web yang dibuat menu utamanya dengan menggunakan peta gambar

• Prinsip apa yang harus diikuti saat menggunakan peta gambar
• Apa sajakah fitur dari berbagai format file konfigurasi peta gambar
• Perangkat lunak apa yang harus Anda gunakan untuk membuat peta gambar

Dasar-dasar menggunakan peta gambar

Peta gambar menyediakan antarmuka yang ramah bagi pengguna untuk menavigasi ke halaman Web lain. Untuk mengikuti tautan seperti itu, Anda hanya perlu memilih lokasi yang diinginkan pada gambar dan klik. Kehadiran antarmuka grafis yang canggih adalah salah satu keunggulan signifikan halaman Web dibandingkan sumber daya Internet lainnya. Alih-alih menu berbasis teks, seperti antarmuka klien Gopher, pengguna mendapatkan presentasi informasi grafis visual (Gambar 6.2).

Ara. 6.2. Visualisasi tautan (ke halaman tentang tujuh keajaiban dunia) menggunakan peta gambar

Peta gambar terlihat seperti gambar sebaris biasa, tetapi ketika Anda memilih area tertentu pada gambar ini dengan kursor mouse, Anda pergi ke halaman lain. Biasanya, gambar menunjukkan tempat mengklik untuk membuka halaman tertentu. Ada beberapa cara untuk menentukan batas wilayah yang menerapkan berbagai tautan. Bingkai atau pemisah lainnya sering digunakan.

Mari kita lihat konsep dasar yang terkait dengan penggunaan peta gambar.

Terminologi

Peta Citra, Peta Gambar, Peta Area, Peta yang Dapat Diklik, Peta Sensitif - semua istilah bahasa Inggris ini digunakan dalam literatur referensi untuk menunjukkan kemungkinan yang sama - menggunakan gambar yang disematkan dalam dokumen HTML yang titik "panas" (atau aktif) adalah ditentukan, atau area yang memiliki tautan ke URL yang berbeda. Kami akan mendeskripsikan fitur ini dengan frase "gambar-peta", yang berarti kombinasi dari beberapa komponen yang memastikan implementasi konsep ini. Komponen utamanya adalah: gambar itu sendiri, yang akan kita sebut referensi untuk peta-gambar ini; deskripsi konfigurasi hot spot; serta perangkat lunak terkait.

Representasi grafis dari peta gambar

Peta gambar sebenarnya adalah grafik sebaris sederhana pada halaman Web. Gambar-gambar ini dapat dalam format apa pun yang valid (GIF atau JPG). Dalam hal ini, format GIF dapat menggunakan warna transparan, serta mode antar garis. Agar gambar tersebut dapat digunakan sebagai referensi untuk peta gambar, tidak ada batasan tambahan yang diberlakukan secara resmi.

Deskripsi konfigurasi peta gambar

Konfigurasi peta gambar direkam dalam bentuk teks biasa, yang tergantung pada format yang digunakan, dapat disimpan dalam file terpisah atau menjadi bagian dari dokumen HTML. Deskripsi konfigurasi berisi koordinat untuk setiap hotspot di gambar, serta URL yang terkait dengan masing-masing hotspot tersebut. Hot spot bisa berupa persegi panjang, lingkaran, dan poligon. Kombinasi apa pun dari bentuk-bentuk ini diperbolehkan. Nilai URL tunggal juga dapat ditetapkan, yang ditentukan untuk kasus di mana pengguna mengklik di dalam gambar, tetapi di luar hotspot yang ditentukan. Aturan khusus untuk mencatat konfigurasi area bergantung pada opsi implementasi yang dipilih dan akan disajikan di bawah ini.

Opsi implementasi untuk peta gambar

Konsep peta gambar pada halaman Web dapat diimplementasikan dengan dua cara berbeda - peta gambar sisi server dan peta gambar sisi klien. Nama terakhir ini sering digunakan sebagai singkatan CSIM. Secara historis, peta gambar versi sisi server muncul dan tersebar luas, yang pertama kali diterapkan di browser Mosaic. Opsi sisi server memungkinkan versi pertama dari ketiga browser utama digunakan. Versi server dapat diimplementasikan dalam dua format berbeda, yang namanya diambil dari nama organisasi pengembangan - NCSA dan CERN.

Baru-baru ini, semakin banyak pengembangan menerima versi klien, yang pertama kali diterapkan di browser Microsoft Internet Explorer. Dimulai dengan versi 2.0, opsi ini juga mendukung browser Netscape. Opsi ini memiliki keuntungan yang tak terbantahkan dan menjadi semakin populer.

Keuntungan dan Kerugian dari Peta Gambar

Ada aspek positif dan negatif dalam menggunakan peta gambar. Sebagian besar bersifat estetika, tetapi beberapa juga memiliki aspek teknis. Untuk membuat halaman web yang baik, penting untuk memahami kelebihan dan kekurangan peta gambar.

Peta gambar paling berguna dalam situasi berikut:

• Untuk merepresentasikan hubungan spasial, seperti koordinat geografis, itu akan sulit untuk didefinisikan dengan tombol atau teks terpisah. Contohnya adalah peta Amerika Utara, di mana pemilihan setiap negara bagian mengarah ke transisi ke halaman yang sesuai.
• Sebagai menu tingkat atas yang muncul di setiap halaman. Kehadiran menu seperti itu memberikan kesempatan untuk pergi ke bagian server yang menarik dari halaman mana saja dan kapan saja. Membuat menu grafis umum akan mengurangi waktu pengembangan

Dokumen HTML karena file deskripsi link yang sama akan digunakan. Daripada menautkan ke berbagai bagian beranda pada setiap laman, cukup merujuk ke menu umum. Menu seperti itu juga akan memudahkan navigasi bagi pengguna.

Terlepas dari kenyataan bahwa peta gambar telah menjadi sangat populer, jelas bahwa peta gambar bukan merupakan bagian integral dari halaman Web dan tidak digunakan di semua halaman. Ada situasi di mana peta gambar tidak boleh digunakan.

Kerugian dari peta gambar meliputi:

• Kecuali jika menu teks alternatif disediakan, tidak ada bantuan navigasi untuk pengguna yang tidak dapat mengunduh grafik atau telah menonaktifkan pengunduhannya.
• Peta gambar memiliki kelemahan umum yang melekat dalam penggunaan gambar pada halaman Web, yaitu peningkatan waktu buka yang signifikan dibandingkan dengan dokumen teks murni.
• Gambar yang didesain dengan buruk bisa membingungkan. Terkadang sulit untuk mengidentifikasi area aktif pada gambar. Ini sangat sulit dilakukan di sisi server. Saat menerapkan opsi klien, situasinya disederhanakan, karena dimungkinkan untuk menggerakkan mouse di dalam gambar dan mengikuti alamat tautan yang muncul di bagian bawah jendela browser.
• Saat menggunakan peta gambar, browser tidak memiliki kemampuan untuk memberi kode warna pada tautan yang telah dilintasi seperti pada tautan teks.

Implementasi peta gambar di sisi server

Menggunakan peta gambar pada halaman Web agak lebih kompleks daripada sekadar menyematkan grafik yang menarik dan menautkannya. Untuk menerapkan versi sisi server dari peta gambar, dokumen HTML harus dihosting di server. Ini juga membutuhkan server untuk dikonfigurasi untuk mendukung skrip Common Gateway Interface (CGI) yang menangani permintaan dari browser saat bekerja dengan peta gambar. Untuk setiap peta gambar, file yang menjelaskan konfigurasi hotspot harus ditempatkan di server. Saat mouse diklik di dalam gambar, koordinat tempat klik dikirim oleh browser ke server, yang mengacu pada file konfigurasi, yang pada dasarnya adalah tabel pencarian wilayah aktif. Hasil pencarian dikembalikan ke browser dalam bentuk URL atau pesan bahwa tidak ada hot spot yang cocok dengan lokasi yang ditentukan pada gambar.

Untuk memastikan berfungsinya peta citra, maka perlu dilakukan indikasi bahwa citra tersebut merupakan acuan bagi peta tersebut. Ini dilakukan dengan menyetel parameter ISMAP di tag ... Selain itu, peta gambar perlu dibuat link di halaman Web, sama seperti menggunakan seluruh gambar sebagai satu link.

Sebagai pengingat, gambar sebaris dapat digunakan sebagai tautan hypertext jika disertakan dalam tag<А>... Misalnya, untuk membuat gambar bernama Myimage.gif sebagai penunjuk grafik ke tautan dokumen dalam direktori yang sama bernama exampie.html, Anda harus menulis:

<А HREF=example.html >

Kode HTML ini memberi tahu server bahwa ketika gambar Mylmage.gif diklik, Dokumen bernama example.html harus dikembalikan ke browser.

Parameter ISMAP ditambahkan ke tag untuk contoh yang diberikan, mengaktifkan peta gambar. Dalam hal ini, tautan tidak dibuat ke dokumen tertentu, tetapi ke file konfigurasi peta gambar yang berisi koordinat semua area gambar aktif. File konfigurasi, biasanya dengan ekstensi MAP, diurai oleh program CGI di server, bersama dengan koordinat titik yang diklik pada gambar. Kemudian, alih-alih baris di atas, Anda harus menulis:

<А HREF=MyImage.map>< IMG SRC=MyImage.gif ISMAP>< /A>

Tautan dalam contoh ini bukanlah alamat dokumen HTML lain, tetapi file konfigurasi peta-gambar yang berisi koordinat untuk setiap area gambar aktif bernama Myimage.gif.

Catatan

Urutan parameter tag sewenang-wenang, namun, parameter ISMAP biasanya ditempatkan terakhir.

File konfigurasi gambar peta adalah file teks biasa yang berisi informasi tentang hotspot dari gambar tertentu. Setiap gambar yang akan digunakan dalam mode peta membutuhkan file konfigurasi terpisah.

Nasihat

File konfigurasi terpisah diperlukan untuk setiap peta gambar. Buatlah aturan untuk menyimpan file konfigurasi di direktori yang sama dan dengan nama yang sama dengan gambar terkait. Contoh: main_menu.gif dan main menu.map.

Ada dua format file konfigurasi peta gambar yang dikembangkan oleh CERN dan NCSA dan dinamai oleh organisasi ini. Kedua format ini berisi informasi yang sama, tetapi merepresentasikannya secara berbeda. Dalam kedua kasus tersebut, tipe area yang sama digunakan, yang akan dibahas di bawah ini. Saat mengembangkan peta gambar untuk digunakan pada server tertentu, diperlukan informasi dari administrator sistem tentang metode mendukung peta gambar yang diterima di server ini.

Kedua format menggunakan hotspot dalam bentuk persegi panjang, lingkaran, dan poligon, dan yang disebut kawasan default dapat disetel, yang mencirikan semua titik kawasan yang tidak termasuk dalam hotspot mana pun. Jika pengguna mengklik di dalam gambar, tetapi di luar hotspot yang ditentukan, maka nilai yang ditentukan oleh tipe default akan diambil sebagai URL.

Untuk setiap area, file konfigurasi mencatat URL yang akan dikembalikan ke pengguna saat klik terjadi di area tersebut. Alamat ini dapat ditulis dalam bentuk relatif dan absolut. Perhatikan bahwa URL relatif harus relatif terhadap lokasi file konfigurasi, bukan file gambar. Daftar hot spot di file konfigurasi dibaca mulai dari baris pertama. Jika dua area tumpang tindih, maka tautan diterapkan, deskripsi cakupannya muncul pertama kali di file konfigurasi.

Nasihat

Disarankan untuk selalu menyetel tautan default di file konfigurasi. Tautan default akan diterapkan untuk area gambar yang tidak aktif. Dalam kasus yang paling sederhana, URL default dapat dengan mudah menunjuk ke halaman dengan informasi berguna tentang penggunaan kartu.

Format CERN

CERN adalah pusat penelitian Eropa dengan berbagai topik penelitian. Di sinilah konsep sistem World Wide Web dikembangkan, yang merupakan pendorong bagi semua perkembangan di bidang WWW. CERN dapat dianggap sebagai tempat kelahiran Web. Ketika muncul kebutuhan untuk mengembangkan struktur file konfigurasi peta gambar, format berikut diusulkan di CERN:

jenis url koordinat area

Pasangan koordinat X dan Y dipisahkan dengan koma dan diapit oleh tanda kurung. Format CERN tidak mengizinkan penggunaan komentar untuk mengklarifikasi link yang terkait dengan area tertentu. Tipe area berikut dapat digunakan: persegi, lingkaran, poli, dan default. Format ini memungkinkan nama jenis area dieja dengan dua cara - baik dalam bentuk singkat maupun penuh. Seiring dengan nama tipe di atas, nama persegi panjang, lingkaran, dan poligon dapat digunakan.

Berikut adalah contoh pencatatan informasi tentang area pada gambar peta dalam format CERN:

rekt (56,47) (357,265) http://www.anywhere.com/

circ (366.147) 109 http://www.anywhere.com/

poligon (534.62) (699.62) (698.236) (626.261) (534.235) (534.62)

http://www.anywhere.com/

Format NCSA

National Center for Supercomputing Applications (NCSA) dari University of Illinois juga telah memberikan kontribusi yang signifikan untuk pengembangan Web. Peramban grafis populer pertama, program Mosaic, dibuat di sini. NCSA mengusulkan format file konfigurasi yang notasinya berbeda dari format CERN. Format ini terlihat seperti ini:

koordinat url area_type

Tipe area berikut dapat digunakan: persegi, lingkaran, poli, default, dan titik.

Koordinat X dan Y dipisahkan dengan koma, tetapi tidak diapit tanda kurung. Baris komentar diperbolehkan dalam format ini. Setiap baris yang diawali dengan karakter # akan diperlakukan sebagai komentar dan isinya akan diabaikan oleh penerjemah.

Format NCSA menawarkan cara yang sedikit berbeda untuk menentukan kawasan melingkar (dibandingkan dengan format CERN dan opsi sisi klien yang dibahas di bawah). Area lingkaran ditentukan oleh koordinat dua titik - pusat dan titik mana pun yang terletak di lingkaran.

Catatan

Format NCSA menerima tipe area poin. Jenis area ini tidak berlaku dalam format CERN atau saat menggunakan peta pencitraan sisi klien. Maksud dari pencipta format adalah bahwa di hadapan sejumlah wilayah titik, dengan mengklik mouse, tautan yang lebih dekat dari yang lain diaktifkan. Namun, keberadaan tipe area ini, pada dasarnya, bertentangan dengan tipe area default, karena saat menggunakan titik dan area default pada saat yang sama, implementasi referensi yang ditentukan oleh tipe titik hanya mungkin dilakukan jika titik yang tepat dipukul dengan mouse. Ini cukup sulit dan kecil kemungkinannya untuk menciptakan lingkungan yang nyaman saat bekerja dengan dokumen semacam itu. Saat ini, tipe titik praktis tidak digunakan, dan versi klien dari peta gambar semakin berkembang.

Berikut adalah contoh penulisan file konfigurasi dalam format NCSA:

# Contoh penulisan file konfigurasi

rektifkan http://www.anywhere.com/ 56.47 357.265

lingkari http://www.anywhere.com/ 366.147 366.256

poli http://www.anywhere.com/ 534.62 699.62 698.236 626.261 534.235 534.62

Varian sisi klien dari peta gambar

Versi sisi klien dari image-map memungkinkan Anda untuk menempatkan semua informasi tentang konfigurasi peta dalam file HTML di mana gambar tersebut disematkan. Dalam kasus menggunakan versi server, browser mengirimkan permintaan ke server untuk mendapatkan alamat tautan yang dipilih dan menunggu tanggapan dengan informasi yang diperlukan. Ini mungkin membutuhkan waktu tunggu tambahan. Dengan opsi klien, jumlah permintaan ke server berkurang dan kecepatan akses ke informasi meningkat. Dalam opsi ini, tidak perlu menghubungi server untuk mengedit konfigurasi peta, sehingga semua pekerjaan membuat peta gambar dapat dilakukan secara lokal, bersamaan dengan mengedit file HTML. Berbeda dengan versi server yang memerlukan file konfigurasi terpisah untuk setiap peta gambar, dalam versi ini konfigurasi peta dapat ditempatkan langsung di dokumen HTML yang sama di mana referensi ke gambar referensi ditetapkan. Paling sering, inilah yang mereka lakukan, meskipun diperbolehkan untuk menyimpan konfigurasi peta dalam file terpisah dan memberikan tautan ke sana.

Untuk menunjukkan bahwa gambar sebaris adalah referensi untuk peta, gunakan parameter USEMAP pada tag ... Nilai parameter USEMAP adalah link ke deskripsi konfigurasi peta.

Catatan

Browser Netscape tidak mengizinkan file terpisah untuk mendeskripsikan konfigurasi kartu.

Contohnya:

Dalam contoh ini, gambar yang disimpan dalam file bernama l ogo.gif adalah referensi untuk peta gambar sisi klien.

Deskripsi konfigurasi hotspot harus berada di file yang sama dengan baris kode HTML ini, dan diberi nama logo untuk contoh ini.

Menandai<МАР>

Tag khusus digunakan untuk mendeskripsikan konfigurasi area peta-gambar<МАР>yang satu-satunya parameternya adalah NAME. Nilai untuk parameter NAME menentukan nama yang harus cocok dengan nama di USEMAP. Menandai<МАР> membutuhkan tag akhir... Di dalam pasangan tag ini, deskripsi dari area aktif peta harus ditempatkan, di mana tag khusus digunakan .

Menandai

Setiap tag menentukan satu hotspot. Tag akhir tidak diperlukan. Titik panas bisa tumpang tindih. Jika beberapa titik merujuk secara bersamaan ke beberapa area aktif, maka tautan, yang deskripsinya terletak pertama dalam daftar area, akan diimplementasikan.

Parameter tag adalah SHAPE, COORDS, HREF, NOHREF, TARGET, dan ALT. Mari pertimbangkan tujuan parameter ini.

Parameter BENTUK

Parameter SHAPE menentukan bentuk hotspot. Nilai yang valid adalah persegi, lingkaran, poli, default. Nilai-nilai ini menentukan area dalam bentuk persegi panjang, lingkaran, poligon. Nilai terakhir, default, menentukan semua titik di wilayah tersebut. Jika SHAPE dihilangkan, defaultnya adalah persegi, yang merupakan area persegi panjang.

Peringatan

Jangan bingung dengan cakupan default, yang menjelaskan semua titik dalam gambar, dan parameter BENTUK default, yaitu persegi.

Catatan

Berbeda dengan versi server, di mana area default menentukan semua titik pada gambar yang bukan milik area aktif mana pun, untuk versi klien, area default menentukan semua titik gambar secara umum. Oleh karena itu, dalam kasus ini, deskripsi area default harus menjadi yang terakhir dalam daftar hotspot. Jika, misalnya, deskripsi area default diletakkan terlebih dahulu, maka tautan yang ditentukan oleh area ini akan selalu diimplementasikan untuk versi klien, dan semua tautan lainnya akan diabaikan (begitulah cara tipe area ini diimplementasikan di Netscape ). Untuk sisi server, lokasi deskripsi cakupan default tidak relevan. Perbedaan ini diperhitungkan dalam contoh-contoh di akhir bab ini.

Nasihat

Perhatikan juga bahwa tidak semua browser mendukung jenis cakupan default. Secara khusus, Microsoft Internet Explorer tidak mengizinkan jenis kawasan ini sama sekali. Oleh karena itu, alih-alih default area tipe, kami dapat merekomendasikan pengaturan area persegi panjang dengan dimensi yang sama dengan dimensi seluruh gambar. Secara alami, area seperti itu harus dideskripsikan terakhir. Inilah yang dilakukan oleh beberapa program pengeditan gambar peta, yang akan dibahas di bawah ini.

COORDS parameter

Parameter COORDS menetapkan koordinat area aktif terpisah. Nilai parameter adalah daftar koordinat titik yang dipisahkan koma yang menentukan titik panas. Koordinat ditulis sebagai bilangan bulat non-negatif. Asal terletak di sudut kiri atas gambar, yang sesuai dengan nilai 0,0. Angka pertama menunjukkan koordinat horizontal, yang kedua - yang vertikal. Daftar koordinat tergantung pada jenis areanya.

Untuk bidang persegi panjang, koordinat sudut kiri atas dan kanan bawah persegi panjang ditentukan.

Untuk area berbentuk lingkaran, tiga angka ditentukan - koordinat pusat lingkaran dan jari-jari.

Untuk area bertipe poly, koordinat dari simpul poligon diatur dalam urutan yang diinginkan. Perhatikan bahwa titik terakhir dalam daftar koordinat tidak harus sama dengan yang pertama. Jika tidak cocok, maka saat menginterpretasikan data untuk bentuk wilayah itu, browser akan secara otomatis menghubungkan titik terakhir ke titik pertama. Editor peta gambar yang berbeda bekerja secara berbeda dalam hal ini - beberapa menambahkan titik pertama ke akhir daftar, sementara yang lain tidak. Pembatasan kuantitatif pada jumlah simpul cukup besar dan mencakup hampir semua kebutuhan yang dapat dibayangkan. Setidaknya poligon dengan 100 simpul ditangani dengan penuh keyakinan oleh semua browser utama. Ada batasan karena bahasa HTML itu sendiri, yang menurutnya daftar tidak boleh berisi lebih dari 1024 nilai. Poligon mungkin saja tidak cembung.

Cakupan default tidak memerlukan penentuan koordinat.

Parameter HREF dan NOHREF

Opsi HREF dan NOHREF sama-sama eksklusif. Jika tidak ada dari parameter ini yang ditentukan, maka wilayah tersebut dianggap tidak direferensikan. Hal yang sama secara eksplisit ditentukan oleh parameter NOHREF, yang tidak memerlukan nilai. Parameter HREF mendefinisikan alamat tautan, yang dapat ditulis dalam bentuk absolut atau relatif. Aturan pencatatan sepenuhnya sesuai dengan aturan untuk merekam tautan dalam tag<А>.

Parameter NOHREF berguna untuk mengecualikan bagian dari hotspot. Misalnya Anda ingin membuat hotspot dalam bentuk ring. Jenis wilayah ini tidak termasuk dalam daftar wilayah yang memungkinkan, tetapi dapat dilaksanakan dengan menetapkan dua wilayah melingkar. Untuk melakukan ini, pertama-tama atur area dengan radius yang lebih kecil dan tentukan NOHREF sebagai parameternya. Selanjutnya, Anda perlu mengatur area dengan radius yang lebih besar dengan pusat pada titik yang sama dan menentukan tautan yang diinginkan. Kemudian area di dalam cincin, yang ditentukan oleh dua lingkaran dengan jari-jari berbeda, akan memiliki referensi yang diperlukan. Menggunakan pendekatan berdasarkan area yang tumpang tindih akan memungkinkan Anda membangun area dengan bentuk yang sangat beragam.

Parameter TARGET

Parameter TARGET digunakan saat bekerja dengan frame. Tujuannya adalah untuk menentukan nama bingkai tempat dokumen yang dimuat oleh tautan ini akan ditempatkan. Untuk informasi lebih lanjut tentang menggunakan parameter ini, lihat bab tentang bekerja dengan bingkai.

Parameter ALT

Parameter ALT memungkinkan Anda menulis teks alternatif untuk setiap hotspot pada gambar. Dengan demikian, teks ini hanya akan berfungsi sebagai komentar bagi pembuat dokumen. Jika teks alt direkam untuk seluruh gambar (dalam tag ), berfungsi untuk menampilkannya di layar saat bekerja dengan pemuatan gambar yang dinonaktifkan, maka teks alternatif untuk area aktif tidak akan pernah muncul di layar.

Berikut adalah contoh pendefinisian area dari tipe yang berbeda:

<МАР NAME="logo">

!}

HREF \u003d "p.htm" ALT \u003d "(! LANG: Poligon"> !}

Potongan kode ini terletak di file HTML. Seringkali semua deskripsi peta gambar dari satu dokumen disatukan dan ditempatkan di awal bagian. dokumen. Pendekatan ini dekat dengan programmer, yang biasanya, ketika menulis program, memisahkan bagian deskriptif dari program dan bagian yang dapat dieksekusi, yang membuatnya lebih mudah untuk memahami kode tertulis, dan terkadang ditentukan oleh persyaratan kompilator.

Kombinasi opsi klien dan server

Dibolehkan untuk menggunakan versi gabungan, di mana parameter USEMAP dan ISMAP ditentukan untuk gambar yang sama, yang menyiratkan penggunaan gambar ini sebagai referensi untuk versi klien dan server. USEMAP dominan. Ini berarti bahwa browser yang mendukung sisi klien akan menggunakan USEMAP, mengabaikan parameter ISMAP yang ditentukan. Browser yang tidak mendukung versi klien dan tidak memahami tujuan parameter USEMAP, menurut aturan umum HTML, akan mengabaikan keberadaannya dan akan mengimplementasikan versi server saat mendeteksi keberadaan parameter ISMAP. Opsi gabungan lebih andal, tetapi membutuhkan data konfigurasi area untuk kedua opsi. Saat ini, kebutuhan untuk menggunakan opsi kombo semakin berkurang, karena semua browser utama mendukung opsi klien. Namun, beranda Netscape yang mungkin akan ditemukan oleh setiap pengguna browser Netscape adalah kombinasi dari ini semua.

Berikut contoh opsi gabungan:

<А HREF="http://www.anywhere.com/testmap/logo.map">

Catatan

Parameter USEMAP juga dominan di atas tautan yang diidentifikasi oleh tag<А>... Jadi, jika image yang digunakan untuk mengimplementasikan konsep image-map di versi klien ditulis di dalam cakupan tag<А HREF>maka tautan yang diidentifikasi oleh tag terakhir akan diabaikan oleh browser yang mendukung opsi sisi klien. Misalnya, Anda memiliki cuplikan berikut:

<А HREF=NoMaps.htm> .

Di satu sisi, seluruh gambar adalah tautan ke dokumen bernama NoMaps.htm. Di sisi lain, keberadaan parameter USEMAP mendefinisikan gambar ini sebagai referensi untuk peta gambar yang sesuai. Tautan ke dokumen NoMaps.htm akan diabaikan karena adanya parameter USEMAP dan terlepas dari faktor lainnya.

Fitur menggunakan peta gambar

Mari perhatikan beberapa keanehan dalam penggunaan peta gambar di versi klien. Saat pengguna menggerakkan mouse di dalam gambar sisi klien, URL terkait ditampilkan di bilah status di bagian bawah browser Netscape. Di versi server, URL tidak ditampilkan karena informasi ini di-host di server dan tidak tersedia sampai pengguna mengklik gambar. Opsi pertama lebih informatif, karena pengguna melihat URL tautan, dan juga dapat menentukan tempat gambar tanpa tautan. Dalam versi server, angka yang ditampilkan adalah koordinat relatif mouse pada gambar dan tidak memberikan informasi apa pun tentang tautan dan keberadaannya.

Alat bantu navigasi alternatif

Penggunaan peta gambar telah menjadi hal yang biasa, tetapi perlu diingat bahwa tidak semua pengguna Web dapat menggunakan grafik atau ingin mematikan pemuatan gambar untuk mengurangi waktu transfer file. Oleh karena itu, mereka perlu menyediakan alat navigasi alternatif lain pada halaman tersebut. Jika tidak, pengguna tidak akan dapat menemukan halaman sama sekali dan, karenanya, menerapkan link tersebut yang hanya ditentukan oleh image-map.

Atau, Anda dapat membuat bagian terpisah dengan deskripsi tekstual dari tautan dan URL yang sesuai. Anda juga dapat menautkan ke menu teks yang memiliki tautan yang sama dengan peta gambar. Pendekatan mana pun yang Anda pilih, Anda perlu memastikan bahwa semua tautan tersedia untuk mode teks browser.

Mari kita berikan contoh dokumen yang benar-benar ada yang menyelesaikan masalah ini. Salah satu halaman dari perusahaan terkenal Hewlett-Packard menunjukkan sebuah fragmen di mana terdapat gambar peta. Di tengah halaman adalah daftar sepuluh jenis peralatan, masing-masing dengan link ke dokumen yang sesuai. Bahkan ada gambar di halaman tersebut, yang merupakan gambar referensi untuk peta tersebut. Dalam gambar ini, sepuluh zona persegi panjang disorot sebagai hotspot.

Jika Anda memuat halaman ini dengan mode pemuatan gambar dinonaktifkan, Anda akan melihat gambar di mana alih-alih peta gambar hanya ada ikon kecil yang menunjukkan lokasi gambar dan. teks yang ditetapkan sebagai alternatif untuk seluruh gambar yang diberikan. Jelas, Anda tidak dapat menggunakan tautan di sini. Untuk mengatasi masalah ini, di bawah gambar terdapat menu teks biasa, yang sepenuhnya mengulangi daftar yang ditampilkan pada gambar, dengan tautan yang sesuai. Oleh karena itu, jika pemuatan gambar dinonaktifkan, pengguna masih dapat menerapkan transisi yang diperlukan ke link menggunakan menu teks duplikat. Jika gambar dimuat, menu teks hanya menggandakan opsi untuk memilih tautan.

Alat pencitraan

Pembuatan peta gambar memerlukan dua langkah: persiapan gambar referensi, di mana hotspot akan ditentukan nanti, dan pengembangan file konfigurasi yang menjelaskan parameter geometris hotspot. Mempersiapkan gambar, yang akan menjadi dasar untuk peta gambar, tidak berbeda dengan pekerjaan menyiapkan gambar biasa untuk disematkan di halaman Web. Untuk melakukan ini, Anda dapat menggunakan editor grafis apa pun atau menggunakan gambar yang sudah jadi.

Pada langkah kedua, perlu untuk menandai area aktif pada gambar dan mengaitkannya dengan alamat tautan yang sesuai. Mempersiapkan file konfigurasi adalah langkah tersulit dalam membuat peta gambar. Pada prinsipnya, metode manual untuk mengatur batas-batas area aktif pada gambar dimungkinkan. Misalnya, saat bekerja di editor grafis, Anda dapat menandai titik satu per satu, menuliskan koordinatnya, dan kemudian membuat file yang menjelaskan parameter geometris dari area yang dipilih. Namun, pendekatan ini sangat tidak nyaman dan tidak praktis.

Untuk mengotomatiskan proses menandai area pada gambar, ada sejumlah program, yang sebagian besar sangat mirip satu sama lain. Mereka memungkinkan Anda untuk membuat dan memodifikasi file konfigurasi dengan bekerja langsung dengan gambar di layar. Sebagian besar program adalah utilitas mandiri yang bekerja secara mandiri dan, pada kenyataannya, merupakan tambahan untuk editor HTML. Program ini memungkinkan Anda untuk menyimpan file konfigurasi yang dibuat ke clipboard Windows atau ke file pada disk. Dalam kasus pertama, opsi tipikal adalah kerja bersama dari program untuk mengedit gambar peta dan editor HTML atau editor teks biasa. Jika program memungkinkan Anda menyimpan file konfigurasi ke disk, maka itu dapat digunakan sepenuhnya secara mandiri. Semua program memungkinkan Anda menandai area pada gambar dari tiga jenis utama - persegi, lingkaran, dan poli. Beberapa editor mendukung tipe default. Mungkin satu-satunya kriteria untuk memilih program untuk mengedit gambar peta adalah kemudahan penggunaannya, karena semua program sangat mirip dalam properti fungsionalnya. Jika antarmuka program tampak tidak nyaman bagi Anda, Anda dapat menolak untuk menggunakannya dan memilih yang lain.

Mari pertimbangkan beberapa program yang ada.

Program MapEdit

Salah satu program pengeditan file konfigurasi yang paling sederhana dan terkenal adalah utilitas MapEdit, yang dikembangkan oleh Thomas Boutell. Program ini sudah ada selama beberapa tahun dan diterapkan di berbagai platform. Secara khusus, ada versi untuk Windows 3.x dan Windows 95/98 / NT. Seperti kebanyakan program, ada sejumlah versi utilitas ini. Saat ini, versi terbaru yang tersedia untuk Windows 95/98 / NT adalah versi 2.6 (September 1999). Informasi tentang program dapat diperoleh di:

http: //www.boutell.cora/mapedit/

MapEdit adalah perangkat lunak shareware dengan periode evaluasi 30 hari, setelah itu diperlukan pendaftaran. Program ini berukuran kecil - kit distribusi membutuhkan sekitar 300 Kb, dan pada saat yang sama memiliki hampir semua fitur yang diperlukan.

Program ini memungkinkan pengeditan file konfigurasi baik untuk versi server (dalam format NCSA dan CERN) dan untuk klien. Anda dapat membuat hotspot secara visual dalam bentuk persegi panjang, lingkaran, dan poligon, serta menentukan alamat tautan untuk area default.

Mari kita pertimbangkan secara singkat fitur utama dari program ini. Setelah memulai MapEdit, jendela utama ditampilkan, berisi layar splash (Gbr. 6.3) dan menu. Dimungkinkan untuk mengedit file yang ada untuk versi server dan klien dari peta gambar. Anda juga dapat membuat file konfigurasi baru, tetapi ini hanya berlaku untuk versi server. Versi klien membutuhkan file HTML sumber dengan link ke gambar yang disematkan yang akan digunakan sebagai referensi untuk gambar peta.

Catatan

Ketidakmampuan untuk membuat file HTML baru menggunakan MapEdit dapat dengan mudah dielakkan. Untuk melakukannya, jalankan program dalam mode pembuatan file di salah satu format sisi server (NCSA dan CERN), lakukan semua tindakan yang diperlukan, lalu simpan hasilnya dalam mode Simpan sebagai, dengan menentukan format Peta Sisi Klien. File HTML akan dibuat, yang nantinya dapat digunakan sebagai fragmen siap pakai dari dokumen HTML.

Katakanlah kita perlu membuat file konfigurasi baru untuk versi server dari peta gambar. Pilih item Buka / Buat Peta dari menu

Mengajukan. Sebuah kotak dialog akan muncul (Gbr. 6.4), di mana Anda harus menentukan nama file konfigurasi yang akan dibuat (misalnya, Blazons.map), tentukan file gambar yang ada dan format file yang akan dibuat (NCSA atau CERN). File gambar bisa dalam format GIF, JPG, atau PNG.

Ara. 6. 3 . Layar pembuka MapEdit

Ara. 6. 4 . Buka / Buat dialog Peta untuk membuat file konfigurasi

Catatan

Banyak penafsir file konfigurasi sisi server memerlukan file tersebut untuk memiliki ekstensi MAP. Kami dapat menyarankan Anda untuk selalu mematuhi aturan ini.

Program akan memuat file gambar yang dipilih, yang memungkinkan untuk menandai area aktif (Gbr. 6.5).

Untuk melakukan ini, Anda perlu memilih bentuk area aktif - persegi panjang, lingkaran, atau persegi panjang dengan mengklik ikon yang sesuai atau memilih item yang diinginkan dari menu Alat (Gbr. 6.6).

Tindakan selanjutnya dilakukan langsung pada gambar dengan menandai titik dengan mouse. Untuk area persegi panjang, sudut kiri atas dan kanan bawah ditandai, untuk area melingkar - pusat dan salah satu titik pada lingkaran, untuk poligon simpulnya diatur. Misalnya, pada Gambar. 6.5 menunjukkan kasus ketika tiga wilayah aktif dengan bentuk berbeda sudah ditandai pada gambar. Perhatikan bahwa garis yang membatasi area aktif hanya berfungsi untuk visualisasinya saat bekerja di editor dan tidak mengubah file gambar dengan cara apa pun. Gambar dalam contoh ini pada dasarnya berisi tiga gambar terpisah (lambang kota St. Petersburg, Tomsk, dan Yakutsk ditampilkan), yang biasanya tidak khas untuk gambar realistis. Namun demikian, untuk gambar yang berisi, misalnya, sekumpulan tombol kontrol, situasi ini cukup umum.

Ara. 6. 5 . Gambar dengan area aktif yang ditandai dari berbagai jenis

Ara. 6. 6 . Menu alat

Ara. 6. 7 . Dialog URL objek untuk menentukan URL dan komentar opsional

Setelah menandai salah satu area, Anda harus mengatur alamat tautan yang sesuai dengan area ini, serta memberi komentar informasi (Gbr. 6.7). Anda dapat mengatur alamat tautan untuk area secara default, yang akan diterapkan untuk bagian dari area gambar yang tidak termasuk dalam area aktif manapun (Gbr. 6.8).

Setelah menandai wilayah, Anda dapat secara visual memeriksa atau mengubah hotspot yang dibuat menggunakan item Tes dari menu Edit. Langkah terakhir dari pekerjaan ini adalah menyimpan hasil sebagai file konfigurasi (Simpan item dari menu File). Anda juga dapat menggunakan item Save As, di mana Anda dapat mengatur format penyimpanan file yang diperlukan (Gbr. 6.9).

Ara. 6. 8 . Kotak Dialog URL Default untuk Mengatur URL untuk Alam Default

Ara. 6. 9 . Simpan Sebagai Kotak Dialog Perintah

Catatan

MapEdit versi lama mengandung bug kecil yang terkait dengan pengaturan format file konfigurasi yang disimpan. Jika format CERN ditentukan saat membuat file, maka saat menyimpan data dalam mode Simpan, file akan tetap disimpan dalam format NCSA. Dimungkinkan untuk membuat file format CERN hanya dengan menggunakan mode Save as yang menentukan format yang diperlukan.

Untuk contoh ini, file bernama Blazons.map akan dibuat berisi informasi berikut (format NCSA):

# Lambang kota Tomsk

langsung www.ifmo.ru/sergeev/tomsk.htm 35.58 187.244

# Lambang kota Yakutsk

lingkari www.ifmo.ru/sergeev/jakutsk.htm 364.150 468.150

# Lambang kota St. Petersburg

poli www.ifmo.ru/sergeev/Spb.htm 537.61 700.61 700.230 618.256 537.231

Data yang sama yang disimpan oleh editor dalam format CERN akan terlihat seperti ini:

rect (35.58) (187.244) www.ifmo.ru/sergeev/tomsk.htm circle (364.150) 104 www.ifmo.ru/sergeev/jakutsk.htm poly (537.61) (700.61) (700.230) (618.256) (537.231) www.ifmo.ru/sergeev/Spb.htm

Perhatikan bahwa komentar dalam format ini tidak diperbolehkan, jadi informasi ini akan hilang saat file disimpan.

Mari kita pertimbangkan tugas membuat versi klien dari peta gambar. Untuk mengatasi masalah ini, Anda harus memiliki file HTML sumber yang berisi setidaknya satu gambar yang disematkan. File sumber ini dapat dibuat sebelumnya oleh editor teks atau editor HTML khusus. Biarkan ada file bernama CSIM.HTM yang berisi kode berikut:

File ini harus dibuka di editor MapEdit (Gbr. 6.10). Tidak seperti varian di mana file konfigurasi dibuat, tidak perlu menentukan nama file dengan gambar di item menu Buka / Buat Peta.

Ara. 6.1 0 . Buka / Buat Kotak Dialog Peta untuk Membuka File HTML yang Ada

Ara. 6.1 1 . Pilih Kotak Dialog Gambar Sebaris

Setelah membuka file HTML sumber, editor akan menampilkan kotak dialog dengan daftar semua gambar yang disematkan, dari mana Anda perlu memilih gambar yang Anda inginkan (Gbr. 6.11). Tentu saja, file dengan gambar yang dipilih harus ada.

Pekerjaan lebih lanjut untuk menandai area aktif sepenuhnya identik dengan kasus sebelumnya. Setelah menyimpan hasil markup, file asli akan dimodifikasi, dan untuk contoh yang diberikan akan terlihat seperti ini:

href \u003d "tomsk.htm"\u003e

href \u003d "jakutsk.htm"\u003e

coords \u003d "537,61,700,61, 700, 230, 618, 256, 537,231" href \u003d "Spb.htm"\u003e

Perhatikan bahwa editor secara otomatis memberikan nama untuk deskripsi peta gambar, yang sama dengan nama file gambar referensi. Untuk contoh ini, file gambar bernama Blazons.gif, jadi parameter nama tag<тар> diberi nilai "Blazons".

Catatan

Editor MapEdit tidak bekerja dengan benar dengan karakter alfabet Rusia. Beberapa huruf Rusia menghilang saat file disimpan dan spasi muncul di tempatnya. Jalan keluar termudah dari situasi ini adalah dengan menambahkan teks Rusia setelah menyelesaikan pekerjaan di editor.

PETA INI!

Utilitas lain untuk membuat dan mengedit file konfigurasi peta gambar adalah Program Map THIS !, informasi tentangnya dapat diperoleh di:

http://galadriel.ecaetc.ohio-state.edu/tc/mt/.

Bekerja dengan program ini memiliki kesamaan ideologi dengan program MapEdit. Dasar bekerja dengan program ini adalah desain visual area aktif dengan menyimpan hasil lebih lanjut dalam file dalam salah satu format yang dipilih. Editor mendukung format peta gambar sisi server (NCSA dan CERN) dan versi sisi klien. Gambar dapat dimuat dari file GIF dan JPG.

Berikut adalah contoh file konfigurasi yang dibuat oleh program ini. Untuk contoh di bagian sebelumnya, file yang disimpan dalam format NCSA akan terlihat seperti ini:

# $ MTIMFH

# $ -: File Peta Gambar dibuat oleh Map THIS!

# $ -: Petakan INI! editor peta gambar gratis oleh Todd C. Wilson

# $ -: Harap jangan mengedit baris yang dimulai dengan "# $"

# $ VERSI: 1.30

# $ TITLE: Blazons

# $ DESCRIPTION: Versi sisi server dari peta gambar

# $ TANGGAL: Sel 14 Sep 12:10:42 1999

# $ PATH: С: \\ Program Files \\ Mapthis \\

# $ GIF: Blazons.gif

# $ FORMAT: ncsa

# $ EOH

default default.htm

# Lambang kota Tomsk

rekt Tomsk.htm 33.60 191.246

# Lambang kota Yakutsk

lingkari Jakutsk.htm 366.147 366.256

# Lambang kota St. Petersburg

poli Spb.htm 534.62 699.62 698.236 626.261 534.235 534.62

Berbeda dengan program MapEdit, editor ini menulis banyak informasi komentar ke file keluaran, termasuk informasi singkat tentang program itu sendiri, tanggal file itu dibuat, dll. Pada saat yang sama, setelah simbol #, yang menunjukkan permulaan baris komentar, editor menambahkan simbol $ untuk baris komentar, yang dibuat oleh editor itu sendiri. Perhatikan baris keempat kode di atas yang berisi permintaan untuk tidak mengedit komentar yang disisipkan oleh editor.

Contoh yang sama yang disimpan dalam format CERN adalah:

rekt (4096.4096) (4096.4096) mt: # $ MTIMFH

rect (4096.4096) (4096.4096) mt: # $ -: File Peta Gambar dibuat oleh Map THIS!

rect (4096.4096) (4096.4096) mt: # $ -: Map THIS! editor peta gambar gratis

oleh Todd C. Wilson

rect (4096.4096) (4096.4096) mt: # $ -: Harap tidak mengedit baris yang dimulai

dengan "# $"

rekt (4096.4096) (4096.4096) mt: # $ VERSION: 1.30

rekt (4096.4096) (4096.4096) mt: # $ TITLE: Blazons

rect (4096.4096) (4096.4096) mt: # $ DESCRIPTION: Variasi server

peta gambar

rekt (4096.4096) (4096.4096) mt: # $

rekt (4096,4096) (4096,4096) mt: # $ TANGGAL: Sel 14 Sep 12:10:42 1999

rekt (4096.4096) (4096.4096) mt: # $ PATH: C: \\ Program Files \\ Mapthis \\

rect (4096,4096) (4096,4096) mt: # $ GIF: Blazons.gif

rekt (4096.4096) (4096.4096) mt: # $ FORMAT: cern

rekt (4096.4096) (4096.4096) mt: # $ EOH

default default.htm

rect (4096.4096) (4096.4096) mt: # Lambang kota Tomsk

persegi panjang (33,60) (191,246) Tomsk.htm

rect (4096.4096) (4096.4096) mt: # Lambang kota Yakutsk

sekitar (366.147) 109 Jakutsk.htm

rect (4096.4096) (4096.4096) mt: # Lambang kota St. Petersburg

poligon (534.62) (699.62) (698.236) (626.261) (534.235) (534.62) Spb.htm

Seperti yang Anda lihat dari kode di atas, editor menggunakan trik buatan untuk menyimpan komentar, baik yang dimasukkan pengguna maupun yang dihasilkan oleh program itu sendiri. Ingat bahwa format CERN tidak mengizinkan pengaturan baris komentar, jadi editor membuat baris seperti

rekt (4096.4096) (4096.4096),

pada akhirnya Anda dapat menempatkan teks apa pun. Intinya, garis seperti itu menggambarkan persegi panjang yang sengaja diletakkan di luar layar, jadi keberadaannya tidak jadi soal. Tentu saja, ini membuat teks dari file konfigurasi jauh lebih rumit dan tidak nyaman untuk dibaca, yang, bagaimanapun, tidak mengganggu kerja program. Teknik menyimpan komentar ini dapat diadopsi.

Contoh yang sama disimpan sebagai file HTML (untuk versi klien peta gambar) akan terlihat seperti ini:

<МАР NAME="Blazons">

ALT \u003d "(! LANG: Lambang kota Tomsk"> !}

ALT \u003d "(! LANG: Lambang kota Yakutsk"> !}

HREF \u003d "Spb.htm" ALT \u003d "(! LANG: Lambang St. Petersburg"> !}

Di sini, tidak seperti program MapEdit, nama peta gambar harus ditentukan secara manual, jadi mungkin tidak sama dengan nama file dengan gambar referensi.

Program CrossEye

Editor file konfigurasi CrossEye, dibuat oleh perusahaan Sosis Software Australia yang terkenal. Program ini akan disambut dengan gembira oleh para penggemar editor HTML populer HotDog, karena dibuat oleh perusahaan yang sama dan memiliki antarmuka yang sangat menarik dan lucu.

Informasi tentang paket CrossEye dapat diperoleh di:

http://www.sausage.com.au.

Fitur khusus dari program ini adalah ukuran kit distribusi yang agak besar (sekitar 2,5 MB), serta periode waktu yang singkat (14 hari), yang selama itu Anda dapat menggunakannya dalam mode evaluasi. Ukuran besar program adalah tipikal untuk semua perangkat lunak yang dibuat oleh Sosis Software, yang tampaknya karena pilihan alat yang digunakan untuk pengembangan (Visual Basic).

Sayangnya, program tersebut tidak memiliki sejumlah properti yang diperlukan. Misalnya, tidak mungkin membaca file HTML yang sudah ada, jadi tidak mungkin mengedit peta gambar yang sudah ada yang dibuat sebelumnya. Juga tidak mungkin untuk menyimpan hasil pekerjaan secara langsung di file HTML. Menyimpan hasil hanya mungkin dalam file dengan ekstensi khusus EYE, yang memiliki bentuk biner dan hanya dapat digunakan di editor ini di masa mendatang. Kode HTML yang dihasilkan ditulis ke papan klip Windows, dari situ kode tersebut dapat disalin ke editor teks mana pun.

Seperti di semua editor yang dijelaskan di atas, pembuatan dan pengeditan hot spot dilakukan langsung pada gambar, tetapi gambar dimuat ke dalam jendela, yang ukurannya, untuk beberapa alasan yang tidak diketahui, tidak dapat diubah. Jika gambar lebih besar dari ukuran jendela, maka Anda dapat menggunakan scrolling untuk melihat gambar, tetapi menjadi tidak mungkin untuk mengatur area aktif di luar viewport.

Untuk versi sisi klien dari peta gambar, editor tidak meminta Anda untuk menyetel URL cakupan default sama sekali. Ini mungkin dilakukan dengan sengaja karena tidak semua browser mendukung jenis cakupan default. Namun, editor yang dijelaskan di atas menyelesaikan masalah ini dengan cukup elegan, secara otomatis mengganti area default dengan area persegi panjang dengan dimensi yang sama dengan dimensi gambar.

Kerugiannya dapat dikompensasikan dengan properti editor tambahan yang terpisah. Secara khusus, Anda dapat mengetahui bahwa burung beo, yang terlihat di sudut kanan atas gambar, bernama Polly. Dia sangat cerewet, dan pengguna yang bekerja dengan komputer yang dilengkapi dengan kartu suara akan mendengar teriakan burung beo dari waktu ke waktu, yang, bagaimanapun, tidak ada hubungannya dengan tindakan yang dilakukan. Dan di salah satu kotak dialog pengaturan editor bahkan ada item khusus yang memungkinkan Anda membungkam burung beo malang itu. Berikut adalah contoh layanan terbaik. Rupanya, karena properti yang terdaftar, peringkat editor ini diperkirakan http://www.tucows.com, sangat tinggi, yang tidak bisa dikatakan tentang dua program yang dijelaskan di atas.

Pada akhirnya, pilihan editor untuk membuat peta gambar terserah pengguna.

pro

• Peta gambar memungkinkan Anda menentukan bentuk apa pun untuk area referensi, yang sangat berguna untuk menentukan area geografis. Oleh karena itu, peta gambar paling sering digunakan dalam topik geografis.
• Lebih mudah bekerja dengan satu gambar - Anda tidak perlu khawatir tentang penggabungan fragmen yang terpisah saat memotong, dan gambar dapat dengan mudah ditempatkan di tempat yang tepat.

Minus

• Bentuk kompleks dari area tautan meningkatkan jumlah kode HTML. Kontur diperkirakan dengan sekumpulan segmen garis lurus, untuk setiap titik dari segmen tersebut, dua koordinat harus ditentukan, dan jumlah total titik tersebut bisa jadi cukup besar.
• Karenanya, kompleksitas penentuan koordinat meningkat. Tidaklah mudah untuk menentukannya secara manual, jadi Anda harus menggunakan program khusus yang menampilkan area secara visual dan memungkinkan Anda untuk mengeditnya.
• Saat mengubah gambar, misalnya, saat memperbesar, Anda harus mengatur ulang koordinat semua area tautan.
• Anda tidak dapat menerapkan efek berbeda ke kartu gambar yang tersedia saat memotong satu gambar menjadi fragmen: efek bergulir, animasi parsial, pengoptimalan gambar individual untuk pemuatan cepat.
• Tidak ada batasan tautan yang ditentukan dengan baik. Oleh karena itu, batas-batas ini harus disorot dengan cara berbeda secara langsung pada gambar. Jika gambar tidak dimuat karena alasan tertentu, maka akan sangat bermasalah untuk memahami kumpulan tautan.

Dari sudut pandang kenyamanan pengguna, peta gambar hanya memiliki satu keunggulan - penyertaan tautan dalam berbagai bentuk. Ini menambah kejelasan pada penyajian informasi - kami tidak terbatas pada bentuk tautan persegi panjang dan dapat menggunakan tautan konfigurasi kompleks untuk tujuan kami sendiri.

Peta gambar hadir dalam dua rasa yang berbeda - server dan klien. Dalam kasus menggunakan versi server, browser mengirimkan permintaan ke server untuk mendapatkan alamat tautan yang dipilih dan menunggu tanggapan dengan informasi yang diperlukan. Pendekatan ini membutuhkan waktu tunggu tambahan dan file terpisah untuk setiap peta gambar.

Dalam versi klien, peta terletak di dokumen HTML yang sama dengan tautan ke gambar. Atribut peta pengguna elemen diterapkan untuk menunjukkan bahwa gambar tersebut adalah peta. ... Penunjuk ke deskripsi konfigurasi peta, yang disetel menggunakan elemen

Contoh 1. Membuat peta gambar

Di dalam wadah

Elemen memiliki atribut berikut.

• shape - mendefinisikan bentuk hotspot. Bentuknya bisa berupa lingkaran (circle), rectangle (persegi panjang), poligon (poly).
• alt - Menambahkan teks alternatif untuk setiap area. Berfungsi hanya sebagai komentar untuk tautan, karena tidak ditampilkan di layar. Diperlukan jika href ada.
• title - menampilkan tooltip saat mengarahkan kursor ke suatu area.
• href - menentukan alamat dokumen yang akan dituju, aksinya mirip dengan atribut elemen yang serupa .
• coords - menentukan koordinat area aktif. Koordinat diukur dalam piksel dari sudut kiri atas gambar, yang sesuai dengan nilai 0, 0. Angka pertama adalah koordinat horizontal, yang kedua adalah koordinat vertikal. Daftar koordinat tergantung pada bentuk wilayah.

Untuk sebuah lingkaran, tiga angka ditetapkan - koordinat dari pusat lingkaran dan jari-jari.

Halo semuanya. Bernatsky Andrey dengan Anda.

Dalam tutorial ini, saya akan menunjukkan cara membuat peta gambar HTML.

Peta Gambar - Ini semacam gambar, mungkin foto, yang memiliki beberapa zona aktif.

Misalnya, saat Anda mengklik zona aktif, kami membuka URL tertentu. Jika Anda berada di vkontakte.ru, ada contoh gambar-peta - ini adalah saat mereka menandai di foto, dan saat Anda mengarahkan mouse ke orang yang ditandai di foto, nama dan nama belakangnya ditampilkan, dan kapan Anda mengklik mouse, Anda pergi ke halaman orang ini.

Pertama, saya menawarkan versi video dari pelajaran ini:

Ini semua dilakukan dengan cukup sederhana. Kami mengambil foto apa pun dengan teman-teman. Lebih baik memasukkannya ke blok terpisahnya sendiri.