MS Knowledge Base: Bagaimana menggunakan daerah HotSpot dalam ImageMap control di ASP.NET ?

Question

Artikel ini menjelaskan tentang sampel All-In-One Code Framework berisikan langkah-langkah panduan yang menggambarkan cara untuk menggunakan daerah HotSpot di kontrol Imagemap dalam ASP.NET untuk membangun sebuah halaman pengantar mengenai Sistem Tata Surya. Pengguna dapat mengklik planet pada gambar untuk menavigasi iframe ke halaman yang sesuai dari planet ini di situs web Wikipedia.

 

Tingkat Kesulitan

            Pemula

Pembahasan Teknis

Menggunakan kontrol Imagemap dapat menciptakan sebuah gambar yang berisikan daftar daerah HotSpot. Bila user mengklik suatu wilayah hot spot, kontrol dapat menghasilkan posting kembali ke server atau menavigasi ke URL tertentu.

Kontrol Imagemap mendukung tiga jenis wilayah hot spot: RectangleHotSpot, CircleHotSpot dan PolygonHotSpot. Sesuai namanya, yang RectangleHotSpot mendefinisikan wilayah hot spot persegi panjang, CircleHotSpots yang berbentuk lingkaran dan PolygonHotSpot digunakan untuk daerah hot spot yang tidak beraturan.

Untuk menentukan wilayah objek RectangleHotSpot, gunakan property Left, Top, Right dan Bottom untuk mewakili koordinat daerah itu sendiri. Untuk objek CircleHotSpot, mengatur property X dan Y untuk koordinat pusat lingkaran. Kemudian mengatur properti Radius untuk jarak dari pusat ke tepi. Untuk menentukan wilayah suatu PolygonHotSpot, atur properti Coordinates ke string yang menentukan koordinat dari setiap titik dari objek PolygonHotSpot. Sebuah simpul poligon adalah titik di mana dua sisi poligon bertemu.


Contoh Sampel


Mari kita ambil Planet Jupiter sebagai contoh untuk menunjukkan bagaimana sebuah CircleHotSpot bekerja. Di sini kita bisa melihat gambar yang digunakan dalam contoh All-In-One Code Framework.

 

(lihat gambar pada link referensi)

 

Pada sudut kiri-atas gambar adalah titik asal sistem koordinat dengan sumbu-X meluas ke kanan dan sumbu-Y meluas ke bawah, kita bisa mendapatkan koordinat pusat Jupiter Planet, yaitu (410.172) berdasarkan perhitungan pix. Juga, kita bisa mendapatkan jari-jari planet pada gambar yang setara dengan 55pix. Sebagai kesimpulan, kita membuat CircleHotSpot di kontrol imagemap dengan kode seperti ini.

 

 

<asp:CircleHotSpot PostBackValue="Jupiter"

                   AlternateText="Jupiter"

                   X="410" Y="172" Radius="55"

                   HotSpotMode="PostBack" />

 

Sampel proyek disediakan dalam All-In-One Code Framework yang tersedia untuk di-download. Selain CircleHotSpot, disitu juga dijelaskan bagaimana cara bekerja dengan RectangleHotSpot dan PolygonHotSpot. Dari catatan ReadMe dan komentar dalam proyek ini, anda dapat menemukan langkah-langkah secara rinci untuk membuat hot spot ini dan menggunakannya untuk menghasilkan posting kembali ke server untuk menjalankan kode tertentu berdasarkan wilayah hot spot yang diklik.

 

Catatan Untuk informasi lebih lanjut tentang cara membuat sampel aplikasi dan bagaimana cara menggunakan sampel aplikasi, lihat file readme.txt yang disertakan dalam paket download.

Kategori Teknologi

·         ASP.NET 2.0 / 3.5 / 4.0

Bahasa Pemograman

 

Contoh kode ini memuat bahasa pemograman dibawah ini:

Collapse this tableExpand this table

Language	Project Name
Visual C#	CSASPNETImageMap
Visual Basic .NET	VBASPNETImageMap

Prasyarat

·         Sampel aplikasi ini dibuat menggunakan Visual Studio 2008 Service Pack 1.

Referensi

http://support.microsoft.com/kb/977992/en-us

---

Agnes Sannie [MSFT]
MSDN Community Support | Feedback to us
Get or Request Code Sample from Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.