link pada sebuah gambar

Banyak web, blog maupun site di dunia maya dengan beragam tampilannya. Tampilan yang cantik, menarik, unik serta kreatif dari site akan membuat pengunjung merasa nyaman atau kagum setiap berkunjung ke site tersebut. Seperti yang kita ketahui banyak site diluar sana dengan beragam desain dan motifnya menggunakan custemisasi maping link di sebuah gambar. Entah di header, sidebar atau bahkan di konten. Banyak yang bertanya bagaimana caranya membuat mapping link di sebuah gambar. Ada beberapa cara yang aku tau, mulai dari otomatis menggunakan adobe dreamweaver dan tool web development lain sampai manual menggunakan notepad atau notepad++

Berikut beberapa cara memberi link pada sebuah gambar :

ADOBE DREAMWEAVER

• Oke kita mulai dengan menggunakan dreamweaver, cukup mudah tinggal install dreamweaver yang free lisensi trialnya
• Lalu masuk ke dream weaver dan pilih new html (blank)

• Pastikan tampilan editor dalam posisi split

• Lalu drag gambar yang akan di masuki kode maping di dreamweaver

• Dibawah properties akan ada menu map seperti dibawah ini, pilih lah bentuk map yang dikehendaki bisa oval, segi empat atau custom sendiri bentuk yang dimau

• Setelah mapping selesai pada sisi kiri (html scrip) akan ada tambahan scrip seperti dibawah

<img src="file:///C|/Users/hurry kussuma/Downloads/blog/templatemo_header sosmed .jpg" alt="buruh" width="1400" height="300" usemap="#Map" border="0" />

<map name="Map" id="Map">

  <area shape="rect" coords="843,8,945,75" href="instagram.com/sihury" />

  <area shape="circle" coords="559,35,6" href="facebook.com/hurrykussuma" />

</map>

•  Copy scrip diatas pada blog, web, atau site yang ingin kamu masukin
•  kelar

2.       Manual dengan notepad

Cara ini juga cukup mudah dan praktis tanpa perlu download dan install dreamweaver. begini nih :

-          Tambahkan command usemap=”#namaMap” pada script gambar (img src)

-          Setelah itu masukkan dibawahnya maping yang kamu inginkan

-          Misal gambar dan maping sama dengan gambar yang di dreamweaver maka

 

 <img src="file:///C|/Users/hurry kussuma/Downloads/blog/templatemo_header sosmed .jpg" alt="buruh" width="1400" height="300" usemap="#NamaMap" border="0" />
<map name="namaMap" id="namaMap">
  <area shape="rect" coords="843,8,945,75" href="instagram.com/sihury" />
  <area shape="circle" coords="559,35,6" href="facebook.com/hurrykussuma" />
</map>

-          Rect adalah comand untuk link yang berbentuk kotak sedang circle adalah untuk yang berbentuk lingkaran

-          Untuk rect ada 4 koordinat, begini urutannya : sisi kiri dihitung dari batas kiri gambar, sisi atas dihitung dari batas atas gambar, sisi kanan dihitung dari batas kiri gambar, sisi bawah dihitung batas atas gambar (semua dalam satuan pixel)

-          Untuk circle ada 3 koordinat, begini urutannya : jarak sisi lingkaran terhadap batas gambar kiri, jarak lingkaran terhadap batas atas gambar, jari jari lingkaran (semua dalam satuan pixel)

-          Sesuaikan koordinat dengan gambar yang ingin di mapping

-          Copy scrip pada template yang akan dipasang gambar ber mapping

-          selesai