سلام و  وقت عالی متعالی.

کنترل ImageMap برای ایجاد تصاویری است که دارای چند ناحیه هست کاربرد داره و کاربر می تونه با انتخاب هر ناحیه عمل خاصی رو انجام بده مثلا : به صفحهی دیگه ای منتقل بشه یا به آدرس سایت دیگه ای و یا باعث ایجاد یک AutoPostBack شود و ...

در اینجا من نقشه ایران رو آوردم و می خوام وقتی کاربر مثلا روی محدوده تبریز کلیک کرد یک AutPostBack رخ دهد و به کاربر اعلام کنه که شما روی شهر تبریز کلیک کرده اید و ...

1- خب ویژوال استودیوتون رو باز کنین و یک وب فرم به صفحه اضافه کنید و از نوار ابزار ToolBox کنترل ImageMap رو به فرمتون اضافه کنید.

2- قبل از کنترل ImageMap کلیک کرده و یک Label به وب فرم اضافه کنید.

کد شما در نهایتا باید چیزی شبیه کد های زیر باشه :

<div>
        <asp:Label ID="Label1" runat="server" Text="Label" Visible="False"></asp:Label>
        <br />
        <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/iran-map.jpg" onclick="ImageMap1_Click">

        </asp:ImageMap>
    </div>

ما بین تگ های باز و بسته <asp:ImageMap> کد های زیر را اضافه نمایید :

<asp:RectangleHotSpot AlternateText="ارومیه" Bottom="73" HotSpotMode="PostBack" PostBackValue="ارومیه" Right="32" Top="1" Left="12" />
            <asp:RectangleHotSpot AlternateText="تبریز" Bottom="58" HotSpotMode="PostBack" PostBackValue="تبریز" Right="67" Top="20" Left="25" />
            <asp:RectangleHotSpot AlternateText="دریای خزر" Bottom="68" HotSpotMode="PostBack" PostBackValue="دریای خزر" Right="161" Top="3" Left="89" />

3- بروی کنترل ImageMap دابل کلیک کرده ده و کد های سی شارپش رو بنویسید :

 Label1.Visible = true;
        String region = "";
        switch (e.PostBackValue)
        {
            case "ارومیه":
                region = "ارومیه";
                break;
            case "تبریز":
                region = "تبریز";
                break;
            case "دریای خزر":
                region = "دریای خزر";
                break;

        }
        Label1.Text = "You Clicke the " + region + "region.";

نکته : فراموش نکنید که نقشه ایران را در پروژه خود کپی کرده ( در کنار وب فرم ).

خب کار تمام است، پروژه رو اجرا کنید و روی دریای خزر کلیک کنید، پیغام "You Clicke the دریای خزرregion. نمایش داده می شود."

ضمیمه :

دریافت
عنوان: کنترل ImageMap
حجم: 27 کیلوبایت