Baru-baru ini, banyak halaman Web menggunakan peta imej yang dipanggil untuk mengatur pautan. Pelaksanaan ciri ini disediakan oleh bahasa HTML dan membolehkan anda mengikat pautan hiperteks ke pelbagai kawasan imej. Pendekatan ini lebih visual daripada menggunakan pautan teks biasa, kerana pengguna tidak perlu membaca penerangan lisan pautan, tetapi segera memahami maksudnya daripada imej grafik.

Malah pengguna baru, setelah mengembara melalui Internet, tidak lama lagi akan menemui peta imej. Dalam Rajah. Rajah 6.1 menunjukkan halaman Web salah satu syarikat komputer terbesar di Rusia. Menu utama pada halaman ini ialah peta imej dengan pautan yang sepadan.

Pelancaran enjin carian terkenal Yahoo! juga menghasilkan halaman yang mengandungi peta imej. Bahagian paling atas imej yang ditunjukkan dalam rajah mengandungi empat butang dengan perkataan "Yahoo!" tertulis di antaranya. Kursor dalam rajah menghala ke yang pertama daripada butang ini, dan bentuk kursor menjelaskan bahawa yang terakhir menghala ke pautan, yang alamatnya boleh dilihat dalam bar status penyemak imbas. Pautan yang dilaksanakan oleh butang ini dibuat menggunakan teknologi peta imej.

Walau bagaimanapun, seseorang tidak seharusnya menganggap bahawa peta imej harus digunakan di mana-mana tempat yang memerlukan navigasi pautan. Anda perlu mempertimbangkan sama ada masuk akal untuk menggunakan peta imej dalam kes tertentu, menimbang kebaikan dan keburukan. Bab ini mengandungi semua maklumat yang anda perlu ketahui tentang menggunakan peta imej.

Dalam bab ini anda akan belajar:

• Apakah peta imej dan bagaimana ia berfungsi?
• Bagaimana untuk mencipta fail konfigurasi peta imej
• Cara Membuat Pautan dalam Dokumen HTML Menggunakan Peta Imej

nasi. 6.1. Contoh halaman Web di mana menu utama dibuat menggunakan peta imej

• Apakah prinsip yang perlu dipatuhi semasa menggunakan peta imej?
• Apakah ciri format fail konfigurasi peta imej yang berbeza?
• Apakah perisian yang perlu anda gunakan untuk membuat peta imej?

Asas Peta Imej

Peta imej memberikan pengguna antara muka yang mesra untuk menavigasi ke halaman Web lain. Untuk mengikuti pautan sedemikian, anda hanya memilih lokasi yang dikehendaki dalam imej dan klik. Kehadiran antara muka grafik yang dibangunkan sedemikian adalah salah satu kelebihan ketara halaman Web berbanding sumber Internet yang lain. Daripada menu teks yang serupa dengan antara muka klien Gopher, pengguna menerima representasi maklumat grafik yang jelas (Rajah 6.2).

nasi. 6.2. Perwakilan visual pautan (ke halaman yang menceritakan tentang tujuh keajaiban dunia) menggunakan peta imej

Peta imej kelihatan seperti imej terbenam biasa, tetapi apabila anda memilih kawasan tertentu pada imej ini dengan kursor tetikus, ia menavigasi ke halaman lain. Biasanya imej menunjukkan tempat untuk mengklik untuk pergi ke halaman tertentu. Terdapat beberapa cara untuk menentukan sempadan kawasan yang melaksanakan pelbagai pautan. Selalunya bingkai atau beberapa pembatas lain digunakan.

Mari kita lihat konsep asas yang berkaitan dengan menggunakan peta imej.

Terminologi

Peta Imej, Peta Imej, Peta Kawasan, Peta Boleh Klik, Peta Sensitif - semua istilah Inggeris ini digunakan dalam kesusasteraan rujukan untuk menunjukkan kemungkinan yang sama - penggunaan imej yang dibenamkan dalam dokumen HTML yang mana titik "panas" (atau aktif) ditakrifkan atau kawasan yang memaut ke URL yang berbeza. Kami akan menerangkan kemungkinan ini dengan frasa "peta imej", yang bermaksud gabungan beberapa komponen yang memastikan pelaksanaan konsep ini. Komponen utama ialah: imej itu sendiri, yang akan kami panggil imej rujukan untuk peta imej ini; perihalan konfigurasi kawasan aktif; serta perisian yang berkaitan.

Perwakilan grafik peta imej

Peta imej pada asasnya ialah grafik terbenam pada halaman Web. Imej ini boleh dalam sebarang format yang sah (GIF atau JPG). Dalam kes ini, format GIF boleh menggunakan warna lutsinar, serta mod baris berselang-seli. Untuk membolehkan imej digunakan sebagai rujukan untuk peta imej, tiada sekatan tambahan dikenakan secara rasmi.

Perihalan konfigurasi kad imej

Konfigurasi peta imej ditulis dalam teks biasa, yang, bergantung pada format yang digunakan, boleh disimpan dalam fail berasingan atau menjadi sebahagian daripada dokumen HTML. Perihalan konfigurasi mengandungi koordinat untuk setiap kawasan aktif imej, serta URL yang dikaitkan dengan setiap kawasan ini. Titik panas boleh dibentuk seperti segi empat tepat, bulatan atau poligon. Mana-mana gabungan angka ini dibenarkan. Nilai URL tunggal juga boleh ditentukan apabila pengguna mengklik dalam imej tetapi di luar mana-mana tempat liputan yang ditentukan. Peraturan khusus untuk merekod konfigurasi skop bergantung pada pilihan pelaksanaan yang dipilih dan akan dibentangkan di bawah.

Pilihan untuk melaksanakan peta imej

Konsep peta imej pada halaman Web boleh dilaksanakan dalam dua versi berbeza - peta imej sebelah pelayan dan peta imej sebelah klien. Nama terakhir sering digunakan sebagai singkatan CSIM. Dari segi sejarah, versi pelayan peta imej adalah yang pertama muncul dan tersebar luas, yang pertama kali dilaksanakan dalam penyemak imbas Mozek. Versi pelayan membenarkan penggunaan versi pertama ketiga-tiga pelayar terkemuka. Versi pelayan boleh dilaksanakan dalam dua format berbeza, yang dinamakan sempena nama organisasi pembangun - NCSA dan CERN.

Baru-baru ini, versi klien, yang pertama kali dilaksanakan dalam pelayar Microsoft Internet Explorer, telah semakin dibangunkan. Mulai versi 2.0, pilihan ini turut menyokong pelayar Netscape. Pilihan ini mempunyai kelebihan yang tidak dapat dinafikan dan semakin popular.

Kelebihan dan Kelemahan Peta Imej

Terdapat kedua-dua aspek positif dan negatif untuk menggunakan peta imej. Kebanyakannya bersifat estetik, tetapi ada juga yang mempunyai aspek teknikal. Untuk mencipta halaman Web yang baik, adalah penting untuk memahami kelebihan dan kekurangan peta imej.

Peta imej paling mudah digunakan dalam situasi berikut:

• Untuk mewakili perhubungan spatial, seperti koordinat geografi, yang sukar ditakrifkan dengan butang atau teks yang berasingan. Contohnya ialah peta Amerika Utara, di mana memilih setiap negeri membawa anda ke halaman yang sepadan.
• Sebagai menu peringkat atas yang muncul pada setiap halaman. Kehadiran menu sedemikian memungkinkan untuk pergi ke bahagian pelayan yang diminati dari mana-mana halaman dan pada bila-bila masa. Mencipta menu grafik biasa akan mengurangkan masa pembangunan

Dokumen HTML, kerana fail penerangan pautan yang sama akan digunakan. Daripada membuat pautan pada setiap halaman ke bahagian halaman utama yang berbeza, anda hanya perlu memaut ke menu umum. Menu sedemikian juga akan memudahkan navigasi pengguna.

Walaupun fakta bahawa peta imej telah menjadi sangat popular, adalah jelas bahawa ia bukan atribut penting halaman Web dan tidak digunakan pada semua halaman. Terdapat situasi apabila anda tidak sepatutnya menggunakan peta imej.

Kelemahan peta imej termasuk yang berikut:

• Jika menu teks alternatif tidak disediakan, tiada navigasi tersedia untuk pengguna yang tidak boleh memuatkan grafik atau telah melumpuhkan pemuatan grafik.
• Peta imej berkongsi kelemahan yang sama yang dikaitkan dengan menggunakan imej pada halaman Web, iaitu, peningkatan ketara dalam masa pemuatan berbanding dengan dokumen teks semata-mata.
• Imej yang direka bentuk dengan buruk boleh menimbulkan kekeliruan. Kadangkala sukar untuk menentukan kawasan mana yang aktif dalam imej. Ini amat sukar dilakukan dalam versi pelayan. Apabila melaksanakan versi klien, keadaan dipermudahkan, kerana mungkin untuk menggerakkan tetikus dalam imej dan memantau alamat pautan yang muncul di bahagian bawah tetingkap penyemak imbas.
• Apabila menggunakan peta imej, penyemak imbas tidak mempunyai keupayaan untuk menandakan pautan yang telah dilawati dengan warna yang berbeza dengan cara yang sama seperti yang dilakukan untuk pautan teks.

Pelaksanaan sebelah pelayan peta imej

Menggunakan peta imej pada halaman Web ternyata menjadi sedikit lebih kompleks daripada sekadar membenamkan grafik yang menarik dan memautkannya ke pautan. Untuk melaksanakan versi pelayan peta imej, dokumen HTML perlu dihoskan pada pelayan. Pelayan juga dikehendaki dikonfigurasikan untuk menyokong skrip CGI (Antara Muka Gerbang Biasa), yang memproses permintaan yang diterima daripada penyemak imbas apabila bekerja dengan peta imej. Untuk setiap peta imej, fail yang menerangkan konfigurasi kawasan aktif mesti diletakkan pada pelayan. Apabila anda mengklik dalam imej, koordinat tempat anda klik dihantar oleh penyemak imbas ke pelayan, yang mengakses fail konfigurasi, yang pada asasnya ialah jadual carian tempat liputan. Hasil carian dikembalikan kepada penyemak imbas dalam bentuk URL atau mesej yang menunjukkan bahawa tiada tempat liputan ditemui yang sepadan dengan lokasi yang ditentukan dalam imej.

Untuk memastikan fungsi peta imej, adalah perlu untuk menunjukkan bahawa imej ini adalah imej rujukan untuk peta. Ini dilakukan dengan menetapkan parameter ISMAP dalam teg . Selain itu, peta imej mesti dijadikan pautan pada halaman Web, sama seperti menggunakan keseluruhan imej sebagai pautan berasingan.

Sebagai peringatan, imej sebaris boleh digunakan sebagai pautan hiperteks jika ia disertakan dalam teg<А>. Sebagai contoh, untuk menjadikan imej bernama Myimage.gif pautan grafik kepada dokumen dalam direktori yang sama bernama exampie.html, anda akan menulis:

<А HREF=example.html >

HTML ini memberitahu pelayan bahawa apabila imej Mylmage.gif diklik, Dokumen bernama example.html harus dikembalikan kepada penyemak imbas.

Parameter ISMAP ditambahkan pada teg untuk contoh yang diberikan, mengaktifkan peta imej. Pautan dalam kes ini bukan ke dokumen tertentu, tetapi ke fail konfigurasi peta imej yang mengandungi koordinat semua kawasan aktif imej. Fail konfigurasi, biasanya dengan sambungan MAP, dihuraikan oleh program CGI pada pelayan bersama-sama dengan koordinat titik klik pada imej. Kemudian bukannya baris di atas anda harus menulis:

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

Pautan dalam contoh ini bukan alamat dokumen HTML lain, tetapi fail konfigurasi peta imej yang mengandungi koordinat untuk setiap kawasan aktif imej, bernama Myimage.gif.

Catatan

Susunan parameter teg adalah sewenang-wenangnya, bagaimanapun, parameter ISMAP biasanya diletakkan paling akhir.

Fail konfigurasi peta imej ialah fail teks biasa yang mengandungi maklumat tentang kawasan aktif imej tertentu. Setiap imej yang akan digunakan dalam mod peta memerlukan fail konfigurasi yang berasingan.

Nasihat

Setiap kad imej memerlukan fail konfigurasi yang berasingan. Jadikan peraturan untuk menyimpan fail konfigurasi dalam direktori yang sama dan dengan nama yang sama dengan imej yang dikaitkan dengannya. Contohnya: main_menu.gif dan main menu.map.

Terdapat dua format fail konfigurasi peta imej, dibangunkan oleh CERN dan NCSA dan menggunakan nama organisasi ini. Kedua-dua format ini mengandungi maklumat yang sama, tetapi menyampaikannya secara berbeza. Kedua-dua kes menggunakan jenis kawasan yang sama, yang dibincangkan di bawah. Apabila membangunkan peta imej untuk digunakan pada pelayan tertentu, anda mesti mendapatkan maklumat daripada pentadbir sistem tentang kaedah yang digunakan untuk menyokong peta imej pada pelayan tersebut.

Kedua-dua format menggunakan kawasan aktif dalam bentuk segi empat tepat, bulatan dan poligon, dan juga boleh menentukan kawasan lalai yang dipanggil, yang mencirikan semua titik dalam kawasan yang bukan milik mana-mana kawasan aktif. Jika pengguna mengklik di dalam imej tetapi di luar mana-mana tempat liputan yang ditentukan, URL akan ditetapkan kepada nilai yang ditentukan oleh jenis lalai.

Untuk setiap kawasan, URL ditulis dalam fail konfigurasi yang akan dikembalikan kepada pengguna apabila klik berlaku dalam kawasan itu. Alamat ini boleh ditulis dalam bentuk relatif atau mutlak. Ambil perhatian bahawa URL relatif mesti ditakrifkan secara relatif kepada lokasi fail konfigurasi, bukan fail imej. Senarai kawasan aktif dalam fail konfigurasi dibaca bermula dari baris pertama. Jika dua skop bertindih, maka pautan yang perihalan skopnya muncul dahulu dalam fail konfigurasi akan dilaksanakan.

Nasihat

Adalah disyorkan untuk sentiasa menetapkan pautan lalai dalam fail konfigurasi. Pautan lalai akan dilaksanakan untuk kawasan imej yang tidak aktif. Dalam kes paling mudah, URL lalai hanya boleh menunjuk ke halaman dengan maklumat berguna tentang menggunakan kad yang diberikan.

Format CERN

CERN ialah pusat saintifik Eropah yang topik penyelidikannya sangat luas. Di sinilah konsep sistem World Wide Web dibangunkan, yang menjadi pendorong kepada semua pembangunan di kawasan WWW. CERN boleh dianggap sebagai tempat kelahiran Web. Apabila timbul keperluan untuk membangunkan struktur bagi fail konfigurasi peta imej, CERN mencadangkan format berikut:

URL koordinat jenis kawasan

Nilai pasangan koordinat X dan Y dipisahkan dengan koma dan disertakan dalam kurungan. Format CERN tidak membenarkan ulasan untuk menerangkan rujukan yang berkaitan dengan kawasan tertentu. Jenis kawasan berikut boleh digunakan: tegak, bulatan, poli dan lalai. Format ini membenarkan nama jenis kawasan ditulis dalam dua cara - dalam bentuk ringkas dan penuh. Bersama-sama dengan nama jenis yang diberikan, nama segi empat tepat, bulatan dan poligon boleh digunakan.

Berikut ialah contoh rakaman maklumat tentang kawasan pada peta imej dalam format CERN:

betul (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

Pusat Nasional untuk Aplikasi Pengkomputeran Besar (NCSA) di Universiti Illinois juga telah memberikan sumbangan besar kepada pembangunan Web. Penyemak imbas grafik popular pertama, program Mosaic, telah dicipta di sini. NCSA mencadangkan format fail konfigurasi yang berbeza dalam bentuk rakaman daripada format CERN. Format ini kelihatan seperti ini:

Koordinat URL jenis_area

Jenis kawasan berikut boleh digunakan: tepat, bulatan, poli, lalai dan titik.

Koordinat X dan Y dipisahkan dengan koma, tetapi tidak disertakan dalam kurungan. Format ini membenarkan penggunaan baris ulasan. Mana-mana baris yang bermula dengan # aksara akan dianggap sebagai ulasan dan kandungannya akan diabaikan oleh penghurai.

Format NCSA menawarkan cara yang sedikit berbeza untuk menentukan kawasan bulat (berbanding dengan format CERN dan versi klien yang dibincangkan di bawah). Kawasan bulatan ditakrifkan oleh koordinat dua titik - pusat dan mana-mana titik yang terletak pada bulatan.

Catatan

Format NCSA membenarkan penggunaan jenis kawasan titik. Jenis kawasan ini tidak digunakan sama ada dalam format CERN atau semasa menggunakan versi klien peta imej. Hasrat pencipta format ialah jika terdapat beberapa kawasan bertitik, klik tetikus akan mengaktifkan pautan yang paling hampir dengan yang lain. Walau bagaimanapun, kehadiran jenis kawasan ini pada asasnya bercanggah dengan jenis kawasan lalai, kerana apabila menggunakan titik dan kawasan lalai secara serentak, pelaksanaan pautan yang ditakrifkan oleh jenis titik hanya mungkin jika tetikus mencapai titik yang diberikan dengan tepat. Ini agak sukar dan tidak mungkin mewujudkan keadaan yang selesa apabila bekerja dengan dokumen sedemikian. Pada masa ini, jenis titik praktikalnya tidak digunakan, dan versi pelanggan peta imej semakin berkembang.

Berikut ialah contoh menulis fail konfigurasi dalam format NCSA:

# Contoh menulis fail konfigurasi

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

bulatan 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

Versi pelanggan peta imej

Versi klien kad imej membolehkan anda meletakkan semua maklumat tentang konfigurasi kad dalam fail HTML di mana imej itu dibenamkan. Dalam kes menggunakan pilihan pelayan, penyemak imbas menghantar permintaan kepada pelayan untuk mendapatkan alamat pautan yang dipilih dan menunggu respons dengan maklumat yang diperlukan. Ini mungkin memerlukan masa menunggu tambahan. Dengan versi klien, bilangan panggilan ke pelayan berkurangan dan kelajuan akses kepada maklumat meningkat. Dalam pilihan ini, anda juga tidak perlu menghubungi pelayan untuk mengedit konfigurasi peta, jadi semua kerja untuk mencipta peta imej boleh dilakukan secara tempatan, serentak dengan mengedit fail HTML. Tidak seperti pilihan pelayan, yang memerlukan fail konfigurasi berasingan untuk setiap peta imej, dalam pilihan ini konfigurasi peta boleh ditempatkan terus dalam dokumen HTML yang sama di mana pautan imej rujukan ditentukan. Selalunya, ini adalah apa yang mereka lakukan, walaupun ia boleh diterima untuk menyimpan konfigurasi kad dalam fail berasingan dan memberikan pautan kepadanya.

Untuk menunjukkan bahawa imej terbenam ialah imej rujukan untuk peta, gunakan parameter teg USEMAP . Nilai parameter USEMAP ialah rujukan kepada perihalan konfigurasi peta.

Catatan

Pelayar Netscape tidak membenarkan fail berasingan untuk menerangkan konfigurasi kad.

Sebagai contoh:

Dalam contoh ini, imej yang disimpan dalam fail bernama l ogo.gif ialah imej rujukan untuk peta imej sebelah klien.

Perihalan konfigurasi hotspot mesti terletak dalam fail yang sama dengan baris kod HTML ini dan, untuk contoh ini, dinamakan logo.

Tag<МАР>

Teg khas digunakan untuk menerangkan konfigurasi kawasan peta imej<МАР>, yang satu-satunya parameter ialah NAME. Nilai parameter NAME menentukan nama yang mesti sepadan dengan nama dalam USEMAP. Tag<МАР>memerlukan tag penutup. Di dalam pasangan teg ini harus ada perihalan kawasan aktif peta, yang mana teg khas digunakan .

Tag

Setiap tag individu menentukan satu kawasan aktif. Teg penamat tidak diperlukan. Kawasan aktif mungkin bertindih. Jika titik tertentu tergolong pada beberapa kawasan aktif secara serentak, maka pautan yang perihalannya terletak dahulu dalam senarai kawasan akan dilaksanakan.

Parameter teg ialah SHAPE, COORDS, HREF, NOHREF, TARGET dan ALT. Mari kita pertimbangkan tujuan parameter ini.

Parameter SHAPE

Parameter SHAPE menentukan bentuk kawasan aktif. Nilai yang sah ialah tepat, bulatan, poli, lalai. Nilai ini mentakrifkan kawasan dalam bentuk segi empat tepat, bulatan atau poligon. Nilai terakhir - lalai - mentakrifkan semua titik dalam kawasan itu. Jika parameter SHAPE diabaikan, nilai lalai adalah tepat, iaitu kawasan dalam bentuk segi empat tepat.

Amaran

Jangan mengelirukan kawasan jenis lalai, yang menerangkan semua titik dalam imej, dan nilai lalai parameter SHAPE, iaitu tepat.

Catatan

Tidak seperti versi pelayan, di mana kawasan lalai menentukan semua titik pada imej yang bukan milik mana-mana kawasan aktif, untuk pilihan klien kawasan lalai mentakrifkan semua titik imej. Oleh itu, dalam kes ini, perihalan kawasan lalai harus terletak paling akhir dalam senarai kawasan aktif. Jika, sebagai contoh, perihalan kawasan lalai diletakkan dahulu, maka pautan yang ditakrifkan oleh kawasan ini akan sentiasa dilaksanakan untuk versi klien, dan semua pautan lain akan diabaikan (beginilah cara kawasan jenis ini dilaksanakan dalam Netscape ). Untuk versi pelayan, lokasi perihalan kawasan lalai tidak penting. Perbezaan ini diambil kira dalam contoh yang diberikan pada akhir bab.

Nasihat

Ambil perhatian juga bahawa tidak semua pelayar menyokong jenis kawasan lalai. Khususnya, Microsoft Internet Explorer tidak membenarkan skop jenis ini sama sekali. Oleh itu, bukannya kawasan jenis lalai, kami boleh mengesyorkan menetapkan kawasan segi empat tepat dengan dimensi yang sama dengan saiz keseluruhan imej. Sememangnya, kawasan sedemikian harus diterangkan terakhir. Inilah yang dilakukan oleh beberapa program penyuntingan peta imej, yang akan dibincangkan di bawah.

Parameter COORDS

Parameter COORDS menentukan koordinat kawasan aktif tunggal. Nilai parameter ialah senarai koordinat titik yang menentukan kawasan aktif, dipisahkan dengan koma. Koordinat ditulis sebagai integer bukan negatif. Asal terletak di sudut kiri atas imej, yang sepadan dengan nilai 0.0. Nombor pertama menentukan koordinat mendatar, yang kedua - yang menegak. Senarai koordinat bergantung pada jenis kawasan.

Untuk kawasan jenis tepat, koordinat sudut kiri atas dan sudut kanan bawah segi empat tepat ditentukan.

Untuk kawasan jenis bulatan, tiga nombor ditentukan - koordinat pusat bulatan dan jejari.

Untuk kawasan jenis poli, koordinat bucu poligon ditentukan dalam susunan yang diperlukan. Ambil perhatian bahawa titik terakhir dalam senarai koordinat tidak perlu bertepatan dengan yang pertama. Jika ia tidak sepadan, penyemak imbas akan menyambung secara automatik titik terakhir kepada titik pertama apabila mentafsir data untuk bentuk wilayah tersebut. Editor peta imej yang berbeza berfungsi secara berbeza dalam hal ini - sesetengahnya menambah titik pertama pada penghujung senarai, manakala yang lain tidak. Sekatan kuantitatif pada bilangan bucu agak besar dan merangkumi hampir semua keperluan yang boleh difikirkan. Sekurang-kurangnya poligon dengan 100 bucu diproses dengan pasti oleh semua pelayar terkemuka. Terdapat had yang dikaitkan dengan bahasa HTML itu sendiri, yang mengikutnya senarai tidak boleh mengandungi lebih daripada 1024 nilai. Poligon mungkin bukan cembung.

Kawasan jenis lalai tidak memerlukan koordinat yang dinyatakan.

Parameter HREF dan NOHREF

Pilihan HREF dan NOHREF adalah saling eksklusif. Jika tiada parameter ini dinyatakan, maka wilayah itu dianggap tidak mempunyai pautan. Perkara yang sama secara eksplisit mentakrifkan parameter NOHREF, yang tidak memerlukan nilai. Parameter HREF menentukan alamat pautan, yang boleh ditulis dalam bentuk mutlak atau relatif. Peraturan untuk menulis sepenuhnya bertepatan dengan peraturan untuk menulis pautan dalam teg<А>.

Parameter NOHREF berguna untuk mengecualikan sebahagian daripada kawasan aktif. Biarkan, sebagai contoh, anda perlu membuat kawasan aktif dalam bentuk cincin. Kawasan jenis ini tidak termasuk dalam senarai kawasan yang mungkin, tetapi ia boleh dilaksanakan dengan menetapkan dua kawasan bulat. Untuk melakukan ini, anda mesti terlebih dahulu menentukan kawasan jejari yang lebih kecil dan tentukan NOHREF sebagai parameter. Seterusnya, anda perlu menentukan kawasan jejari yang lebih besar dengan pusat pada titik yang sama dan nyatakan pautan yang dikehendaki. Kemudian kawasan di dalam gelang, yang ditakrifkan oleh dua bulatan berbeza jejari, akan mempunyai pautan yang diperlukan. Menggunakan pendekatan berdasarkan pertindihan bersama kawasan akan membolehkan anda membina kawasan dengan bentuk yang sangat pelbagai.

Parameter SASARAN

Parameter TARGET digunakan apabila bekerja dengan bingkai. Tujuannya adalah untuk menunjukkan nama bingkai di mana dokumen yang dimuat turun dari pautan ini akan diletakkan. Untuk mendapatkan maklumat lanjut tentang menggunakan pilihan ini, lihat bab bekerja dengan bingkai.

Parameter ALT

Parameter ALT membolehkan anda menulis teks alternatif untuk setiap kawasan aktif imej. Pada asasnya, teks ini hanya akan memainkan peranan sebagai ulasan untuk pencipta dokumen. Jika teks alternatif ditulis untuk keseluruhan imej (dalam tag ), digunakan untuk memaparkannya pada skrin apabila bekerja dengan pemuatan imej dilumpuhkan, maka teks alternatif untuk kawasan aktif tidak akan muncul pada skrin.

Berikut ialah contoh menentukan kawasan pelbagai jenis:

<МАР NAME="logo">

!}

HREF="p.htm" ALT="Polygon"> !}

Coretan kod ini diletakkan dalam fail HTML. Selalunya semua perihalan peta imej bagi satu dokumen disatukan dan diletakkan pada permulaan bahagian dokumen. Pendekatan ini hampir dengan pengaturcara, yang biasanya, apabila menulis atur cara, memisahkan bahagian deskriptif program daripada bahagian boleh laku, yang memudahkan pemahaman kod bertulis, dan kadangkala ditentukan oleh keperluan pengkompil.

Gabungan pilihan klien dan pelayan

Ia boleh diterima untuk menggunakan pilihan gabungan, di mana kedua-dua parameter - USEMAP dan ISMAP - ditakrifkan untuk imej yang sama, yang membayangkan penggunaan imej ini sebagai rujukan untuk pilihan klien dan pelayan. USEMAP ialah parameter dominan. Ini bermakna penyemak imbas yang menyokong pilihan klien akan menggunakan USEMAP, mengabaikan arahan parameter ISMAP. Penyemak imbas yang tidak menyokong pilihan klien dan tidak memahami tujuan parameter USEMAP, mengikut peraturan umum HTML, akan mengabaikan kehadirannya dan akan melaksanakan pilihan pelayan apabila mereka mengesan kehadiran parameter ISMAP. Pilihan gabungan lebih dipercayai, tetapi memerlukan data untuk mengkonfigurasi kawasan untuk kedua-dua pilihan. Pada masa kini, keperluan untuk menggunakan pilihan gabungan semakin berkurangan, kerana semua pelayar terkemuka menyokong pilihan klien. Walau bagaimanapun, halaman utama Netscape, yang mana-mana pengguna pelayar Netscape mungkin pernah jumpa, dibuat dalam versi gabungan.

Berikut ialah contoh pilihan gabungan:

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

Catatan

Parameter USEMAP juga dominan ke atas pautan yang ditakrifkan oleh teg<А>. Jadi, jika imej yang digunakan untuk melaksanakan konsep peta imej dalam versi klien ditulis dalam skop teg<А HREF>, maka pautan yang dikenal pasti oleh teg terakhir akan diabaikan oleh penyemak imbas yang menyokong pilihan sisi klien. Biarkan, sebagai contoh, mempunyai serpihan berikut:

<А HREF=NoMaps.htm> .

Di satu pihak, keseluruhan imej ialah pautan ke dokumen yang dipanggil NoMaps.htm. Sebaliknya, kehadiran parameter USEMAP mentakrifkan imej ini sebagai imej rujukan untuk peta imej yang sepadan. Rujukan kepada dokumen NoMaps.htm akan diabaikan kerana kehadiran parameter USEMAP dan tanpa mengira faktor lain.

Ciri-ciri menggunakan peta imej

Mari kita perhatikan beberapa ciri dalam penggunaan peta imej dalam versi klien. Apabila pengguna menggerakkan tetikus dalam imej yang melaksanakan pilihan sisi klien, URL yang sepadan dipaparkan dalam bar status di bahagian bawah pelayar Netscape. Dalam pilihan sisi pelayan, URL tidak dipaparkan kerana maklumat dihoskan pada pelayan, yang tidak boleh diakses sehingga pengguna mengklik pada imej. Pilihan pertama adalah lebih bermaklumat, kerana pengguna melihat alamat pautan dan juga boleh menentukan lokasi imej tanpa pautan. Versi pelayan memaparkan nombor yang merupakan koordinat tetikus relatif pada imej dan tidak memberikan sebarang maklumat tentang pautan dan kehadirannya.

Kaedah navigasi alternatif

Penggunaan peta imej telah menjadi perkara biasa, tetapi kita tidak harus lupa bahawa tidak semua pengguna Web boleh menggunakan grafik atau ingin bekerja dengan pemuatan imej dilumpuhkan untuk mengurangkan masa pemindahan fail. Oleh itu, anda perlu menyediakan beberapa cara lain, alternatif navigasi pada halaman untuk mereka. Jika tidak, pengguna tidak akan dapat mencari di halaman sama sekali dan, dengan itu, melaksanakan pautan tersebut yang hanya ditakrifkan oleh peta imej.

Sebagai alternatif, anda boleh membuat bahagian berasingan dengan penerangan teks pautan dan URL yang sepadan. Anda juga boleh membuat pautan ke menu teks yang mempunyai sambungan yang sama seperti peta imej. Walau apa pun pendekatan yang anda pilih, anda perlu memastikan bahawa semua pautan tersedia untuk mod teks penyemak imbas.

Mari kita berikan contoh dokumen kehidupan sebenar yang isu ini diselesaikan. Salah satu halaman syarikat terkenal Hewlett-Packard menunjukkan serpihan yang mengandungi peta imej. Di tengah-tengah halaman terdapat senarai sepuluh jenis peralatan yang berbeza, setiap satunya mempunyai pautan ke dokumen yang sepadan. Malah, terdapat gambar pada halaman tersebut, iaitu imej rujukan untuk peta tersebut. Dalam imej ini, sepuluh zon segi empat tepat diserlahkan, yang merupakan kawasan aktif.

Jika anda memuatkan halaman ini dengan mod pemuatan imej dilumpuhkan, anda akan melihat gambar di mana, bukannya peta imej, terdapat hanya ikon kecil yang menunjukkan lokasi imej dan. teks yang telah ditetapkan sebagai teks alternatif untuk keseluruhan imej yang diberikan. Jelas sekali, anda tidak akan dapat menggunakan pautan di sini. Untuk menyelesaikan isu ini, di bawah imej terdapat menu teks biasa, yang mengulangi sepenuhnya senarai yang ditunjukkan dalam imej, dengan pautan yang sepadan. Oleh itu, jika pemuatan imej dilumpuhkan, pengguna masih akan dapat melaksanakan peralihan pautan yang diperlukan menggunakan menu teks pendua. Apabila memuatkan imej, menu teks hanya menduplikasi pilihan untuk memilih pautan.

Alat Pemetaan Imej

Mencipta peta imej memerlukan dua langkah: menyediakan imej rujukan yang mana kawasan aktif akan ditakrifkan kemudiannya dan membangunkan fail konfigurasi yang menerangkan parameter geometri kawasan aktif. Menyediakan imej yang akan menjadi asas untuk peta imej tidak berbeza dengan menyediakan imej biasa yang dibenamkan pada halaman Web. Untuk melakukan ini, anda boleh menggunakan mana-mana editor grafik atau menggunakan imej siap sedia.

Dalam langkah kedua, anda perlu menandakan kawasan aktif dalam imej dan memadankannya dengan alamat pautan yang sepadan. Menyediakan fail konfigurasi ialah langkah paling sukar dalam mencipta peta imej. Pada dasarnya, cara manual untuk menetapkan sempadan kawasan aktif dalam imej adalah mungkin. Sebagai contoh, apabila bekerja dalam editor grafik, anda boleh menandakan titik individu, merekodkan koordinatnya, dan kemudian mencipta fail yang menerangkan parameter geometri kawasan yang dipilih. Walau bagaimanapun, pendekatan ini sangat menyusahkan dan menyusahkan.

Untuk mengautomasikan proses menandakan kawasan dalam imej, terdapat beberapa program, yang kebanyakannya hampir sama antara satu sama lain. Mereka membenarkan anda membuat dan mengubah suai fail konfigurasi dengan bekerja terus dengan imej pada skrin. Kebanyakan program adalah utiliti berdiri sendiri yang beroperasi secara bebas dan pada asasnya adalah tambahan kepada editor HTML. Program ini membolehkan anda menyimpan fail konfigurasi yang dijana sama ada pada papan keratan Windows atau ke fail pada cakera. Dalam kes pertama, pilihan biasa ialah operasi bersama program penyuntingan peta imej dan sejenis editor HTML atau editor teks biasa. Jika program membenarkan anda menyimpan fail konfigurasi pada cakera, maka ia boleh digunakan sepenuhnya secara autonomi. Semua program membolehkan anda menandakan kawasan tiga jenis utama pada imej - tepat, bulatan dan poli. Sesetengah editor menyokong jenis lalai. Mungkin satu-satunya kriteria untuk memilih program penyuntingan peta imej ialah kemudahan penggunaannya, kerana semua program sangat serupa dalam sifat berfungsi. Jika antara muka program kelihatan menyusahkan anda, anda boleh berhenti menggunakannya dan memilih yang lain.

Mari kita lihat beberapa program yang sedia ada.

program MapEdit

Salah satu program yang paling mudah dan paling terkenal untuk mengedit fail konfigurasi ialah utiliti MapEdit, yang dibangunkan oleh Thomas Boutell. Program ini telah wujud selama beberapa tahun dan telah dilaksanakan untuk pelbagai platform. Khususnya, terdapat versi untuk Windows 3.x dan Windows 95/98/NT. Seperti kebanyakan program, terdapat beberapa versi utiliti ini. Pada masa ini versi terkini yang tersedia untuk Windows 95/98/NT ialah versi 2.6 (September 1999). Maklumat mengenai program boleh didapati di:

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

MapEdit ialah perisian kongsi dan mempunyai tempoh penilaian 30 hari, selepas itu pendaftaran diperlukan. Program ini bersaiz kecil - pengedaran mengambil kira-kira 300 KB, dan pada masa yang sama ia mempunyai hampir semua keupayaan yang diperlukan.

Program ini membolehkan anda mengedit fail konfigurasi untuk kedua-dua versi pelayan (dalam format NCSA dan CERN) dan versi klien. Anda boleh membuat kawasan aktif secara visual dalam bentuk segi empat tepat, bulatan dan poligon, serta menentukan alamat pautan untuk kawasan lalai.

Mari kita lihat secara ringkas ciri-ciri utama program ini. Selepas memulakan MapEdit, tetingkap utama muncul, mengandungi skrin percikan (Gamb. 6.3) dan menu. Ia adalah mungkin untuk mengedit fail sedia ada untuk kedua-dua pelayan dan versi klien peta imej. Ia juga mungkin untuk mencipta fail konfigurasi baharu, tetapi ini hanya terpakai pada versi pelayan. Versi klien memerlukan fail HTML sumber dengan pautan ke imej terbenam yang akan digunakan sebagai rujukan untuk peta imej.

Catatan

Ketidakupayaan untuk mencipta fail HTML baharu menggunakan MapEdit boleh dielakkan dengan mudah. Untuk melakukan ini, anda harus menjalankan program dalam mod penciptaan fail dalam salah satu format sisi pelayan (NCSA dan CERN), lakukan semua tindakan yang diperlukan, dan kemudian simpan keputusan dalam mod Simpan sebagai, dengan menyatakan format Peta Sisi Pelanggan. Fail HTML akan dibuat, yang kemudiannya boleh digunakan sebagai serpihan siap sedia bagi dokumen HTML.

Katakan kita perlu mencipta fail konfigurasi baharu untuk versi pelayan peta imej. Pilih Buka/Buat Peta daripada menu

Fail. Kotak dialog akan muncul (Gamb. 6.4), di mana anda harus menentukan nama fail konfigurasi yang akan dibuat (contohnya, Blazons.map), nyatakan fail imej sedia ada dan format fail yang dibuat (NCSA atau CERN ). Fail imej boleh dalam format GIF, JPG atau PNG.

nasi. 6. 3 . Skrin percikan MapEdit

nasi. 6. 4 . Buka/Buat kotak dialog Peta untuk mencipta fail konfigurasi

Catatan

Banyak program tafsiran fail konfigurasi sisi pelayan memerlukan fail tersebut mempunyai sambungan MAP. Adalah disyorkan untuk sentiasa mematuhi peraturan ini.

Program ini akan memuatkan fail imej yang dipilih, di mana ia mungkin untuk menandakan kawasan aktif (Rajah 6.5).

Untuk melakukan ini, anda perlu memilih bentuk kawasan aktif - segi empat tepat, bulatan atau segi empat tepat dengan mengklik ikon yang sepadan atau memilih item yang dikehendaki dari menu Alat (Gamb. 6.6).

Tindakan selanjutnya dilakukan terus pada imej dengan menandakan titik dengan tetikus. Untuk kawasan segi empat tepat, sudut kiri atas dan sudut kanan bawah ditandakan, untuk kawasan bulat - pusat dan salah satu titik pada bulatan, untuk poligon bucunya ditentukan. Contohnya dalam Rajah. Rajah 6.5 menunjukkan kes apabila tiga kawasan aktif yang berbeza bentuk telah ditanda pada imej. Ambil perhatian bahawa garisan yang mengehadkan kawasan aktif hanya berfungsi untuk menggambarkannya apabila bekerja dalam editor dan tidak mengubah fail imej dalam apa jua cara. Imej dalam contoh ini pada asasnya mengandungi tiga gambar berasingan (jata bandar St. Petersburg, Tomsk dan Yakutsk digambarkan), yang biasanya tidak tipikal untuk imej realistik. Walau bagaimanapun, untuk imej yang mengandungi, sebagai contoh, satu set butang kawalan, keadaan ini agak tipikal.

nasi. 6. 5 . Imej dengan pelbagai jenis tempat liputan berlabel

nasi. 6. 6 . Menu alatan

nasi. 6. 7 . Kotak dialog URL objek untuk menentukan URL dan ulasan pilihan

Selepas menandakan mana-mana kawasan, anda harus menentukan alamat pautan yang sepadan dengan kawasan ini, serta maklumat ulasan (Gamb. 6.7). Anda boleh menetapkan alamat pautan lalai untuk kawasan itu, yang akan dilaksanakan untuk bahagian kawasan imej yang tidak termasuk dalam mana-mana kawasan aktif (Gamb. 6.8).

Selepas menandakan kawasan, anda boleh memeriksa secara visual atau menukar kawasan aktif yang dibuat menggunakan item Ujian pada menu Edit. Langkah terakhir ialah menyimpan keputusan sebagai fail konfigurasi (Simpan item dalam menu Fail). Anda juga boleh menggunakan item Simpan Sebagai, di mana anda menentukan format yang diperlukan untuk menyimpan fail (Gamb. 6.9).

nasi. 6. 8 . Kotak dialog URL lalai untuk menetapkan URL lalai untuk skop

nasi. 6. 9 . Simpan Sebagai Kotak Dialog Perintah

Catatan

Versi lama MapEdit mengandungi pepijat kecil yang berkaitan dengan menetapkan format fail konfigurasi yang disimpan. Jika format CERN ditentukan semasa mencipta fail, maka apabila menyimpan data dalam mod Simpan, fail tersebut masih akan disimpan dalam format NCSA. Anda boleh mencipta fail format CERN hanya apabila menggunakan mod Simpan sebagai dan menentukan format yang diperlukan.

Untuk contoh ini, fail yang dipanggil Blazons.map akan dibuat yang mengandungi maklumat berikut (format NCSA):

#Lambang kota Tomsk

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

#Lambang kota Yakutsk

bulatan 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 kelihatan seperti ini:

tepat (35.58) (187.244) www.ifmo.ru/sergeev/tomsk.htm bulatan (364.150) 104 www.ifmo.ru/sergeev/jakutsk.htm poli (537.61) (700.61) (700.230) (61) (1,325) (61) (1,325) www.ifmo.ru/sergeev/Spb.htm

Sila ambil perhatian bahawa ulasan tidak dibenarkan dalam format ini, jadi maklumat ini akan hilang apabila anda menyimpan fail.

Mari kita pertimbangkan tugas mencipta versi pelanggan peta imej. Untuk menyelesaikan masalah ini, anda mesti mempunyai fail sumber HTML yang mengandungi sekurang-kurangnya satu imej terbenam. Fail sumber ini boleh dibuat terlebih dahulu dengan mana-mana editor teks atau editor HTML khas. Katakan terdapat fail bernama CSIM.HTM yang mengandungi kod berikut:

Fail ini hendaklah dibuka dalam editor MapEdit (Gamb. 6.10). Tidak seperti pilihan di mana fail konfigurasi dicipta, di sini tidak perlu untuk menentukan nama fail imej dalam item menu Buka/Buat Peta.

nasi. 6.1 0 . Kotak dialog Buka/Buat Peta untuk membuka fail HTML sedia ada

nasi. 6.1 1 . Pilih Kotak Dialog Imej Sebaris

Selepas membuka fail HTML sumber, editor akan memaparkan kotak dialog dengan senarai semua imej terbina dalam, yang mana anda perlu memilih yang anda perlukan (Gamb. 6.11). Sudah tentu, fail dengan imej yang dipilih mesti wujud.

Kerja lanjut untuk menandakan kawasan aktif adalah sama sepenuhnya dengan kes sebelumnya. Selepas menyimpan hasil markup, fail sumber akan ditukar, dan untuk contoh yang diberikan ia akan kelihatan seperti ini:

href="tomsk.htm">

href="jakutsk.htm">

coords="537,61,700,61, 700, 230, 618, 256, 537,231" href="Spb.htm">

Sila ambil perhatian bahawa editor secara automatik memberikan nama untuk menerangkan peta imej yang sepadan dengan nama fail imej rujukan. Untuk contoh ini, fail dengan imej itu dinamakan Blazons.gif, jadi parameter nama teg<тар>telah diberikan nilai "Blazons".

Catatan

Editor MapEdit tidak berfungsi dengan betul dengan aksara abjad Rusia. Beberapa huruf Rusia hilang apabila fail disimpan dan ruang muncul di tempatnya. Cara paling mudah untuk keluar dari situasi ini ialah menambah teks Rusia selepas menyelesaikan kerja dalam editor.

Petakan INI!

Satu lagi utiliti untuk mencipta dan menyunting fail konfigurasi untuk peta imej ialah program Map THIS!, maklumat mengenainya boleh didapati di:

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

Bekerja dengan program ini secara ideologi serupa dengan program MapEdit. Asas bekerja dengan program ini adalah reka bentuk visual kawasan aktif dengan menyimpan lebih lanjut hasil dalam fail dalam salah satu format yang dipilih. Editor menyokong format peta imej sisi pelayan dan sisi klien (NCSA dan CERN). Imej boleh dimuatkan daripada fail GIF dan JPG.

Berikut ialah contoh fail konfigurasi yang dibuat oleh program ini. Untuk contoh yang diberikan dalam bahagian sebelumnya, fail yang disimpan dalam format NCSA akan kelihatan seperti ini:

#$MTIMFH

#$-:Fail Peta Imej dicipta oleh Peta INI!

#$-:Peta INI! editor peta imej percuma oleh Todd C. Wilson

#$-:Sila jangan edit baris bermula dengan "#$"

#$VERSION:1.30

#$TITLE: Blazons

#$DESCRIPTION:Versi pelayan peta imej

#$DATE:Selasa 14 Sep 12:10:42 1999

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

#$GIF:Blazons.gif

#$FORMAT:ncsa

#$EOH

lalai lalai.htm

# Lambang bandar Tomsk

betul Tomsk.htm 33.60 191.246

# Lambang bandar Yakutsk

bulatan 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

Tidak seperti program MapEdit, editor ini menulis cukup banyak maklumat ulasan ke dalam fail output, termasuk maklumat ringkas tentang program itu sendiri, tarikh fail itu dicipta, dll. Selain itu, selepas simbol #, yang bermaksud permulaan komen baris, editor menambah simbol $ untuk baris komen, yang dibuat oleh editor itu sendiri. Beri perhatian kepada baris keempat kod di atas, yang meminta anda untuk tidak mengedit ulasan yang disisipkan oleh editor.

Contoh yang sama yang disimpan dalam format CERN akan kelihatan seperti:

tepat (4096,4096) (4096,4096) mt:#$MTIMFH

rect (4096,4096) (4096,4096) mt:#$-:Fail Peta Imej dicipta oleh Peta INI!

tepat (4096,4096) (4096,4096) mt:#$-:Peta INI! editor peta imej percuma

oleh Todd C. Wilson

betul (4096,4096) (4096,4096) mt:#$-:Sila jangan edit baris bermula

dengan "#$"

tepat (4096,4096) (4096,4096) mt:#$VERSION:1.30

tepat (4096,4096) (4096,4096) mt:#$TITLE: Blazons

betul (4096,4096) (4096,4096) mt:#$DESCRIPTION: Versi pelayan

peta imej

tepat (4096.4096) (4096.4096) mt:#$

tepat (4096,4096) (4096,4096) mt:#$TARIKH:Selas 14 Sep 12:10:42 1999

betul (4096,4096) (4096,4096) mt:#$PATH:C:\Program Files\Mapthis\

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

tepat (4096,4096) (4096,4096) mt:#$FORMAT:cern

tepat (4096,4096) (4096,4096) mt:#$EOH

lalai lalai.htm

tepat (4096,4096) (4096,4096) mt:# Lambang bandar Tomsk

segi empat tepat (33.60) (191,246) Tomsk.htm

tepat (4096,4096) (4096,4096) mt:# Lambang bandar Yakutsk

circ (366,147) 109 Jakutsk.htm

rect (4096,4096) (4096,4096) mt:# Lambang bandar St. Petersburg

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

Seperti yang anda boleh lihat daripada kod di atas, editor menggunakan teknik yang agak buatan untuk menyimpan komen, kedua-duanya dimasukkan oleh pengguna dan dijana oleh program itu sendiri. Biar kami ingatkan anda bahawa format CERN tidak membenarkan anda menentukan baris ulasan, jadi editor mencipta baris seperti

betul (4096,4096) (4096,4096),

pada penghujungnya anda boleh meletakkan sebarang teks. Pada dasarnya, garis sedemikian menggambarkan segi empat tepat, yang jelas terletak di luar skrin, jadi kehadirannya tidak penting. Sudah tentu, dalam kes ini, teks fail konfigurasi menjadi lebih rumit dan menyusahkan untuk dibaca, yang, bagaimanapun, tidak mengganggu operasi program. Teknik menyimpan komen ini boleh diguna pakai.

Contoh yang sama, disimpan sebagai fail HTML (untuk versi klien peta imej) akan kelihatan seperti:

<МАР NAME="Blazons">

ALT="Lambang bandar Tomsk"> !}

ALT="Lambang bandar Yakutsk"> !}

HREF="Spb.htm" ALT="Lambang bandar St. Petersburg"> !}

Di sini, tidak seperti program MapEdit, nama peta imej mesti dinyatakan secara manual, jadi ia mungkin tidak bertepatan dengan nama fail dengan imej rujukan.

Program CrossEye

Program penyunting fail konfigurasi CrossEye, dicipta oleh syarikat Australia yang terkenal Sosej Software. Program ini akan dialu-alukan oleh peminat editor HTML popular HotDog, kerana ia dicipta oleh syarikat yang sama dan mempunyai antara muka yang sangat menarik dan lucu.

Maklumat mengenai pakej CrossEye boleh diperolehi daripada:

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

Ciri tersendiri program ini ialah saiz kit pengedaran yang agak besar (kira-kira 2.5 MB), serta tempoh masa yang singkat (14 hari) di mana ia boleh digunakan dalam mod penilaian. Saiz besar program adalah tipikal untuk semua perisian yang dicipta oleh Perisian Sosej, yang nampaknya disebabkan oleh pilihan alat yang digunakan untuk pembangunan (Visual Basic).

Malangnya, program ini tidak mempunyai beberapa sifat yang diperlukan. Sebagai contoh, tiada keupayaan untuk membaca fail HTML sedia ada, jadi adalah mustahil untuk mengedit peta imej sedia ada yang telah dibuat sebelum ini. Anda juga tidak boleh menyimpan kerja anda terus ke fail HTML. Menyimpan keputusan hanya boleh dilakukan dalam fail dengan sambungan khas EYE, yang mempunyai bentuk binari dan boleh digunakan pada masa hadapan hanya dalam editor ini. Kod HTML yang dijana ditulis pada papan keratan Windows, dari mana ia boleh disalin ke mana-mana editor teks.

Seperti dalam semua editor yang diterangkan di atas, penciptaan dan pengeditan kawasan aktif dijalankan secara langsung pada imej, tetapi imej dimuatkan ke dalam tetingkap, saiznya, atas sebab yang tidak diketahui, tidak boleh diubah. Jika imej lebih besar daripada tetingkap, anda boleh menatal untuk melihat imej, tetapi anda tidak boleh menetapkan kawasan aktif yang melangkaui tetingkap tontonan.

Untuk peta imej sisi klien, editor tidak menggesa anda untuk menetapkan URL lalai untuk kawasan itu sama sekali. Ini mungkin dilakukan dengan sengaja, kerana tidak semua penyemak imbas menyokong jenis kawasan lalai. Walau bagaimanapun, editor yang diterangkan di atas menyelesaikan masalah ini dengan sangat elegan dengan menggantikan kawasan lalai secara automatik dengan kawasan segi empat tepat dengan dimensi yang sama dengan dimensi imej.

Kelemahan, dalam erti kata lain, dikompensasikan oleh ciri tambahan tertentu editor. Khususnya, anda boleh mengetahui bahawa burung nuri, yang kelihatan di sudut kanan atas gambar di atas, dipanggil Polly. Dia agak bercakap, dan pengguna yang bekerja pada komputer yang dilengkapi dengan kad bunyi kadang-kadang akan mendengar seruan burung nuri, yang, bagaimanapun, tidak ada kena mengena dengan tindakan yang dilakukan. Dan dalam salah satu kotak dialog tetapan editor terdapat juga item khas yang membolehkan anda menutup burung kakak tua yang malang itu. Berikut ialah contoh perkhidmatan yang terbaik. Nampaknya, terima kasih kepada sifat yang disenaraikan, penilaian editor ini dianggarkan http://www.tucows.com, adalah sangat tinggi, yang tidak boleh dikatakan mengenai dua program yang diterangkan di atas.

Akhirnya, pilihan editor untuk membuat peta imej terpulang kepada pengguna.

Vlad Merzhevich

Peta imej membolehkan anda memautkan pautan ke kawasan yang berbeza pada imej yang sama. Ia dilaksanakan dalam dua versi berbeza - pelayan dan klien. Apabila menggunakan pilihan pelayan, penyemak imbas menghantar permintaan kepada pelayan untuk mendapatkan alamat pautan yang dipilih dan menunggu respons dengan maklumat yang diperlukan. Pendekatan ini memerlukan masa tambahan untuk menunggu keputusan dan fail berasingan untuk setiap peta imej.

Dalam versi klien, peta terletak dalam dokumen HTML yang sama dengan pautan ke imej.

Versi pelanggan peta imej

Untuk menunjukkan bahawa imej ialah peta, gunakan atribut usemap tag . Nilai ialah pautan kepada perihalan konfigurasi kad.

Contoh 1: Menggunakan peta imej

Atribut usemap digunakan untuk menunjukkan kepada pelayar bahawa imej itu adalah peta. Ia ialah pautan kepada perihalan konfigurasi kad, yang ditentukan oleh teg

Atribut teg AREA

bentuk

Mentakrifkan bentuk kawasan aktif. Bentuknya boleh dalam bentuk bulatan (bulatan), segi empat tepat (rect), poligon (poli).

alt

Menambah teks alternatif untuk setiap kawasan. Berkhidmat hanya sebagai ulasan untuk pautan, kerana ia tidak dipaparkan pada skrin.

kord

Menetapkan koordinat kawasan aktif. Koordinat diukur dalam piksel dari sudut kiri atas imej, yang sepadan dengan nilai 0.0. Nombor pertama ialah koordinat mendatar, yang kedua ialah koordinat menegak. Senarai koordinat bergantung pada bentuk kawasan.

Untuk bulatan, tiga nombor ditentukan - koordinat pusat bulatan dan jejari.

Untuk segi empat tepat, koordinat penjuru kiri atas dan kanan bawah.

Untuk poligon, koordinat bucunya ditentukan (Rajah 2).

nasi. 2. Selaraskan titik bagi poligon

href

Peta imej membolehkan anda membuat pautan ke kawasan yang berbeza pada imej yang sama. Menggunakan pendekatan ini adalah lebih jelas daripada pautan teks biasa dan membolehkan anda menggunakan hanya satu fail grafik untuk mengatur pautan. Walau bagaimanapun, anda tidak boleh menganggap bahawa peta imej harus disertakan di mana-mana rujukan grafik diperlukan. Pertama sekali, anda harus menilai semua kebaikan dan keburukan, dan juga melihat pilihan alternatif.

Faedah peta imej

1. Peta membolehkan anda menetapkan sebarang bentuk kawasan pautan. Memandangkan imej adalah berbentuk segi empat tepat, adalah tidak mungkin untuk membuat pautan grafik bentuk yang kompleks, contohnya untuk menunjukkan kawasan geografi, tanpa peta imej. Sebagai peraturan, dalam subjek geografi, peta imej digunakan paling kerap.

2. Lebih mudah untuk bekerja dengan satu fail - anda tidak perlu risau tentang menyertai serpihan individu dan lukisan boleh diletakkan dengan mudah di tempat yang betul.

Kecacatan

1. Anda tidak boleh menetapkan petua alat dan teks alt untuk kawasan individu. Teks alternatif membolehkan anda mendapatkan maklumat teks tentang gambar apabila memuatkan imej dilumpuhkan dalam penyemak imbas. Oleh kerana imej dimuatkan selepas penyemak imbas menerima maklumat mengenainya, teks gantian imej muncul lebih awal. Dan apabila ia dimuatkan, teks akan digantikan dengan imej. Untuk peta imej, ciri ini adalah berkaitan, kerana jika anda mematikan paparan imej, yang dilakukan oleh ramai pengguna, anda akan melihat hanya satu segi empat tepat kosong.

2. Dengan bentuk kawasan pautan yang kompleks, jumlah kod HTML meningkat. Kontur dianggarkan oleh satu set segmen lurus; untuk setiap titik segmen sedemikian, dua koordinat harus ditentukan, dan jumlah bilangan titik tersebut boleh menjadi agak besar. Dalam keadilan, perlu diperhatikan bahawa bentuk kompleks adalah kes khas dan jarang digunakan.

3. Dengan kad imej anda tidak boleh mencipta pelbagai kesan yang tersedia apabila memotong satu gambar kepada serpihan: kesan berguling, animasi separa, pengoptimuman individu gambar untuk pemuatan pantasnya.

Kebolehgunaan

Dari sudut kemudahan pengguna, peta imej hanya mempunyai satu kelebihan - pautan pelbagai bentuk. Ini menambah kejelasan kepada pembentangan maklumat - kami tidak terhad kepada bentuk segi empat tepat pautan dan boleh menggunakan pautan konfigurasi kompleks untuk tujuan kami sendiri. Dalam semua aspek lain, mereka tidak berguna - pautan teks biasa lebih bermaklumat dan mereka tidak takut untuk mematikan paparan imej dalam penyemak imbas. Hakikat bahawa satu imej dimuatkan lebih cepat daripada gambar yang sama dipotong menjadi serpihan dan disimpan sebagai satu set fail grafik mudah dielakkan. Setiap fail akhir ini boleh dikurangkan menggunakan tetapan pengoptimuman individu. Akibatnya, jumlah volum semua serpihan akan mengambil kurang ruang daripada satu imej. Seseorang tidak sepatutnya menolak faktor psikologi - nampaknya seseorang set gambar kecil dimuatkan lebih cepat daripada satu gambar besar.

Kelemahan utama peta ialah tiada sempadan yang jelas bagi pautan. Oleh itu, sempadan ini perlu diserlahkan menggunakan cara berbeza yang sudah ada dalam imej. Jika gambar tidak dimuatkan atas sebab tertentu, maka memahami set pautan menjadi sangat bermasalah.

Pilihan alternatif

Tidak selalu ada keperluan mendesak untuk menggunakan peta imej, jadi anda harus memberi perhatian kepada fakta bahawa terdapat pilihan lain yang mungkin untuk menyelesaikan tugas.

Menggunakan Flash

Dalam video Flash, anda boleh mencipta kawasan pautan yang berbeza menggunakan grafik vektor. Terima kasih kepada keupayaannya yang luas, anda boleh mencipta menu dan navigasi yang menakjubkan dalam Flash. Tetapi di sini juga, berhati-hati diperlukan agar tidak kehilangan hutan untuk pokok.

Menghiris imej

Ini adalah salah satu cara yang popular dalam reka bentuk. Dalam kes ini, satu imej dipotong menggunakan program khas menjadi serpihan, yang akhirnya disatukan, mencipta ilusi keseluruhan gambar. Walaupun kawasan pemotongan hanya boleh berbentuk segi empat tepat, dalam kebanyakan kes ini mencukupi untuk membuat pautan. Untuk setiap serpihan, anda boleh memilih format grafik yang paling sesuai di mana ia akan disimpan, parameter pengoptimuman dan menambah teks alternatif. Kemudian, walaupun dengan paparan imej dilumpuhkan, sempadan kawasan dan teks yang menggantikan imej akan kelihatan dengan jelas.

Ringkasan

Ternyata, hanya ada satu sebab untuk menggunakan peta imej - bentuk pautan kompleks yang ditentukan oleh tugas reka bentuk. Aplikasi biasa ialah kawasan peta geografi yang berfungsi sebagai rujukan. Dalam semua kes lain, anda boleh bertahan dengan pautan teks, dan jika anda perlu membuat navigasi grafik, satu imej boleh dipotong menjadi serpihan untuk kemudahan. Pendekatan ini akan mewujudkan lebih banyak kemudahan untuk pengguna, terutamanya mereka yang, atas pelbagai sebab, melumpuhkan paparan imej dalam penyemak imbas. Anda juga perlu mengingati mereka.

imej HTML ditambahkan pada halaman web menggunakan teg . Penggunaan grafik menjadikan halaman web lebih menarik secara visual. Imej membantu menyampaikan intipati dan kandungan dokumen web dengan lebih baik.

Menggunakan tag HTML

Memasukkan imej ke dalam dokumen HTML

1. Tag

unsur mewakili imej dan kandungan sandarannya, yang ditambah menggunakan atribut alt. Sejak unsur ialah huruf kecil, adalah disyorkan untuk meletakkannya di dalam elemen blok, contohnya,

Ataupun

.

Tag mempunyai atribut src yang diperlukan, yang nilainya adalah laluan mutlak atau relatif kepada imej:

Untuk tag Atribut berikut tersedia:

Jadual 1. Atribut tag

Atribut	Penerangan, nilai yang diterima
alt	Atribut alt menambah teks alternatif pada imej. Dipaparkan di mana imej muncul sebelum ia dimuatkan atau apabila grafik dilumpuhkan, dan juga dipaparkan sebagai petua alat apabila menuding tetikus di atas imej. Sintaks: alt="penerangan imej" . !}
asal silang	Atribut silang asal membolehkan anda memuatkan imej daripada sumber pada domain lain menggunakan permintaan CORS. Imej yang dimuatkan ke dalam kanvas menggunakan permintaan CORS boleh digunakan semula. Nilai yang dibenarkan: tanpa nama - Permintaan silang asal dibuat menggunakan pengepala HTTP dan tiada bukti kelayakan dihantar. Jika pelayan tidak memberikan bukti kelayakan kepada pelayan dari mana kandungan itu diminta, imej akan rosak dan penggunaannya akan terhad. kredensial guna — Permintaan silang asal dilakukan dengan lulus bukti kelayakan. Sintaks: crossorigin="anonymous" .
ketinggian	Atribut ketinggian menentukan ketinggian imej dalam px. Sintaks: height="300" .
ismap	Atribut ismap menunjukkan bahawa gambar adalah sebahagian daripada imej peta yang terletak pada pelayan (imej peta ialah imej dengan kawasan boleh klik). Apabila anda mengklik pada imej peta, koordinat dihantar ke pelayan sebagai rentetan pertanyaan URL. Atribut ismap hanya dibenarkan jika elemen adalah keturunan unsur dengan atribut href yang sah. Sintaks: ismap.
longdesc	URL perihalan imej lanjutan yang melengkapkan atribut alt. Sintaks: longdesc="http://www.example.com/description.txt" .
src	Atribut src menentukan laluan ke imej. Sintaks: src="flower.jpg" .
saiz	Menetapkan saiz imej bergantung pada pilihan paparan. Hanya berfungsi apabila atribut srcset ditentukan. Nilai atribut ialah satu atau lebih rentetan, dipisahkan dengan koma.
srcset	Mencipta senarai sumber imej yang akan dipilih berdasarkan resolusi skrin. Boleh digunakan bersama-sama dengan atau bukannya atribut src. Nilai atribut ialah satu atau lebih rentetan, dipisahkan dengan koma.
peta guna	Atribut usemap menentukan imej sebagai peta imej. Nilai mesti bermula dengan simbol #. Nilai dikaitkan dengan nilai nama teg atau atribut id
lebar	Atribut lebar menentukan lebar imej dalam px. Sintaks: width="500" .

1.1. Alamat imej

Alamat imej boleh ditentukan sepenuhnya (URL mutlak), contohnya:
url(http://anysite.ru/images/anyphoto.png)

Atau melalui laluan relatif dari dokumen atau direktori akar laman web:
url(../images/anyphoto.png) - laluan relatif daripada dokumen,
url(/images/anyphoto.png) - laluan relatif daripada direktori akar.

Ini ditafsirkan seperti berikut:
../ - bermaksud naik satu tahap, ke direktori akar,
imej/ - pergi ke folder dengan imej,
anyphoto.png - menunjuk ke fail imej.

1.2. Dimensi Imej

Tanpa menetapkan dimensi imej, lukisan dipaparkan pada halaman dalam saiz sebenar. Anda boleh mengedit dimensi imej menggunakan atribut lebar dan ketinggian. Jika hanya satu daripada atribut dinyatakan, yang kedua akan dikira secara automatik untuk mengekalkan perkadaran gambar.

1.3. Format fail grafik

Format JPEG (Kumpulan Pakar Fotografi Bersama). Imej JPEG sesuai untuk gambar dan boleh mengandungi berjuta-juta warna yang berbeza. Imej memampatkan lebih baik daripada GIF, tetapi teks dan kawasan besar warna pepejal mungkin menjadi bertompok.

format GIF (Format Pertukaran Grafik). Sesuai untuk memampatkan imej yang mempunyai kawasan warna pepejal, seperti logo. GIF membolehkan anda menetapkan salah satu warna menjadi lutsinar, membenarkan latar belakang halaman web dipaparkan melalui sebahagian daripada imej. GIF juga boleh menyertakan animasi ringkas. Imej GIF mengandungi hanya 256 warna, yang menjadikan imej kelihatan bertompok dan tidak realistik dalam warna, seperti poster.

format PNG (Grafik Rangkaian Mudah Alih). Termasuk ciri terbaik format GIF dan JPEG. Mengandungi 256 warna dan memungkinkan untuk menjadikan salah satu warna telus, sambil memampatkan imej ke dalam saiz yang lebih kecil daripada fail GIF.

Format APNG (Grafik Rangkaian Mudah Alih Beranimasi). Format imej berdasarkan format PNG. Membolehkan anda menyimpan animasi dan juga menyokong ketelusan.

Format SVG (Grafik Vektor Boleh Skala). Lukisan SVG terdiri daripada satu set bentuk geometri yang diterangkan dalam format XML: garis, elips, poligon, dsb. Kedua-dua grafik statik dan animasi disokong. Set fungsi termasuk pelbagai transformasi, topeng alfa, kesan penapis, dan keupayaan untuk menggunakan templat. Imej SVG boleh diubah saiznya tanpa kehilangan kualiti.

Format BMP (Gambar Bitmap). Ia ialah imej raster yang tidak dimampatkan (asal) yang templatnya ialah grid segi empat tepat piksel. Fail bitmap terdiri daripada pengepala, palet dan data grafik. Pengepala menyimpan maklumat tentang imej grafik dan fail (kedalaman piksel, ketinggian, lebar dan bilangan warna). Palet ditunjukkan hanya dalam fail Bitmap yang mengandungi imej palet (8 bit atau kurang) dan terdiri daripada tidak lebih daripada 256 elemen. Data grafik mewakili gambar itu sendiri. Kedalaman warna dalam format ini boleh menjadi 1, 2, 4, 8, 16, 24, 32, 48 bit setiap piksel.

format ICO (ikon Windows). Format storan ikon fail dalam Microsoft Windows. Selain itu, ikon Windows digunakan sebagai ikon pada tapak web di Internet. Ia adalah gambar format ini yang dipaparkan di sebelah alamat laman web atau penanda halaman dalam penyemak imbas. Satu fail ICO mengandungi satu atau lebih ikon, saiz dan warna setiap satunya boleh ditetapkan secara berasingan. Saiz ikon boleh dalam sebarang saiz, tetapi yang paling biasa ialah ikon segi empat sama dengan sisi 16, 32 dan 48 piksel.

2. Tag

Tag

Teg mempunyai atribut nama yang tersedia, yang menentukan nama peta. Nilai atribut nama untuk teg

unsur

3. Tag

Tag menerangkan hanya satu kawasan aktif sebagai sebahagian daripada peta imej sebelah pelanggan. Elemen tidak mempunyai tag penutup. Jika satu kawasan aktif bertindih dengan kawasan lain, pautan pertama daripada senarai kawasan akan dilaksanakan.

Jadual 2. Atribut tag

Atribut	Penerangan Ringkas
alt	Menetapkan teks alternatif untuk kawasan peta aktif.
kord	Menentukan kedudukan kawasan pada skrin. Koordinat diberikan dalam unit panjang dan dipisahkan dengan koma: Untuk bulatan— koordinat pusat dan jejari bulatan; Untuk segi empat tepat— koordinat sudut kiri atas dan kanan bawah; Untuk poligon— koordinat bucu poligon dalam susunan yang diperlukan; ia juga disyorkan untuk menunjukkan koordinat terakhir, sama dengan yang pertama, untuk penyiapan logik rajah.
muat turun	Melengkapkan atribut href dan memberitahu penyemak imbas bahawa sumber harus dimuatkan sebaik sahaja pengguna mengklik pautan, dan bukannya, sebagai contoh, perlu membukanya terlebih dahulu (seperti fail PDF). Dengan menentukan nama untuk atribut, kami memberikan nama kepada objek yang dimuatkan. Ia dibenarkan menggunakan atribut tanpa menyatakan nilainya.
href	Menentukan URL untuk pautan. Alamat pautan mutlak atau relatif boleh ditentukan.
hreflang	Menentukan bahasa dokumen web yang berkaitan. Hanya digunakan bersama dengan atribut href. Nilai yang diterima ialah singkatan yang terdiri daripada sepasang huruf yang menunjukkan kod bahasa.
media	Menentukan jenis peranti yang akan dioptimumkan untuk fail tersebut. Nilai boleh menjadi sebarang pertanyaan media.
rel	Kembangkan atribut href dengan maklumat tentang hubungan antara dokumen semasa dan berkaitan. Nilai yang diterima: ganti - pautan ke versi alternatif dokumen (contohnya, bentuk bercetak halaman, terjemahan atau cermin). pengarang — pautan kepada pengarang dokumen. penanda halaman - URL kekal yang digunakan untuk penanda halaman. bantuan - pautan untuk membantu. lesen - pautan kepada maklumat hak cipta untuk dokumen web ini. next/prev - menunjukkan hubungan antara URL individu. Terima kasih kepada penanda ini, Google boleh menentukan bahawa kandungan halaman ini berkaitan dalam urutan logik. nofollow - menghalang enjin carian daripada mengikuti pautan pada halaman tertentu atau pautan tertentu. noreferrer - menunjukkan bahawa apabila mengikuti pautan, penyemak imbas tidak seharusnya menghantar pengepala permintaan HTTP (Perujuk), yang merekodkan maklumat tentang halaman mana pelawat tapak datang. prefetch - menunjukkan bahawa dokumen sasaran harus dicache, i.e. Penyemak imbas di latar belakang memuat turun kandungan halaman ke cachenya. carian - Menunjukkan bahawa dokumen sasaran mengandungi alat carian. tag - menentukan kata kunci untuk dokumen semasa.
bentuk	Menentukan bentuk kawasan aktif pada peta dan koordinatnya. Boleh mengambil nilai berikut: rect - kawasan aktif segi empat tepat; bulatan - kawasan aktif dalam bentuk bulatan; poli — kawasan aktif dalam bentuk poligon; lalai — kawasan aktif menduduki keseluruhan kawasan imej.
sasaran	Menentukan tempat dokumen akan dimuat turun apabila pautan diklik. Menerima nilai berikut: _self — halaman dimuatkan ke dalam tetingkap semasa; _blank — halaman dibuka dalam tetingkap penyemak imbas baharu; _parent — halaman dimuatkan ke dalam bingkai induk; _top - halaman dimuatkan dalam tetingkap penyemak imbas penuh.
menaip	Menentukan jenis MIME fail pautan, i.e. sambungan fail.

4. Contoh mencipta peta imej

1) Tandakan imej asal ke dalam kawasan aktif bentuk yang diingini. Koordinat kawasan boleh dikira menggunakan program pemprosesan foto, contohnya, Adobe Photoshop atau Cat.

nasi. 1. Contoh penanda imej untuk membuat peta

2) Tetapkan nama kad dengan menambahkannya pada teg

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !}
nasi. 2. Contoh mencipta peta imej, apabila anda mengklik kursor tetikus pada bunga, anda pergi ke halaman dengan penerangan

Kami telah bercakap tentang cara membuat lukisan sebagai pautan... dalam bab ini kita akan bercakap tentang cara membuat serpihan, kawasan lukisan, pautan ke dokumen tertentu, serta cara membuat perbezaan kawasan lukisan yang sama memaut kepada dokumen yang berbeza .

Untuk menyelesaikan tugas ini, kita tidak boleh melakukannya tanpa peta navigasi yang dipanggil.

Katakan kita mempunyai gambar seperti ini:

Dan kita perlu melakukannya supaya pengguna, dengan mengklik pada salah satu "butang" ini, mengikuti pautan ke dokumen ini atau itu.. apakah yang kita perlukan untuk ini?

Pertama sekali, mari kita tetapkan lukisan kita bukan sebagai imej grafik biasa, tetapi sebagai peta navigasi, memberikan lukisan ini nama individu kita sendiri. Ini dilakukan menggunakan atribut peta guna tag (Saya rasa anda tidak perlu diingatkan bahawa teg itu mempunyai atribut yang diperlukan src yang menunjukkan laluan ke gambar tertentu )

Mari namakan lukisan/peta kita panel. Ia akan kelihatan seperti ini:

usemap="#panel">

Jangan lupa untuk meletakkan tanda mengikut peraturan sintaks # tanda cincang di hadapan nama..

Nah, sekarang, mari kita buat peta navigasi. Ia ditentukan oleh tag yang mempunyai sifat nama- nama.. adakah anda melihat ke mana saya pergi dengan ini? Nah, seperti yang anda mungkin sudah meneka, kami akan menunjukkan berdasarkan lukisan mana kami akan membina peta navigasi kami dengan menunjukkan namanya..

Sekarang mari kita mulakan dengan menunjukkan kepada penyemak imbas kawasan gambar yang akan berfungsi sebagai pautan, dan pada masa yang sama kita akan menulis laluan peralihan untuk pautan ini. Tugas ini diambil alih oleh tag , ia tidak memerlukan teg penutup dan mempunyai atribut berikut yang akan kami gunakan:

href- menunjukkan laluan ke dokumen yang akan dibuka (sama seperti dalam tag )
bentuk- bentuk kawasan lukisan yang akan dijadikan rujukan. Boleh mempunyai salah satu daripada tiga makna:

• betul- luas segi empat tepat
• poli- kawasan itu adalah sejenis poligon
• bulatan- kawasan yang ditakrifkan oleh bulatan

kord- koordinat bentuk

Kawasan segi empat tepat

Sekarang peta kami kelihatan seperti ini:

Malah, kini butang segi empat sama "hijau" telah berfungsi.

Seperti yang anda boleh lihat dengan mengklik padanya dalam contoh ini:

usemap="#panel">

Saya agak tergesa-gesa dengan contoh tanpa benar-benar menerangkan intipati apa yang ditulis... Mari kita fokus pada atribut tag .

href="primer1.html"- di sini saya rasa jelas, ini adalah laluan ke dokumen yang sepatutnya dibuka apabila anda mengklik pada "butang hijau".

Oleh kerana butang kami adalah segi empat sama, dan segi empat sama, seperti yang kita ketahui, ialah segi empat tepat "biasa", kami menetapkan bentuk kawasan lukisan kepada segi empat tepat shape="betul" .

Dan sekarang bahagian yang menyeronokkan koordinat="15,15,82,82"- koordinat.. Untuk segi empat tepat, ia ditentukan oleh dua titik mengikut prinsip "X1, Y1, X2, Y2" Di mana X1, Y1 ialah titik pertama dan, dengan itu, X2, Y2 yang kedua. Koordinat ditunjukkan dalam piksel. Lukisan/peta kami mempunyai dimensi 300 kali 100 piksel, piksel kiri atasnya mempunyai koordinat X=0,Y=0 dan piksel kanan terendah X=300,Y=100. Jika tidak jelas, mari kita selami geometri gred lima..

Tengok gambar:

Jadi, memilih bentuk segi empat tepat shape="betul" Untuk kawasan kami dalam bentuk butang segi empat sama, kami menunjukkan koordinat piksel kiri atas dan kanan bawahnya... yang cukup untuk menetapkan kawasan "berfungsi" pada keseluruhan butang.

Poligon (poligon).

Mari kita berurusan dengan "butang kuning", ia diwakili dalam bentuk segitiga. Untuk memilih kawasan "berfungsi" dari lukisan kami, kami menetapkan atribut bentuk maksudnya poli- poligon yang akan mentakrifkan kawasan ini sebagai sejenis poligon, di mana koordinat yang dipisahkan dengan koma akan menjadi bucunya, boleh terdapat seberapa banyak yang anda suka "X1,U1,X2,U2,X3,U3,X4, U4... X124,U124” angka yang dibentuk oleh titik dan bucu bucu boleh kelihatan seperti mana-mana poligon, sama ada sekata dan tidak sekata. Dalam kes kami, terdapat hanya tiga sudut, itulah sebabnya ia adalah segi tiga, oleh itu koordinatnya akan diberikan oleh tiga pasang nilai "X1,Y1,X2,Y2,X3,Y3"

Jadi kami menulis semuanya bersama-sama seperti ini:

shape="poli" coords="148,15,185,82,110,82">

Dan inilah gambar yang jelas menunjukkan dari mana datangnya koordinat titik..

Bulatan

Nah, "butang merah" terakhir adalah bulat... yang bermaksud bentuk kawasan itu akan menjadi bulat shape="bulatan". Kali ini keadaan dengan koordinat sedikit berbeza. Kami memerlukan tiga nilai X, Y, R. X dan Y ialah koordinat pusat bulatan kami, dan R ialah panjang jejari dalam piksel.

Berikut adalah lukisannya:

Berikut ialah contoh:

Mari kita ingat..

Sekarang sedikit tentang perkara lain yang dinasihatkan untuk dilakukan dengan peta kami sebelum "melekapkannya" ke mana-mana halaman.

Mari kita tentukan dimensi tetap peta gambar mengikut atribut lebar Dan ketinggian

Mari tulis teks alternatif untuk keseluruhan imej peta dan untuk kawasan individu menggunakan atribut alt, serta perihalan elemen dengan atribut tajuk .

Mari kita buang bingkai sempadan... mari kita lakukan sempadan="0"..(Nah, jika anda lebih suka dengan sempadan, anda tidak perlu melakukannya.. Saya tidak mendesak..)

Pada akhirnya ia sepatutnya kelihatan seperti ini:

width="300" height="100" border="0" alt="Control Panel" title="Panel kawalan"> !}

Persimpangan kawasan

Kadang-kadang mudah untuk membentuk kawasan "kerja" imej dengan "mencampurkan" bentuk yang berbeza.

Katakan butang seterusnya kami kelihatan seperti ini:

Sudah tentu, anda boleh menentukan bentuk sebagai poligon, tetapi anda perlu menentukan banyak koordinat untuk bahagian bulat butang sedemikian (baik, jika anda memerlukan ketepatan khas dalam peta navigasi).

Dalam contoh ini, anda boleh menentukan dua bentuk segi empat tepat betul dan bulatan bulatan seperti yang ditunjukkan pada gambar:

Dan dalam kod menunjukkan laluan ke dokumen yang sama:

"Bukan kawasan"

Mari lihat contoh... andaikan anda perlu membuat butang seperti ini:

Bagaimana dengan lubang di dalamnya?

Tag selain atribut href mempunyai atribut yang bertentangan dengan nilai nohref- kawasan yang tidak aktif, iaitu, jika pengguna mengklik pada kawasan sedemikian, maka tiada apa-apa yang akan berlaku, yang sebenarnya kita perlu capai apabila membuat "lubang" dalam peta kita.

Peta akan ditakrifkan oleh dua kawasan, bulatan tidak aktif bulatan dan kawasan segi empat tepat aktif betul dan seperti yang ditunjukkan dalam lukisan, mempunyai koordinat berikut:

Seperti yang dinyatakan sebelum ini, apabila kawasan bersilang, keutamaan tertinggi akan diberikan kepada kawasan yang berada di dalam teg dalam kod disenaraikan dahulu

Oleh itu, contoh akan kelihatan seperti ini:

Peta pada pelayan.

Petikan daripada direktori (atribut tag ):

peta guna- imej ialah peta navigasi sebelah pelanggan.
ismap- imej adalah peta navigasi pada pelayan.

Tidak jelas? Lepas tu jom baca...

Dengan atribut peta guna Kami nampaknya telah memahaminya.. Lihat, pengguna (pelanggan), setelah membuka halaman anda, serentak dengan semua kandungan lain, memuatkan "di sisinya" kedua-dua lukisan itu sendiri dan peta navigasi untuknya, dan keseluruhannya diproses oleh pelayarnya.

Dan inilah sifatnya ismap tag memberitahu penyemak imbas bahawa terdapat peta navigasi untuk imej ini pada pelayan, baik, di mana anda telah menyiarkan atau akan menyiarkan laman web anda (baca artikel:). Dan sekarang, apabila pelawat (klien) mengklik mana-mana kawasan gambar dengan atribut sedemikian, penyemak imbas akan mengingati koordinat klik ini dan menghantarnya ke pelayan, di mana program khas akan memproses data ini dan mengalihkan pengguna ke alamat yang ditunjukkan dalam peta pada pelayan, mengikut koordinat titik yang diterima daripada pelayar klien.

Ia ditulis seperti ini:

di mana alamat peta navigasi di mana-mana tapak web.. dihoskan pada satu pelayan atau yang lain..

Masih tidak jelas? Jika ya, maka jangan risau tentangnya.. gunakan peta guna, pada pendapat saya, penyelesaian ini akan menjadi yang terbaik dalam kebanyakan kes apabila menggunakan peta navigasi.

Untuk menentukan koordinat titik tertentu pada peta navigasi anda dengan mudah, buka lukisan dengan editor grafik seperti Paint, contohnya... di sana, apabila anda mengalihkan penunjuk ke atas lukisan, anda akan melihat dua nombor yang berubah, ini adalah Koordinat piksel X dan Y dalam lukisan ini. Dalam Paint, panel ini terletak di bahagian bawah skrin.

Apabila membuat halaman dengan peta navigasi, teg mestilah sentiasa lebih tinggi daripada kad itu sendiri Iaitu, tulis seperti ini:



Anda boleh, tetapi tidak perlu.. kerana masalah mungkin timbul semasa memuatkan halaman, kerana peta dengan tanda telah dimuatkan, tetapi lukisan itu sendiri belum lagi..

Dan untuk memuatkan...



Tempat dalam kod ini boleh mengandungi apa-apa teks panjang, jadual, grafik... tetapi masih lebih baik untuk tidak menulis apa-apa di sini

Dan tulis di sini, kerana semasa halaman dimuatkan, pengguna, tanpa menunggunya selesai, boleh cuba mengklik pada butang yang ditunjukkan dalam peta navigasi, yang pada masa ini belum dimuatkan..