Life is about choice

Do your best or nothing, No change no future, No pain no gain…

Cara Lengkap Membuat Image Map untuk Struktur Organisasi, Peta, Denah

Posted by Niyamabrata pada Januari 3, 2010

Tahap-tahap membuat image map adalah sebagai berikut :

Tahap Persiapan:
1. Siapkan gambar yang ingin di mapping (format jpg, gif, png, dll),
2. Siapkan software MapEdit, download saja dari sini, download MapEdit 4.05
3. Siapkan script-script (java script dan css) yang akan digunakan, kalo bisa sudah di-upload ke internet, atau bisa juga langsung menggunakan script, css yang sudah saya upload, tapi jika banyak yang memakai bisa overload!
4. Mulai bekerja!

Tahap Mapping menggunakan MapEdit 4.05:
1. Petakan semua koordinat dari gambar dengan Software MapEdit sehingga diperoleh koordinatnya bisa dengan berbagai bentuk seperti rectangles, polygons, maupun cycles.
2. Pada saat selesai memetakan dengan kotak,lingkaran atau poligon akan muncul jendela baru yang harus diisi data,
3. Isikan kolom URL dengan link gambar sesuai yg anda inginkan, kolom ALT dengan nama gambar yg bersangkutan, OnMouseOver atau OnClick diisi dengan return hs.expand(this)
4. Jika OnMouseOver anda isi berarti pada saat mouse lewat di atas gambar yg dipetakan maka akan muncul mapping yg anda link (bisa gambar, link page baru, dll), jika OnClik berarti harus diklik dulu baru muncul
5. Setelah selesai memetakan semua, simpan sebagai HTML atau yang lainnya juga bisa seperti PHP, ASP, dll
6. Oya pada HTML tadi jangan lupa ntar ganti link gambar yang digunakan dengan link gambar yg sama yang sudah disimpan di server/internet.

Tahap Akhir–>memasang kode/script di website/blog:
1. Pasang javascript di bawah ini. Bisa dipasang di atas script yang sudah kita bikin dengan MapEdit tadi bisa juga dipasang pada widget baru jika kita mau memasangnya di blog.

<script type=”text/javascript” src=”http://h1.ripway.com/niyamabrata/ImageMap/highslide-full-edited.js”></script&gt;

<script type=”text/javascript”>
hs.graphicsDir = ‘../highslide/graphics/’;
hs.outlineType = ’rounded-white’;
hs.fadeInOut = true;
hs.headingEval = ‘this.a.title’;
//hs.dimmingOpacity = 0.75;
</script>

Pasang html yang dibuat dengan MapEdit di sini jika ingin anda gabung dengan javascriptnya contoh HTML-nya di bawah ini…

<img src=”http://i980.photobucket.com/albums/ae290/niyamabrata/BlogDepohar50/Struktur_Organisasi_Sathar_51.jpg&#8221; usemap=”#Struktur_Organisasi_Sathar_51″ alt=”” style=”border-style:none” />
<map id=”Struktur_Organisasi_Sathar_51″ name=”Struktur_Organisasi_Sathar_51″>
<div>
<area onclick=”return hs.expand(this)” shape=”rect” alt=”” coords=”205,2,317,28″ href=”http://i980.photobucket.com/albums/ae290/niyamabrata/BlogDepohar50/05FOTO-DANSATHAR51-ok.jpg&#8221; title=”Komandan Sathar 51″ />
<div>
<div align=”center”><strong>Mayor Lek. Emil Syarif Fachrie</strong></div>
<div align=”center”>Lahir di Malang, pada tanggal 18 September 1973. Diterima sebagai Calon Prajurit Taruna dan dilantik oleh Presiden RI sebagai Letda pada bulan Desember 1995. Pada tanggal … diangkat sebagai Komandan Sathar 51 sampai sekarang.</div>
</div>
</div>
<area onclick=”return hs.expand(this)” shape=”default” nohref=”nohref” alt=”” />
</map>

2. Pasang script css di bawah ini di server anda. Jika di blog pasang saja di atas <b:skin>

<link rel=”stylesheet” type=”text/css” href=”http://h1.ripway.com/niyamabrata/ImageMap/highslide-edited.css&#8221; />

3. Setelah selesai, bisa langsung di-coba. Terimakasih!

sumber: blog.depohar50.info

3 Tanggapan to “Cara Lengkap Membuat Image Map untuk Struktur Organisasi, Peta, Denah”

  1. djadjoel said

    Kalau untuk joomla gimana ?

  2. sinauw said

    makasih kang atas tipsnya

  3. Sukrawan said

    you r welcome

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: