Read This Post

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



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!
3. 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>

<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" 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" title="Komandan Sathar 51" />
<div class="highslide-caption">
<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" />

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

Do Your Best, Share Our Article

Related Posts

10 Response to Cara Lengkap Membuat Image Map untuk Struktur Organisasi, Peta, Denah

Anonim
Senin, 01 Februari, 2010

[B]NZBsRus.com[/B]
Escape Slow Downloads Using NZB Files You Can Hastily Find High Quality Movies, PC Games, MP3 Singles, Software and Download Them @ Dashing Speeds

[URL=http://www.nzbsrus.com][B]Usenet Search[/B][/URL]

Anonim
Senin, 01 Februari, 2010

[B]NZBsRus.com[/B]
No More Idle Downloads With NZB Files You Can Hastily Find Movies, PC Games, MP3 Albums, Software and Download Them @ Fast Speeds

[URL=http://www.nzbsrus.com][B]Usenet[/B][/URL]

Anonim
Senin, 01 Februari, 2010

[B]NZBsRus.com[/B]
Dont Bother With Crawling Downloads With NZB Downloads You Can Hastily Search HD Movies, Console Games, Music, Applications and Download Them at Electric Speeds

[URL=http://www.nzbsrus.com][B]NZB[/B][/URL]

Anonim
Jumat, 05 Februari, 2010

The same class with get there come Our Subdued Prices at www.Pharmashack.com, The Exceptional [b][url=http://www.pharmashack.com]Online Chemist's burst c short-circuit the whistle on buy [/url][/b] To [url=http://www.pharmashack.com]Buy Viagra[/url] Online ! You Can also Espy Vast Deals When You [url=http://www.pharmashack.com/en/item/cialis.html]Buy Cialis[/url] and When You You [url=http://www.pharmashack.com/en/item/levitra.html]Buy Levitra[/url] Online. We Also Departmentalize a Primary Generic [url=http://www.pharmashack.com/en/item/phentermine.html]Phentermine[/url] On account of Your Nutriment ! We Under consideration for of undertaking away Handle stamp [url=http://www.pharmashack.com/en/item/viagra.html]Viagra[/url] and Also [url=http://www.pharmashack.com/en/item/generic_viagra.html]Generic Viagra[/url] !

Anonim
Jumat, 05 Februari, 2010

Garner the savage with two backs casinos? inquire this untested [url=http://www.realcazinoz.com]casino[/url] advisor and wing it criticize online casino games like slots, blackjack, roulette, baccarat and more at www.realcazinoz.com .
you can also look after our untrained [url=http://freecasinogames2010.webs.com]casino[/url] orientate at http://freecasinogames2010.webs.com and overcome temporal luck !
another additional [url=http://www.ttittancasino.com]casino spiele[/url] league is www.ttittancasino.com , in the service of german gamblers, pen in manumitted online casino bonus.

Anonim
Jumat, 19 Februari, 2010

Dear Alyssa,

For long time I use this free software: [url=http://www.freeflvtomp3converter.com]FLV to MP3 free converter[/url].

FLV to MP3 free converter is a free YouTube, MegaVideo, Hallpass and similar video sites to MP3 Converter and allows you to convert a video to MP3 file.

This software is fast, free, and requires no signup. All you need is a FLV Video file, and this software will extract the MP3, and give you an audio file.

So you are able to listen to your favorite YouTube tracks on every MP3 player.

You can download it for free at [url=http://www.freeflvtomp3converter.com]www.freeflvtomp3converter.com[/url].

I hope this help you.

Anonim
Sabtu, 20 Februari, 2010

I'm new around here, seems like a cool place though. I'll be around a bit, more of a lurker than a poster though :)
[url=http://acai-berries-and-weight-loss.wetpaint.com]Acai Berry[/url]
Acai Berries
Acai Berry
http://acai-berries-and-weight-loss.wetpaint.com
Acai Berry

Anonim
Kamis, 11 Maret, 2010

It isn't hard at all to start making money online in the hush-hush world of [URL=http://www.www.blackhatmoneymaker.com]blackhat seo[/URL], It's not a big surprise if you have no clue about blackhat marketing. Blackhat marketing uses little-known or misunderstood methods to produce an income online.

Anonim
Minggu, 02 Mei, 2010

kalau untuk joomla gimana?

Anonim
Minggu, 02 Mei, 2010

minta file highslide-edited.css dan highslide-full-edited.js

tolong kirim ke djadjoel@gmail.com

thank

Posting Komentar