Tag peta dalam contoh html. Gambar peta gambar dengan mouse

• lurus- luas persegi panjang
• poli- luasnya semacam poligon
• lingkaran- luas yang ditentukan oleh lingkaran

Daerah persegi panjang

Sekarang peta kita terlihat seperti ini:

Bahkan, kini tombol kotak "hijau" sudah mulai beroperasi.

Apa yang dapat Anda lihat dengan mengkliknya dalam contoh ini:

usemap = "# panel">

Saya sedikit terburu-buru dengan contoh tanpa benar-benar menjelaskan esensi dari apa yang ditulis.. Mari kita fokus pada atribut tag .

href = "primer1.html"- di sini saya pikir sudah jelas, ini adalah jalur ke dokumen, yang seharusnya terbuka ketika Anda mengklik "tombol hijau".

Karena tombolnya persegi, dan persegi, seperti yang Anda tahu, adalah persegi panjang "biasa", kami menetapkan bentuk area gambar ke persegi panjang bentuk = "persegi" .

Dan sekarang bagian yang menyenangkan koordinat = "15,15,82,82"- koordinat .. Untuk persegi panjang, mereka ditetapkan oleh dua titik sesuai dengan prinsip "X1, Y1, X2, Y2" Di mana X1, Y1 adalah titik pertama dan, karenanya, X2, Y2 adalah yang kedua. Koordinat ditunjukkan dalam piksel .. Gambar / peta kita memiliki dimensi 300 x 100 piksel, piksel kiri atas memiliki koordinat X = 0, Y = 0, dan kanan bawah adalah X = 300, Y = 100. Kalau kurang jelas mari kita terjun ke geometri untuk kelas lima..

Lihatlah gambar:

Jadi, memilih bentuk persegi panjang bentuk = "persegi" untuk area kami dalam bentuk tombol persegi, kami menentukan koordinat piksel kiri atas dan kanan bawahnya .. yang cukup untuk menunjuk area "kerja" dari seluruh tombol.

Poligon (poligon).

Mari kita berurusan dengan "tombol kuning", kami membuatnya diwakili dalam bentuk segitiga. Untuk memilih area "kerja" dari gambar kami, kami menetapkan ke atribut membentuk arti poli- poligon, yang akan mendefinisikan area ini sebagai semacam poligon, di mana koordinat yang dipisahkan oleh koma akan menjadi simpulnya, bisa ada berapa pun jumlahnya "X1, Y1, X2, Y2, X3, Y3, X4, Y4 . .. X124, Y124" sosok yang dibentuk oleh titik-titik ini dengan simpul sudut dapat berbentuk poligon apa pun, baik beraturan maupun tidak beraturan. Dalam kasus kami, hanya ada tiga sudut, itu sebabnya itu adalah segitiga, oleh karena itu koordinatnya akan ditetapkan oleh tiga pasang nilai "X1, Y1, X2, Y2, X3, Y3"

Jadi kami menulis semuanya bersama-sama seperti ini:

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

Dan ini adalah gambar yang dengan jelas menunjukkan dari mana koordinat titik-titik itu berasal.

Lingkaran

Nah, "tombol merah" yang terakhir itu bulat.. jadi bentuk areanya akan bulat bentuk = "lingkaran"... Kali ini dengan koordinat, semuanya sedikit berbeda. Kita membutuhkan tiga nilai X, Y, R. X dan Y adalah koordinat pusat lingkaran kita, dan R adalah panjang jari-jari dalam piksel.

Berikut gambarnya:

Berikut ini contohnya:

Kami membawanya ke pikiran..

Sekarang sedikit tentang apa lagi yang ingin dilakukan dengan peta kita sebelum "memasangnya" ke halaman mana pun.

Tentukan dimensi tetap gambar peta dengan atribut lebar dan tinggi

Mari kita menulis teks alternatif, baik untuk seluruh gambar peta, dan untuk masing-masing area menggunakan atribut alt, serta deskripsi elemen dengan atribut judul .

Mari kita singkirkan bingkai perbatasan .. mari kita lakukan batas = "0".. (yah, jika Anda lebih suka perbatasan, Anda tidak bisa melakukannya.. saya tidak memaksa..)

Pada akhirnya, seharusnya terlihat seperti ini:

lebar = "300" tinggi = "100" batas = "0" alt = "(! LANG: Panel Kontrol" title="Panel kendali"> !}

Area penyeberangan

Terkadang lebih mudah untuk membentuk area "kerja" gambar dengan "mencampur" berbagai bentuk.

Misalkan tombol kita berikutnya terlihat seperti ini:

Tentu saja, Anda dapat menentukan bentuknya sebagai poligon, tetapi Anda harus mengatur banyak koordinat untuk bagian bulat dari tombol tersebut (baik, ini jika Anda memerlukan akurasi khusus di peta navigasi).

Dan Anda dapat menentukan dalam contoh ini dua bentuk persegi panjang lurus dan lingkaran lingkaran seperti yang ditunjukkan pada gambar:

Dan dalam kode, tentukan jalur ke dokumen yang sama:

"Bukan daerah"

Mari kita lihat contohnya .. misalkan Anda perlu membuat tombol seperti itu:

Bagaimana dengan lubang di dalamnya?

Menandai selain atribut href memiliki atribut yang berlawanan nohref- area tidak aktif, yaitu, jika pengguna mengklik area seperti itu, maka sama sekali tidak akan terjadi apa-apa, yang sebenarnya perlu kita capai saat membuat "lubang" di peta kita.

Peta akan ditentukan oleh dua area, lingkaran tidak aktif lingkaran dan luas persegi aktif lurus dan, seperti yang ditunjukkan pada gambar, memiliki koordinat berikut:

Seperti yang disebutkan sebelumnya, saat melintasi area, area yang ada di dalam tag dalam kode akan memiliki prioritas tertinggi. terdaftar pertama

Oleh karena itu, contohnya akan terlihat seperti ini:

Peta ada di server.

Tidak jelas? lalu kita baca..

Dengan atribut peta penggunaan kami sepertinya telah menemukan jawabannya .. Lihat, pengguna (klien), setelah membuka halaman Anda, bersamaan dengan semua konten lainnya, memuat "di sisinya" baik gambar itu sendiri maupun peta navigasi ke sana, dan semuanya diproses oleh browsernya.

Dan inilah atributnya ismap menandai memberitahu browser bahwa untuk gambar ini di server, baik, di mana Anda telah memposting atau akan mempublikasikan situs Anda (baca artikel :), ada peta navigasi. Dan sekarang, ketika pengunjung (klien) mengklik area gambar mana pun dengan atribut seperti itu, browser akan mengingat koordinat klik ini dan mengirimkannya ke server, di mana program khusus akan memproses data ini dan mengarahkan ulang pengguna ke alamat yang tertera pada peta di server, sesuai dengan koordinat titik yang diterima dari browser klien.

Ini ditulis seperti ini:

Bukankah sudah jelas? Jika demikian, maka jangan repot-repot tentang itu .. gunakan peta penggunaan, menurut saya, solusi ini akan menjadi yang terbaik dalam banyak kasus saat menggunakan peta navigasi.

Untuk dengan mudah menentukan koordinat titik pada peta navigasi Anda, buka gambar dengan editor grafis, Cat yang sama, misalnya .. di sana, ketika Anda memindahkan penunjuk ke gambar, Anda akan melihat dua angka yang berubah, ini adalah koordinat piksel X dan Y pada gambar ini... Di Paint, bilah ini terletak di bagian bawah layar.

Saat membuat halaman dengan peta navigasi, tag harus selalu di atas kartu itu sendiri Artinya, tulis seperti ini:



Itu mungkin, tetapi tidak perlu .. karena saat memuat halaman, masalah mungkin muncul, karena peta dengan markup sudah dimuat, tetapi gambar itu sendiri belum ada ..

Dan untuk memuat..



Di bagian kode ini, bisa ada teks, tabel, grafik yang panjang .. tetapi tetap lebih baik tidak menulis apa pun di sini

Dan tulis di sini, karena saat halaman sedang dimuat, pengguna, tanpa menunggu akhirnya, dapat mencoba mengklik tombol yang ditunjukkan di peta navigasi, yang saat ini belum dimuat ..

Hai. Baru-baru ini saya kebetulan berurusan dengan fitur html khusus seperti peta gambar. Sejujurnya, saya tidak sering menggunakannya, dan kemudian, biasanya, semuanya dilakukan dengan zona persegi panjang. Tapi ini tidak terjadi. Tugasnya adalah memposting tautan ke masing-masing wilayah gambar, yang merupakan peta negara, dan, sayangnya, tidak ada pertanyaan tentang kanvas atau svg. Hanya html hanya hardcore! Jadi, tugas sudah diatur, Google diaktifkan, dan Anda bisa mulai.

Teori

• koordinat- koordinat area pemilihan
• href- tautan tempat transisi akan dilakukan saat mengklik zona
• nohref- menunjukkan bahwa zona tersebut tidak mengandung tautan
• membentuk- bentuk seleksi
  • lingkaran- area seleksi dalam bentuk lingkaran
  • bawaan- memilih seluruh area gambar
  • poli- area seleksi dalam bentuk poligon
  • lurus- area seleksi dalam bentuk persegi panjang
• target- menentukan di mana tautan akan terbuka

Karena area pemilihan saya harus poligonal, nilai atribut bentuk, tag area, kami tentukan sebagai poli - area poligonal. Dalam mode ini, koordinat titik yang dipisahkan koma relatif terhadap sudut kiri atas - x, y. Titik juga dipisahkan dengan koma, yang pada awalnya menyebabkan kebingungan saat membaca kode tersebut.

Menulis Cat

Pertama, mari kita siapkan tata letaknya:

Body (margin: 0; padding: 20px; font-family: Arial, Helvetica, sans-serif;) img (border: none; outline: none; display: block; -moz-user-select: none; -webkit-user -select: none; user-select: none;) .canvas (border: 2px solid #333; padding: 2px; margin-bottom: 16px; display: inline-block; // display: inline; // zoom: 1; ) .canvas.draw (border-color: #3C0;) .canvas .inner (position: relative;) .canvas .point (width: 1px; height: 1px; background-color: #fff; border: 1px solid # 000 ; overflow: hidden; position: absolute;) .bar (margin-bottom: 16px;) .info (background-color: #FCFCFC; border: 1px dotted #CCC; font-size: 12px; font-style: italic; padding : 8px; word-wrap: break-word;)
Di javascript, semuanya cukup sederhana. Dalam proses penulisan, saya menggunakan perpustakaan tempur saya, jadi jangan kaget dengan fungsi non-standar. Pertama, kita akan menggantung acara mousedown di #canvas, di mana titik pada gambar akan diberikan dan koordinatnya akan dicatat.

Var addPoint = function (e) (var e = _.getEvent (e), offset = _.getOffset (node ​​["canvas"]), x = e.clientX + _.getDocScrollLeft () - offset, y = e. clientY + _.getDocScrollTop () - offset, node = node ["canvas"].appendChild (_.node ("div", ("class": "point"))); node.style.top = y-1 + "px"; node.style.left = x-1 + "px"; points.push (("x": x, "y": y, "node": node)); e.preventDefault && e. preventDefault(); kembalikan salah;);
Kemudian kita akan menulis sebuah fungsi yang akan menghasilkan kode html dari peta kita.

Var renderInfo = function () (var teks; _.clearNode (nodes ["info"]); node ["info"]. AppendChild (_. Node ("span", " ")); };
Mari kita membingkai semuanya menjadi sebuah kelas, beberapa fungsi pembantu, itu saja. Saya berharap alat penabur akan berguna bagi seseorang.

Arti dan aplikasi

• _blank - membuka halaman di jendela baru
• _self - memuat halaman ke jendela saat ini
• _parent - memuat halaman ke dalam bingkai induk
• _top - membatalkan semua bingkai dan memuat halaman di jendela browser penuh

5. Judul atribut = "(! LANG: petunjuk" - выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »!}

6. Atribut nohref - membuat area tidak aktif. Digunakan saat objek tumpang tindih. Ini jarang digunakan, tetapi kadang-kadang bisa menjadi solusi yang sangat diperlukan. Misalnya, Anda dapat membuat lingkaran kecil di dalam lingkaran besar menjadi tidak aktif.

Daerah nohref harus pergi dulu.

Kode sampel:

Penggunaan peta tautan dalam gambar hanya terjadi dalam rentang tugas yang sempit. Misalnya, saat membuat semacam skema atau peta mengemudi. Dalam kasus lain, menggunakan peta untuk membuat menu dan elemen grafis lainnya terlihat tidak masuk akal.

gambar HTML ditambahkan ke halaman web menggunakan tag ... Penggunaan grafik membuat halaman web lebih menarik secara visual. Gambar membantu menyampaikan esensi dan konten dokumen web dengan lebih baik.

Menggunakan tag HTML

Memasukkan gambar ke dalam dokumen HTML

1. Tandai

Elemen mewakili gambar dan konten cadangannya, yang ditambahkan menggunakan atribut alt. Sejak elemen inline, disarankan untuk menempatkannya di dalam elemen blok, misalnya,

Atau