مدخل إلى asp.net ASP.NET: عرض الصور

   Protected Sub Page_Load(ByVal sender As Object، ByVal e As EventArgs) 
    Handles  Me.Load 

    Dim rnd As New Random() 
    Select Case rnd.[Next](3) 
        Case 0 
            Image1.ImageUrl = "~/images/pic1.bmp" 
            Image1.AlternateText = "picture1" 
        Exit Select 
        Case 1 
            Image1.ImageUrl = "~/images/pic2.jpg" 
            Image1.AlternateText = "picture2" 
        Exit Select 
        Case 2 
            Image1.ImageUrl = "~/images/pic3.bmp" 
            Image1.AlternateText = "picture3" 
        Exit Select 
        End Select 
    End Sub 

نفذ الصفحة السابقة ليتم عرض إحدى الصور الثلاث، اضغط على زر تحديث الصفحة (أو F5) ليتم عرض صورة أخرى وبشكل عشوائي. مماسبق نلاحظ مدى بساطة التعامل مع أداة التحكم Image، في الفقرة التالية سنتعرف على أداة تستخدم أيضا لعرض الصور ولكن بخيارات ومزايا أكثر تنوعا ً.

استخدام أداة التحكم ImageMap

تستخدم هذه الأداة لعرض صورة ما بالإضافة لربطها مع خريطة غير مرئية، بمعنى آخر عند نقر المستخدم على أجزاء مختلفة من الصورة فبإمكاننا الاستجابة بردود فعل مختلفة أيضا بحسب إحداثيات موقع النقر على الصورة، وعلى هذا الأساس فبإمكاننا استخدام هذه الأداة كوسيلة للتنقل بين الصفحات مثلا ً، حيث نقوم بعرض صورة تحتوي على رسومات معبرة عن صفحات تالية ثم نحدد عند النقر على موقع ما من هذه الصورة الصفحة التي سيتم الإنتقال لها، استخدام آخر لهذه الأداة هو تحديد دخل المستخدم حيث بإمكاننا عرض صورة تحتوي على منتجات عديدة ويكون خيار المستخدم بحسب المنتج الذي تم الضغط عليه على الصورة.

أداة التحكم ImageMap ترتبط تلقائيا مع صف HotSpot class والذي يسمح بتحديد مناطق قابلة للنقر على الأداة ImageMap، منصة العمل ASP.Net تقدم ثلاثة صفوف من النمط HotSpot بإمكاننا التعامل معها وهي:

• CircleHotSpot: تمكننا من تحديد منطقة دائرية على خريطة الصورة.
• PolygonHotSpot: تمكننا من تحديد شكل غير منتظم على خريطة الصورة.
• RectangleHotSpot: تمكننا من تحديد منطقة مستطيلة على خريطة الصورة.

خصائص أداة التحكم ImageMap:

• AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة.
• AlternateText: نص بديل يتم عرضه في حال عدم عرض الصورة المحددة.
• DescriptionUrl: لتحديد رابط إلى صفحة تحتوي تفاصيل عن الصورة.
• GenerateEmptyAlternateText: إسناد سلسلة فارغة كنص بديل للصورة.
• HotSpotMode: تحديد السلوك الذي سيتم تنفيذه عند الضغط على منطقة من الصورة وتأخذ إحدى القيم التالية: Inactive ،Navigate ،NotSet ،PostBack.
• HotSpots: تكمننا من الحصول على جميع النقاط الساخنة (HotSpots) الموجودة ضمن أداة التحكم ImageMap.
• ImageAlign: تحديد موقع الصورة بالنسبة لأدوات html أخرى ويمكن أن تأخذ إحدى القيم التالية: AbsBottom ،AbsMiddle ،Baseline ،Bottom ،Left ،Middle ،NotSet، Right ،TextTop ،Top.
• ImageUrl: لتحديد مسار واسم الصورة التي سيتم عرضها.
• TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab.
• Target: تسمح لنا بفتح الصفحة في نافذة جديدة.

أداة التحكم ImageMap تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تدعم الحدث Click والذي يتم إطلاقه عند الضغط على منطقة من هذه الأداة وكانت الخاصية HotSpotMode تأخذ القيمة PostBack.

مثال: سنقوم في المثال بعرض كيفية استخدام أحد جوانب أداة التحكم ImageMap، حيث سنقوم بإنشاء قائمة للتنقل بين صفحات مختلفة، أنشئ مشروع جديد وأضف أربع صفحات ولتكن أسماؤها Dafault، page1 ،page2 ،page3. أضف على الصفحة Default أداة ImageMap واجعلها تعرض صورة مناسبة للغرض السابق.

حيث سنقوم بتقسيم أداة الصورة السابقة إلى ثلاث مناطق وكل منطقة تنقلنا إلى صفحة محددة.

كود صفحة Default.aspx:

كود ASP.net

    <div>
        <asp:ImageMap ID="ImageMap1" runat="server" 
                      ImageUrl="~/images/navigationBar.jpg">

        <asp:RectangleHotSpot NavigateUrl="~/page1.aspx" Left="0" Top="0" 
               Right="100" Bottom="30" AlternateText="go to page1" />

        <asp:RectangleHotSpot NavigateUrl="~/page2.aspx" Left="100" Top="0" 
               Right="200" Bottom="30" AlternateText="go to page2" />

        <asp:RectangleHotSpot NavigateUrl="~/page3.aspx" Left="200" Top="0" 
               Right="300" Bottom="30" AlternateText="go to page3" />

        </asp:ImageMap>
    </div>

نلاحظ من الكود السابق أن للخاصية RectangleHotSpot الخصائص الفرعية Left ،Right ،Top ،Bottom لنحدد إحداثيات المنطقة (حجم الصورة في المثال 300x30). وكل منطقة تم ربطها بصفحة معينة عبر الخاصية NavigateUrl ليتم نقل المتصفح إليها عند النقر على تلك المنطقة.

مثال آخر: بعد أن تعرفنا على كيفية استخدام الأداة ImageMap للتنقل بين الصفحات المختلفة، سنعرض هنا آلية العمل مع PostBack أي البقاء ضمن نفس الصفحة، أضف صفحة جديدة وأضف عليها TextBox وImageMap، الصورة المطلوبة ليتم عرضها.

    protected void ImageMap1_Click(object sender، ImageMapEventArgs e)
    {
        switch (e.PostBackValue)
        {
            case "ToUpper":
                TextBox1.Text = TextBox1.Text.ToUpper();
                break;
            case "ToLower":
                TextBox1.Text = TextBox1.Text.ToLower();
                break;
            case "Erase":
                TextBox1.Text = String.Empty;
                break;
        } 
    }

    Select Case e.PostBackValue 
        Case "ToUpper" 
            TextBox1.Text = TextBox1.Text.ToUpper() 
        Exit Select 
        Case "ToLower" 
            TextBox1.Text = TextBox1.Text.ToLower() 
        Exit Select 
        Case "Erase" 
            TextBox1.Text = [String].Empty 
        Exit Select 
    End Select 

    <div>

        <asp:ImageMap ID="ImageMap1" runat="server" HotSpotMode="PostBack" 
            ImageUrl="~/images/textCase.jpg" onclick="ImageMap1_Click">

        <asp:RectangleHotSpot PostBackValue="ToUpper" Left="0" Top="0" Right="100" 
                              Bottom="30" AlternateText="ToUpper" />

        <asp:RectangleHotSpot PostBackValue="ToLower" Left="100" Top="0" 
                              Right="200" Bottom="30" AlternateText="ToLower" />

        <asp:RectangleHotSpot PostBackValue="Erase" Left="200" Top="0" Right="300" 
                              Bottom="30" AlternateText="Erase" />
        </asp:ImageMap>

        <br />

        <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" />
        
    </div>

    <div>

    <asp:Panel id="pnlContact" GroupingText="Contact Information" Runat="server">
        <asp:Label id="lblFirstName" Text="First Name:" 
                   AssociatedControlID="txtFirstName" Runat="server" />
        <br />
        <asp:TextBox id="txtFirstName" AutoCompleteType="FirstName" Runat="server" 
                     />
        <br /><br />
        <asp:Label id="lblLastname" Text="Last Name:" 
                   AssociatedControlID="txtLastName" Runat="server" />
        <br />
        <asp:TextBox id="txtLastName" AutoCompleteType="LastName" Runat="server" 
                     />
        <br /><br />
        <asp:Button id="btnSubmit" Text="Submit" Runat="server" />
    </asp:Panel>

    <br />
    <asp:Button ID="Button1" runat="server" Text="Visible" onclick="Button1_Click" 
                />
    </div>

    protected void Button1_Click(object sender، EventArgs e)
    {
        pnlContact.Visible = !pnlContact.Visible;
    }

    Protected Sub Button1_Click(ByVal sender As Object، ByVal e As EventArgs) 
        pnlContact.Visible = Not pnlContact.Visible 
    End Sub