Cara Praktis Membuat Link dengan Image Map

Malam semua. Kadang kala kita ingin membuat 1 image dengan banyak hyperlink ke situs tertentu (kebanyakan peta), mis seperti logo social media pada gambar di bawah ini

kita ingin membuat hyperlink mis logo facebook ke halaman facebook kita, twitter ke halaman twitter kita, de el el…dalam 1 image, kita bisa dengan mudah membuatnya dengan menentukan koordinat image.

code umum untuk koordinat image

area shape=”rect” coords=”1,0,10,19″ href=”….”

dengan catatan : Coordinates are specified in X,Y order: COORDS=”1,0,10,19″ means from X=1, Y=0 to X=10, Y=19. The top left corner is (0,0).

Nah, bagaimana kalau kita tidak mengetahui letak koordinat pastinya, kita bisa dengan mudah dengan menggunakan image map pada dreamweaver. Dari definisnya, Image Map adalah suatu gambar yang memiliki daerah tertentu, di mana pada daerah tersebut dapat diberi sebuah link. Ada 3 image map yang disediakan dreamweaver, yakni

– Rectangular, area link dibuat dalam bentuk kotak
– Oval, area link dibuat dalam bentuk lingkaran
– Polygon, area link akan berbentuk poligon atau bisa dibuat bebas.

Untuk memulai proses image map, kita klik pada imagenya, pada panel properties, pilih map nya mis rectangular

Jadi kita tinggal mengisi link dan alt pada panel properties.

Potongan code contoh image map

img src=”….” usemap=”#social media” width=”100%”

map name=”social media”
area shape=”rect” coords=”866,79,885,97″ href=”http://www.facebook.com/suneducation”

area shape=”rect” coords=”892,78,912,98″ href=”http://twitter.com/sunedugroup”

Semoga bermanfaat.๐Ÿ˜€
Tinggalkan pesan bila hendak meninggalkan lapak, silahkan dicopas dengan tetap mencantum sumber aslinya.๐Ÿ˜€

6 thoughts on “Cara Praktis Membuat Link dengan Image Map

  1. Hi Cahyo, kalau comment box connect ke fb gw pernah coba dulu tapi di blogspot, kalau wp versi free kurang tahu sih, he๐Ÿ˜€

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s