Image Map - Zidni Ilma (2023102003)

 IMAGE MAP DI HTML

Image map dalam HTML berfungsi sebagai navigasi ketika suatu area dalam gambar diklik. Area-area ini terhubung ke halaman web yang berbeda, sehingga ketika pengguna mengklik area tertentu, mereka akan diarahkan ke halaman web yang telah ditetapkan sebelumnya.

Contoh:


Kode di atas membuat sebuah area berbentuk poligon pada gambar :

"Porsche 911 GT3 RS.jpeg"

 Ketika area ini diklik, pengguna akan diarahkan ke gambar:

"Porsche 911 GT3 RS Moodboard.jpeg".

Penjelasan:

  1. <img src="Porsche 911 GT3 RS.jpeg" usemap="#image-map">:
    • src="Porsche 911 GT3 RS.jpeg": Menentukan gambar yang akan digunakan sebagai dasar peta.
    • usemap="#image-map": Menghubungkan gambar dengan peta yang akan didefinisikan.
  2. <map name="image-map">:
    • Mendefinisikan sebuah peta dengan nama "image-map".
      Pemilihan area menggunakan bentuk poligon melalui https://www.image-map.net/

  3. <area alt="Porsche 911 GT3RS " title="Porsche 911 GT3RS" href="Porsche 911 GT3 RS Moodboard.jpeg" coords="39,554,45,547,41,521,45,507,80,483,49,494,101,473,110,462,142,460,163,448,195,445,224,435,243,438,272,426,314,405,346,389,375,385,403,389,425,387,443,391,475,393,489,399,521,408,546,413,573,419,589,425,591,407,602,388,631,385,673,387,705,383,711,394,679,413,641,414,631,417,634,431,638,439,647,437,667,441,676,445,671,457,685,472,695,481,697,498,697,523,697,530,691,552,620,566,609,569,597,585,572,597,536,590,501,566,481,570,233,570,219,573,205,583,181,587,144,584,117,572,103,569,75,569" shape="poly">:
    • alt="Porsche 911 GT3RS ": Teks alternatif yang akan ditampilkan jika gambar tidak bisa dimuat.
    • title="Porsche 911 GT3RS": Teks yang akan muncul saat kursor mouse diarahkan ke area ini.
    • href="Porsche 911 GT3 RS Moodboard.jpeg": URL tujuan ketika area ini diklik.
    • coords="39,554,45,547,41,521,45,507,80,483,49,494,101,473,110,462,142,460,163,448,195,445,224,435,243,438,272,426,314,405,346,389,375,385,403,389,425,387,443,391,475,393,489,399,521,408,546,413,573,419,589,425,591,407,602,388,631,385,673,387,705,383,711,394,679,413,641,414,631,417,634,431,638,439,647,437,667,441,676,445,671,457,685,472,695,481,697,498,697,523,697,530,691,552,620,566,609,569,597,585,572,597,536,590,501,566,481,570,233,570,219,573,205,583,181,587,144,584,117,572,103,569,75,569" shape="poly">: Mendefinisikan koordinat dari area yang dapat diklik. Angka-angka ini mewakili titik-titik pada gambar yang membentuk area tersebut. shape="poly" menunjukkan bahwa area ini berbentuk poligon (banyak sisi).

 Lebih lengkapnya dapat diakses melalui Github

 

Comments

Post a Comment

Popular posts from this blog

Entitias HTML - Zidni Ilma (2023102003)

Image
 ENTITITAS HTML Pernah penasaran bagaimana karakter-karakter spesial seperti tanda kutip, tanda lebih besar, atau simbol mata uang bisa muncul dengan rapi di halaman web? Rahasianya terletak pada entitas HTML. Dengan menggunakan entitas, kita bisa memastikan tampilan halaman web kita selalu sempurna sesuai yag kita inginkan. Entitas HTML sendiri adalah representasi kode khusus yang digunakan untuk mewakili karakter-karakter yang memiliki makna khusus dalam bahasa HTML. Dengan menggunakan entitas, kita dapat memastikan bahwa karakter-karakter tersebut ditampilkan dengan benar di halaman web, tanpa mengganggu struktur HTML itu sendiri. Fungsi Entititas dalam HTML: Mencegah Kesalahan Interpretasi, Karakter-karakter seperti < dan > memiliki makna khusus dalam HTML (sebagai tag pembuka dan penutup). Jika kita menggunakan karakter-karakter ini secara langsung tanpa entitas, browser akan menganggapnya sebagai bagian dari struktur HTML, bukan sebagai ...
Read more

Input dalam Formulir HTML - Zidni Ilma (2023102003)

Image
Formating Formulir HTML dengan menggunakan Input Dalam pengembangan web, formulir HTML adalah komponen penting dalam pembuatan halaman web interaktif. Elemen ini memungkinkan pengguna memasukkan informasi yang diperlukan, seperti nama atau alamat email, yang kemudian dapat dikirimkan dan diproses oleh server. Elemen penting dalam form adalah input. Elemen input memungkinkan pengguna untuk memasukkan berbagai jenis data, mulai dari teks sederhana hingga file. Elemen input memiliki banyak macamnya, antara lain: 1.      Input Color Input warna dalam form HTML memungkinkan pengguna untuk memilih warna secara visual dari sebuah palet warna. Fitur ini sangat berguna dalam aplikasi yang membutuhkan personalisasi tampilan, seperti desain tema, pemilihan warna latar belakang, atau penyesuaian warna teks. Untuk membuat input warna, kita menggunakan elemen input dengan tipe color. Berikut sintaks dasarnya. Contoh: Ketika halaman ini dibuka, akan muncul sebuah kotak ...
Read more