Bagaimana Membina Peta Imej Tanpa Editor Peta Imej

Peta Imej Adakah Hanya Tag HTML Mudah

Peta imej adalah cara yang menarik dan menarik untuk menghidupkan laman web anda-dengan mereka, anda boleh memuat naik imej dan membuat bahagian imej tersebut dapat diklik dengan aset dalam talian lain. Sekiranya anda berada dalam keadaan secubit dan tidak mahu memuat turun editor peta imej, membuat peta menggunakan tag HTML adalah mudah.

Anda memerlukan imej, editor imej dan semacam editor HTML atau editor teks. Kebanyakan editor imej akan menunjukkan kepada anda koordinat tetikus anda apabila anda menunjuk pada imej. Data koordinat ini adalah semua yang anda perlukan untuk memulakan dengan peta imej.

Mewujudkan Peta Imej

Untuk membuat peta imej, mula-mula pilih imej yang akan berfungsi sebagai asas peta. Imej itu mestilah "saiz normal" - iaitu, anda tidak boleh menggunakan imej yang begitu besar sehingga penyemak imbas akan memagarkannya.

Apabila anda memasukkan imej, anda akan menambah atribut tambahan yang mengenal pasti koordinat peta:

Apabila anda membuat peta imej, anda membuat kawasan yang boleh diklik pada imej, jadi koordinat peta mesti bersesuaian dengan ketinggian dan lebar imej yang anda pilih. Peta menyokong tiga jenis bentuk:

Untuk membuat kawasan, anda mesti mengasingkan koordinat tertentu yang anda ingin peta. Peta mungkin terdiri daripada satu atau lebih kawasan yang ditentukan pada imej yang, apabila diklik, membuka pautan baru.

Untuk segi empat tepat , anda memetakan hanya sudut kiri dan kanan atas. Semua koordinat disenaraikan sebagai x, y (over, up). Jadi, untuk sudut kiri atas 0,0 dan sudut kanan bawah 10,15 anda akan menaip 0,0,10,15 . Anda kemudian masukkannya dalam peta:

"Morris"

Untuk poligon , anda memetakan setiap x, y menyelaraskan secara berasingan. Pelayar Web secara automatik menghubungkan koordinat terakhir dengan yang pertama; apa-apa di dalam koordinat ini adalah sebahagian daripada peta.

Bentuk bulatan hanya memerlukan dua koordinat, seperti segi empat tepat, tetapi untuk koordinat kedua, anda menentukan radius atau jarak dari pusat bulatan. Jadi, untuk bulatan dengan pusat pada 122,122 dan radius 5 anda akan menulis 122,122,5:

Semua kawasan dan bentuk boleh dimasukkan dalam tag peta yang sama:

Pertimbangan

Peta imej yang lebih biasa di era Web 1.0 pada tahun 1990-an ke dalam peta awal 2000-imej sering membentuk asas navigasi laman web. Pereka bentuk akan membuat beberapa jenis gambar untuk menunjukkan item menu, kemudian menetapkan peta.

Pendekatan moden menggalakkan reka bentuk responsif dan menggunakan helaian gaya cascading untuk mengawal penempatan imej dan hiperpautan pada halaman.

Walaupun tag peta masih disokong dalam standard HTML , penggunaan peranti mudah alih dengan faktor bentuk kecil boleh menyebabkan masalah prestasi yang tidak dijangka dengan peta imej. Di samping itu, masalah lebar jalur atau imej yang pecah mengundi nilai peta imej.

Oleh itu, jangan ragu untuk menggunakan teknologi yang stabil dan dipahami dengan baik ini dengan mengetahui bahawa terdapat alternatif yang lebih cekap yang kini menjadi trend dengan pereka Web.