Elemen IMG memungkinkan kita untuk menyematkan gambar dalam dokumen HTML.
Untuk menyematkan gambar, Anda perlu menggunakan atribut SRC dan ALT, kodenya adalah sebagai berikut:
<img src = "../ img/contoh/img-map.jpg"/>
Efek tampilan:
1 embed gambar di hyperlink
Penggunaan umum dari elemen IMG adalah membuat hyperlink berbasis gambar dalam kombinasi dengan elemen A, kode adalah sebagai berikut:
<a href = "OtherPage.html"> <img src = "../ img/example/img-map.jpg" ismap/> </a>
Cara browser menampilkan gambar ini tidak berbeda. Oleh karena itu, penting untuk memberi pengguna isyarat visual bahwa gambar tertentu mewakili hyperlink. Pendekatan spesifik dapat menggunakan CSS, yang lebih baik mengekspresikannya dalam konten gambar.
Jika Anda mengklik gambar ini, browser akan menavigasi ke URL yang ditentukan oleh atribut HREF dari elemen induk a. Menerapkan atribut ISMAP ke elemen IMG membuat peta respons cabang sisi server, yang berarti bahwa lokasi yang diklik pada gambar akan dilampirkan ke URL. Misalnya, jika lokasi klik adalah 8 piksel dari bagian atas gambar dan 10 piksel di tepi kiri, browser akan menavigasi ke alamat berikut:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
Kode berikut menunjukkan konten di OtherPage.html, yang berisi skrip sederhana untuk menampilkan koordinat posisi klik:
<body> <p> Koordinat x adalah <b> <span id = "xco"> ?? </span> </b> </p> <p> Koordinat y adalah <b> <span id = "yco"> ?? </span> </b> </p> <script = "Application/Javascript"> var coords = </b> </p> <script = "Application/Javascript"> var coords = </b> window.location.href.split ('?') [1] .split (','); document.geteLementById ("xco"). innerHtml = koordinat [0]; document.geteLementById ("yco"). innerHtml = koordinat [1]; </script> </body>Cara browser menampilkan gambar ini tidak berbeda. Oleh karena itu, penting untuk memberi pengguna isyarat visual bahwa gambar tertentu mewakili hyperlink. Pendekatan spesifik dapat menggunakan CSS, yang lebih baik mengekspresikannya dalam konten gambar.
Jika Anda mengklik gambar ini, browser akan menavigasi ke URL yang ditentukan oleh atribut HREF dari elemen induk a. Menerapkan atribut ISMAP ke elemen IMG membuat peta respons cabang sisi server, yang berarti bahwa lokasi yang diklik pada gambar akan dilampirkan ke URL. Misalnya, jika lokasi klik adalah 8 piksel dari bagian atas gambar dan 10 piksel di tepi kiri, browser akan menavigasi ke alamat berikut:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
Kode berikut menunjukkan konten di OtherPage.html, yang berisi skrip sederhana untuk menampilkan koordinat posisi klik:
<body> <p> Koordinat x adalah <b> <span id = "xco"> ?? </span> </b> </p> <p> Koordinat y adalah <b> <span id = "yco"> ?? </span> </b> </p> <script = "Application/Javascript"> var coords = </b> </p> <script = "Application/Javascript"> var coords = </b> window.location.href.split ('?') [1] .split (','); document.geteLementById ("xco"). innerHtml = koordinat [0]; document.geteLementById ("yco"). innerHtml = koordinat [1]; </script> </body>Anda dapat melihat efek klik mouse:
Grafik respons partisi sisi server biasanya berarti bahwa server akan merespons secara berbeda sesuai dengan area klik pengguna pada gambar, seperti mengembalikan informasi respons yang berbeda. Jika atribut ISMAP pada elemen IMG dihilangkan, koordinat klik mouse tidak akan dimasukkan dalam URL permintaan.
2 Buat Diagram Respons Partisi Klien
Kami dapat membuat peta respons partisi klien, dan membiarkan browser menavigasi ke berbagai URL dengan mengklik area yang berbeda pada gambar. Proses ini tidak memerlukan booting melalui server, sehingga elemen digunakan untuk menentukan area individual pada gambar dan perilaku yang mereka wakili. Elemen kunci dari grafik respons partisi klien adalah peta, yang berisi satu atau lebih elemen area, masing -masing mewakili area pada gambar yang dapat diklik.
Sifat -sifat elemen area dapat dibagi menjadi dua kategori. Kategori pertama berkaitan dengan URL yang akan dinavigasi oleh browser setelah area gambar yang diwakili oleh area tersebut diklik oleh pengguna. Gambar berikut memperkenalkan jenis atribut ini, yang mirip dengan atribut yang sesuai yang terlihat pada elemen lain.
Kategori kedua berisi atribut yang lebih menarik: atribut bentuk dan koordinasi. Properti ini dapat digunakan untuk menunjukkan setiap area gambar yang dapat diklik pengguna. Properti Bentuk dan Koords bekerja bersama. Arti atribut COOLTS tergantung pada nilai atribut bentuk, seperti yang ditunjukkan pada gambar di bawah ini:
Setelah memperkenalkan elemen -elemen ini, berikan contoh, kodenya adalah sebagai berikut:
<body> <img src = "../ img/example/img-map.jpg" ismap usemap = "#mymap"/> <peta name = "mymap"> <area href = "javascript: show_page (1)" bentuk = "rect" coords = "'34.60.196.230" (rect "coords =" 34.60.196.230 " bentuk = "rect" coords = "'210,60,370,230" /> <Area href = "JavaScript: show_page (3)" bentuk = "rect" coords = "' '383,60.545 lompatan lompatan (num) < /peta> <script type =" Application /JavaScript "> FUNGSI THEPERING_PAGE (THE SCRIP /BOXICE (THE SCRIP =" FUNGSI /JAVASCRICK "> peringatan ("Ini adalah produk"+num); } </script> </body>Efek tampilannya sama, kecuali bahwa ketika Anda mengklik gambar produk yang sesuai, nama produk yang sesuai akan muncul, menunjukkan halaman produk yang melompat.
Artikel di atas JavaScript BASICS_SIMPLEPLE Implementasi gambar tertanam adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.