Image Map di HTML

Image Map

Image map atau peta gambar dalam HTML adalah teknik untuk membuat gambar yang interaktif dengan area yang dapat diklik. Peta gambar memungkinkan pengguna untuk melakukan tindakan, menautkan ke berbagai tujuan, atau menampilkan informasi tambahan. 

Peta gambar dapat membuat pengalaman pengguna lebih menarik dan efisien dengan mengurangi kebutuhan akan tautan dan gambar yang terpisah. 

Untuk membuat peta gambar, Anda dapat menggunakan elemen HTML berikut:
  • <map>: Mendefinisikan peta gambar
  • <img>: Menentukan lokasi gambar yang akan disertakan dalam peta
  • <area>: Menentukan area yang dapat diklik dalam peta
Atribut coords digunakan untuk menentukan koordinat suatu area dalam peta gambar. Atribut ini digunakan bersama dengan atribut shape untuk menentukan ukuran, bentuk, dan penempatan suatu area.

Contoh image HTML


Siapkan foto yang akan digunakan untuk membuat peta gambar, lalu untuk menentukan koordinat gambarnya, bisa melalui web image-map seperti berikut :

  • Kunjungi web image-map, lalu upload gambar yang akan dipakai, bisa dari PC atau dari website

  • Lalu pilih titik gambar yang akan diberi link, dan isi pada inputan link, title, dan target, seperti dibawah ini 


  • Lalu beri juga titik pada hp dan juga kopi

  • Lalu klik tombol show me the code yang ada di bawah 

  • Lalu disitu terlihat code yang bisa disalin dan di paste di halaman utama.
  • Berikut merupakan code dari main.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Map || Muhammad Fahmi 'Ainunnajib</title>
</head>

<body>
    <!-- Image Map Generated by http://www.image-map.net/ -->
    <img src="IMG/komputer.jpg" usemap="#image-map">

    <map name="image-map">
        <area target="_blank" alt="Komputer" title="Komputer" href="komputer.html"
            coords="36,44,270,46,264,190,273,348,33,345,43,190" shape="poly">
        <area target="_blank" alt="HP" title="HP" href="hp.html"
            coords="290,173,328,172,335,246,294,246" shape="poly">
        <area target="_blank" alt="Kopi" title="Kopi" href="kopi.html"
            coords="337,301,46" shape="circle">
    </map>
</body>

</html>

  • Berikut hasil dari code main.html, saat di klik komputer/laptop maka akan pindah halaman ke halaman komputer.html, begitupun ketika nge-klik hp dan kopi

  • Berikut merupakan codingan dari komputer.html, kopi.html dan hp.html, fungsi dari link back adalah untuk mengembalikan ke halaman utama
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Map || Muhammad Fahmi 'Ainunnajib</title>
</head>

<body>
    <h1>Komputer</h1>
    <img src="IMG/komputer2.jpg" width="50%">
    <br>
    <a href="main.html">Back</a>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Map || Muhammad Fahmi 'Ainunnajib</title>
</head>

<body>
    <h1>Kopi</h1>
    <img src="IMG/kopi.jpg" width="50%">
    <br>
    <a href="main.html">Back</a>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Map || Muhammad Fahmi 'Ainunnajib</title>
</head>

<body>
    <h1>HP</h1>
    <img src="IMG/hp.jpg" width="50%">
    <br>
    <a href="main.html">Back</a>
</body>

</html>



  • Berikut merupakan hasil dari 3 codingan diatas
komputer.html


kopi.html


hp.html



Link GitHub : https://github.com/Fahm11/WEB/tree/main/HTML/PART8

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM

Gambar
Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM 1. Membuat 2 mikrotik 2. Setting network di mikrotik 1 3. Setting network di mikrotik 2 4. Jalankan mikrotik 1 lalu ubah nama mikrotiknya  5. Setting interface-nya 6. Tambah IP address lalu ping default getway 7. Setting IP route lalu ping 8.8.8.8 8. Setting IP dns lalu ping website/domain 9. Tambah ip address untuk ethernet 2   10. Pindah ke mikrotik 2 lalu ubah nama mikrotik 2 11. Setting interface   12. Setting IP address lalu ping default getway  13. Setting IP route, dan IP dns lalu coba ping ke 8.8.8.8 dan masih gagal karena di mikrotik 1 belum di setting IP firewall nat 14. Setting IP firewall nat di mikrotik 1 15. Lalu kembali ke mikrotik 2 lalu ping ke 8.8.8.8 dan ke domain atau web 
Baca selengkapnya

Konfigurasi 3 Mikrotik

Gambar
Konfigurasi 3 Mikrotik 1. Siapkan Mikrotik 2. Ubah Settingan network di 3 Mikrotik 3. Setting di mikrotik 1, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke detik.com 4. Setting IP address di mikrotik1 untuk ke mikrotik lainnya dan juga setting ip firewall nat 5. Setting di mikrotik 2, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke google.com 6. Setting di mikrotik 3, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke google.com catatan : Mohon maaf tidak sesuai dengan topologi, karena jika saya menggunakan ip 192.168.10.1/30 dan 192.168.10.6/30 di mikrotik 2 dan 3 nya timeout, jadi saya ubah ke ip 192.168.43.1/30 dan 192.168.43.6/30
Baca selengkapnya

Form HTML

Gambar
 Form HTML Form merupakan bagian pada HTML yang dapat digunakan untuk membuat elemen Form atau formulir pada halaman Web. Jenis-Jenis atau Type Input pada Form  <input type="text"> : yang berfungsi untuk input teks bari tunggal <input type="submit">  : yang berfungsi sebagai tombol <input type="email">  : yang berfungsi sebagai tempat input email <input type="color">  : yang berfungsi sebagai tempat input color atau warna <input type="datetime">  : yang berfungsi sebagai tempat input tanggal dan waktu/jam <input type="time">  : yang berfungsi sebagai tempat input waktu atau jam <input type="file">  : yang berfungsi sebagai tempat input / upload file <input type="email">  : yang berfungsi sebagai tempat input email <input type="hidden">  : yang berfungsi sebagai tempat input yang tidak terlihat oleh user <input type="number">  : ...
Baca selengkapnya