none
Knowledge Base Article (KB): วิธีการใช้พื้นที่ HotSpot ใน ImageMap control ด้วย ASP.NET RRS feed

  • การสนทนาทั่วไป

  • บทความนี้จะอธิบายเกี่ยวกับตัวอย่าง  All-In-One Code Framework ซึ่งคุณสามารถดาวน์โหลดได้ โดยตัวอย่างโค้ดจะสาธิตให้ดูทีละขั้นตอน ถึงวิธีการใช้พื้นที่ HotSpot ใน ImageMap control ด้วย ASP.NET เพื่อสร้างหน้าเพจเกริ่นนำของระบบพลังงานแสงอาทิตย์ โดยผู้ใช้สามารถคลิ๊กที่ดาวเคราะห์ในภาพเพื่อค้นหา iframe ที่สอดคล้องกันกับดาวเคราะห์ในหน้าเวปไซต์ของ Wikipedia

    ระดับความยากง่ายCollapse this imageExpand this image

     

    ดาวน์โหลดข้อมูล
    สามารถดาวน์โหลดตัวอย่างโค้ดได้ที่ลิงค์นี้

     

    ภาพรวมทางเทคนิค

    การใช้ ImageMap control จะทำให้สามารถสร้างรูปภาพโดยการกำหนดพื้นที่ในบริเวณ HotSpot ได้ เมื่อผู้ใช้คลิ๊กที่บริเวณ HotSpot ก็จะส่งข้อมูลกลับไปที่เซิร์ฟเวอร์ และสามารถค้นหา URL ที่ต้องการได้

    ImageMap control รองรับการกำหนดพื้นที่ของ hot spot ได้ 3 ประเภท
    1. RectangleHotSpot ใช้กำหนดพื้นที่ hot spot สำหรับรูปสี่เหลี่ยม
    2. CircleHotSpot ใช้กำหนดพื้นที่ hot spot สำหรับรูปวงกลม
    3. PolygonHotSpot ใช้กำหนดพื้นที่ hot spot สำหรับรูปร่างใดๆ

    การกำหนดพื้นที่ของ object RectangleHotSpot ทำได้โดยใช้คุณสมบัติการเลื่อนเม้าท์ไปทางซ้าย บน ขวา และล่าง เพื่อให้สัมพันธ์กัน
    ส่วน
    object CircleHotSpot ให้ใช้การตั้งค่าในพิกัด X และค่าพิกัด Y เพื่อหาจุดศูนย์กลางของวงกลม แล้วหาค่ารัศมีของระยะทางจากจุดศูนย์กลาง
    และการกำหนดพื้นที่ของ PolygonHotSpot ให้ตั้งค่าพิกัดไปยังค่าสตริง เพื่อระบุค่าพิกัดในแต่ละจุดสุดยอดของ object PolygonHotSpot โดยจุดสุดยอดของรูปหลายเหลี่ยม คือ จุดที่ขอบของรูปหลายเหลียม 2 รูปมาบรรจบกัน

     

    ตัวอย่างภาพรวม
    สำหรับตัวอย่างในการสาธิต เราจะใช้ภาพดาวเคราะห์จูปีเตอร์เพื่อสาธิตถึงวิธีการทำงานของ CircleHotSpot
    โดยเราจะเห็นรูปภาพจากในตัวอย่าง
    All-In-One Code Framework ดังนี้

     

    จากมุมบนซ้ายของภาพ คือจุดเริ่มต้นพิกัดแกน X ไปจนถึงด้านขวาล่างของพิกัดแกน Y โดยเราได้หาความสัมพันธ์ของจุดศูนย์กลางของดาวเคราะห์จูปีเตอร์ คือ (410,172) ทั้งนี้ขึ้นอยู่กับการคำนวณด้วย และเรายังสามารถหารัศมีของดาวเคราะห์ได้ด้วย คือ 55pix โดยเราสามารถสร้าง CircleHotSpot ใน ImageMap control ได้ ดังโค้ดต่อไปนี้

    <asp:CircleHotSpot PostBackValue="Jupiter"

                       AlternateText="Jupiter"

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

                       HotSpotMode="PostBack" />

     

    เราได้รวบรวมตัวอย่างโปรเจคฉบับสมบูรณ์ไว้ในแพคเกจดาวน์โหลด All-In-One Code Framework ข้างต้นแล้ว

    นอกจากเราจะพูดถึง CircleHotSpot แล้ว ยังพูดถึงวิธีการทำงานของ RectangleHotSpot และ PolygonHotSpot  อีกด้วย จาก ReadMe note และจากการคอมเม้นท์จากโปรเจค โดยคุณสามารถค้นหาขั้นตอนของรายละเอียดในการสร้าง hot spot  และนำมาปรับใช้ในการส่งข้อมูลกลับไปที่เซิร์ฟเวอร์ และรันโค้ดตามจุด hot spot ต่างๆ

    หมายเหตุ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการสร้างและการปรับใช้โปรแกรมตัวอย่าง กรุณาดูที่ไฟล์  Readme.txt  ซึ่งได้รวบรวมอยู่ในแพคเกจดาวน์โหลดแล้ว

     

     

    ใช้เทคโนโลยี

    ·         ASP.NET 2.0 / 3.5 / 4.0

     

    ภาษา

    Language

    Project Name

    Visual C#

    CSASPNETImageMap

    Visual Basic .NET

    VBASPNETImageMap

       
         

     

    เงื่อนไข

    ·         โปรแกรมนี้ใช้ Microsoft Visual Studio 2008 Service Pack 1

     


    Supa Sethasiripong [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.

    24 พฤษภาคม 2554 11:01
    ผู้ดูแล