مقدمه و معرفی کنترل Image

مقدمه :

از کنترل Image در ASP.Net می توان برای نمایش تصویر و ِیا آیکون بر روی صفحه استفاده نمود . شما می توانید عکس یا آیکون کنترل را از قبل تعیین کرده و یا به صورت دینامیک آن را در هنگام اجرای صفحه تعیین و یا تغییر دهید . همچنین می توانید خاصیت ImageUrl کنترل را به یک فیلد بانک اطلاعاتی متصل کرده تا تصویر آن از طریق اطلاعات موجود در پایگاه داده تعیین شود .
این کنترل همانند تگ < img > در HTML عمل می کند و در هنگام اجرای صفحات ASP.Net به صورت یک تگ < img > به صفحه ارسال می شود .
شکل کلی تعریف و نمایش کنترل Image در صفحه های ASP.Net به صورت زیر است :

نحوه قرار دادن یک کنترل Image بر روی صفحه ASP.Net :

1. ابتدا یک صفحه ASP.Net در محیط Visual Studio ایجاد کرده و یا صفحه از قبل طراحی شده خود را باز کنید .
2. از منوی Toolbox و از قسمت کنترل های Standard یک کنترل Image را کشیده و روی صفحه قرار دهید .
3. همجنین می توانید به صورت مستقیم در فسمت کدنویسی Source صفحه کد مربوط به کنترل را تایپ نمایید .

تعیین عکس یا آیکون مورد نظر برای کنترل Image :

عکس یا آیکونی را که می خواهید توسط کنترل Image نمایش داده شود را توسط خاصیت ImageUrl این کنترل تعیین می کنید . برای این منظور بایستی مقدار خاصیت ImageUrl کنترل را برابر با آدرس عکس مورد نظر خود قرار دهید . در مثال زیر نحوه انجام این کار را نمایش داده ایم :
در حالت اول آدرس به صورت Relative است . این نوع آدرس دهی برای عکس هایی است که بر روی سرور اصلی سایت شما قرار دارد و برای آدرس دهی آن فقط باید مسیر و پوشه مورد نظر را تعیین کرد . اما در حالت دوم عکس بر روی سروری به غیر از سرور سایت شما قرار دارد . در این حالت باید آدرس کامل عکس شامل آدرس سرور و مسیر دسترسی را تعیین کنید .

Example
< asp:Image ID="Image1" runat="server"   ImageUrl=" ~/Pic/imgexample.jpg " /> < asp:Image ID="Image1" runat="server"   ImageUrl=" http://www.rootfiles.com/Pic/imgexample.jpg " />	کد
	خروجی

تعیین ویژگی هایی برای کنترل Image :

شما می توانید چند ویژگی کاربردی را برای کنترل Image تعیین کنید . در زیر به 2 مورد از این ویژگی ها اشاره می کنیم :

1. خاصیت ToolTip : توسط این خاصیت می توانید یک متن خاص را تعیین کرده تا در هنگام قرار گیری موس بر روی عکس ، آن متن در قالب یک کادر ToolTip نمایش داده شود . این متن می تواند شامل توضیحاتی راجع به عکس باشد .
در مثال زیر نحوه استفاده از این خاصیت را نمایش داده ایم . با قرار گیری موس بر روی عکس خروجی مثال ، متن موجود در خاصیت ToolTip نمایش داده می شود .

Example
< asp:Image ID="Image1" runat="server" ImageUrl=" ~/Pic/imgexample.jpg "   ToolTip=" سایت DeveloperStudio " />	کد
	خروجی

1. خاصیت AlternateText : توسط این خاصیت می توانید یک متن خاص را تعیین کرده تا در صورتی که مرورگر موفق نشد به هر دلیلی عکس مورد نظر را نمایش دهد ، متن جایگزین را به جای عکس نشان دهد . ToolTip نمایش داده شود . این متن بایستی شامل توضیحاتی راجع به عکس باشد .
در مثال زیر نحوه استفاده از این خاصیت را نمایش داده ایم . به دلیل اینکه آدرس عکس اشتباه است ، مرورگر موفق نشده عکس را نمایش دهد . به همین علت متن جایگزین را نشان داده است .

Example
< asp:Image ID="Image1" runat="server" ImageUrl=" ~/Pic/1imgexample.jpg "   AlternateText =" سایت آموزش کامپیوتر " />	کد
	خروجی