Bani Biasa

Kali ini gue mau kasih tau cara posting gambar pakai fasilitas image map di blog. Buat yang nggak tau image map apaan, image map tuh kayak tag gambar di facebook. Jadi kalau ada foto orang bisa ada keterangan atau link khusus. Di sini gue bakal tunjukin cara pakai Dreamweaver.
1. Buka Dreamweaver. Pilih 'File' -> 'New...'. Di window 'New Document' yang muncul pilih 'Basic page' di bagian 'Category'. Di bagian sebelahnya, pilih 'HTML'.
2. Bakal ada halaman baru yang bakal dibuat, tapi sebenarnya kita butuh kodenya doang. Kalau di situ cuma ada kode atau deasain aja, pilih 'split' buat yang menampilkan kode dan desain.
3. Pilih 'Insert' -> 'Image'. Pilih gaambar yang diinginkan. Di window yang muncul klik ok aja.
4. Setelah gambarnya ada klik gambarnya. Di bagian 'Properties' ada kotak namanya 'Map', pilih yang bentuknya kotak, atau sebenarnya apa aja sih cuma enakan yang kotak.
5. Seleksi (tandai) bagian gambar yang bakal di map. Setelah di tandai (yang berwarna hijau transparan), balik ke 'Properties'. Di bagian 'Link', tulis alamat link yang dituju dan dibagian 'Alt' keterangannya. Buat kalau mouse diarahin ke bagian map bakal muncul keterangan, tambahain 'title="keterangan" di bagian kodenya (di kode mapnya).
6. Kopi kode gambar plus mapnya di post blog (bagian html-nya).


Ini contoh gambar gue sama kakak gue yang udah di-map. Coba arahin mouse ke kepala gue (kiri), di situ ada linknya. Terus ke kepala kakak gue (kanan). Buat yang mau analisa kodenya bisa liat di bawah.

<img src="http://img12.imageshack.us/img12/4150/tagen1.jpg" usemap="#Map" width="400" border="0" height="300" /><br /><map name="Map" id="Map"><br /><area shape="rect" coords="87,24,159,110" href="http://www.banibiasa.com/" target="_blank" alt="Bani Biasa" title="Bani Biasa"><br /><area shape="rect" coords="215,36,294,117" title="Uki (kakak gue)"></map>