#49 Cara membuat link pada gambar dan peta gambar di html

Link pada gambar

membuat link gambar html sama seperti menggunakan teks hanya saja diganti menggunakan sebuah gambar.

sehingga gambar tidak hanya ditampilkan saja, namun bisa di klik dan mengarahkan ke halaman lain.

Baca juga : Cara lengkap membuat link

contoh penggunaan link pada gambar :

<!DOCTYPE html>
<html>
<head>
    <title> Cara membuat link pada gambar </title>
</head>
<body>
    <a href="https://thohirdev.com">
        <img src="https://thohirdev.com/test/maps.png">
    </a>
</body>
</html>Code language: HTML, XML (xml)

link pada peta gambar

peta gambar adalah gambar dengan area tertentu yang dapat di klik, berfungsi sebagai hyperlink.

jadi dalam satu gambar ada beberapa link pada area yang sudah ditentukan.

gambar ditentukan oleh tag <img> dan peta ditentukan oleh tag <map> dengan <area> untuk area yang dapat diklik

ada 3 area yang bisa dibentuk pada gambar

bentuk poligon atau mempunyai banyak sudut ditulis dengan atribut dan nilai shape=”polygon”
area dalam bentuk persegi panjang dengan kode shape=”rectangle”
bentuk lingkaran ditulis dengan kode shape=”circle”

berikut cara membuat peta gambar menjadi link di html

contoh penggunaan peta gambar di bawah ini, jika ingin mencobanya langsung bisa klik tombol coba script

<!DOCTYPE html>
<html>
<head>
    <title> Membuat Peta Gambar pada html </title>
</head>
<body>
    <img src="https://thohirdev.com/test/maps.png" usemap="#peta-gambar">
    <map name="peta-gambar">
        <area title="html5" href="https://thohirdev.com/tutorial/?s=html" coords="49,60,97,118" shape="rectangle">
        <area title="lingkaran" href="https://thohirdev.com/tutorial/?s=css" coords="162,85,31" shape="circle">
        <area title="poligon" href="https://thohirdev.com/tutorial/?s=javascript" coords="231,52,266,68,248,122,222,74" shape="polygon">
    </map>
</body>
</html>Code language: HTML, XML (xml)

pada script diatas tidak hanya menampilkan gambar saja, namun ada beberapa link pada area bentuk gambar html5 , lingkaran dan poligon yang bisa diklik.

ada beberapa atribut pada tag <area>

title : nama dari gambar, ketika menyorot mouse pada area gambar yang sudah ditentukan, akan membuat tulisan diatas gambar html
href : link yang akan dituju ketika klik gambar tersebut.
shape : bentuk koordinat gambar
coords : menentukan koordinat suatu area dalam peta gambar,

atribut ini digunakan bersama atribut shape untuk menentukan ukuran, bentuk dan penempatan suatu area.

pada contoh coords gambar html5 diatas bentuk persegi coords=”49,60,97,118″

koordinat coords dalam rectangle dibagi menjadi 2

pertama 49,60 koordinat 49px dari margin kiri , 60px dari margin atas