Tips Macromedia Dreamweaver: Membuat Image Map

Di tutorial kali ini EYD ingin memberikan tips sederhana membuat image map dalam Macromedia Dreamweaver. Dalam teknik dasar pembuatan web khususnya dalam HTML, image map adalah teknik memberikan area link pada gambar, sehingga sebuah gambar bisa dipetakan menjadi banyak link yang berbeda.

Dalam tutorial ini EYD menggunakan Macromedia Dreamweaver 8

  • buka aplikasi Macromedia Dreamweaver, siapkan dokumen HTML baru lalu simpan dalam sebuah folder khusus untuk web percobaan ini.
  • klik menu Insert > Image untuk memasukkan gambar yang akan dimapping beberapa link, dicontohkan seperti gambar di bawah di mana pada pojok bawah gambar kita buat icon Facebook dan Twitter.

  • Nah dari gambar di atas sudah kebayang kan apa yang mo dibuat? Yup kita akan membuat area dari gambar header di atas terbagi 2 area, yakni area untuk icon FB dan satu lagi area untuk icon Twitter. Dalam teknik Image Map ada 3 bentuk area yang dapat dibuat, yakni rectangular, oval, dan polygon. Di tutorial ini yang akan kita pakai adalah area kotak (rectangular).
  • Setelah gambar masuk ke halaman, pada bagian Properties di bawah, klik Rectangular Hotspot Tool

  • Lalu areakan mouse sehingga membentuk area kotak di atas icon FB seperti pada gambar

  • lalu kembali fokus ke kotak properties, masukkan URL pada bagian Link, contoh: http://www.facebook.com/abang.endrik

  • Nah ulangi langkah di atas untuk icon sebelahnya Twitter
  • Jika telah selesai bisa lihat di jendela Code kode HTML tercipta dari proses pembuatan yang kira-kira seperti di bawah ini.

<img src=”header01.jpg” width=”588″ height=”130″ border=”0″ usemap=”#Map” />
<map name=”Map” id=”Map”>
<area shape=”rect” coords=”838,93,875,132″ />
<area shape=”rect” coords=”493,87,530,128″ href=”http://www.facebook.com/abang.endrik” />
</map>

  • simpan dan previewlah web page yang baru saja dibuat, arahkan kursor ke icon FB dan Twitter, dan lihat cukup mudahkan membuat link image map. teknik dasar ini banyak digunakan untuk web yang notabene navigasi linknya menggunakan full graphic.

Silahkan dicoba dan semoga berguna.

This entry was posted in Uncategorized and tagged , . Bookmark the permalink.

0 Responses to Tips Macromedia Dreamweaver: Membuat Image Map

  1. Dimas says:

    makasih abang tutorialnya..
    bermanfaat bgt buat saya yg masih awam ini..
    ditunggu tutorial2 lainnya :)

  2. ghele says:

    buat satu titik bisa ga ?

Leave a Reply

Your email address will not be published. Required fields are marked *