ToolBox HTML Control HTMLImage

HTML Image Web Server Control

In ASP.NET environment,This article describes you how to work with HTML Image Control.In HTML environment, Image is an object that represents an embedded Image in an HTML form. The Image control in a HTML form contains all instance of an <img> tag.

The HTML Image control can be used to rendering the image onto the web page.and which can be supporting the file types such as .gif, .jpg, .png, etc.

There are several functions available to access the HTML Image.some of its funtions are as follows,

  • document.getElementById()
  • document.getElementByName()
Image Objects Properties
  • id -Sets or returns the id of a Image
  • border -Sets or returns the width of the Image border
  • align -Sets or returns how to align an image according to the surrounding text
  • alt - Sets or returns an alternate text to be displayed, if a browser cannot show an image
  • complete - Returns whether or not the browser has finished loading the image
  • height -Sets or returns the height of an image
  • width -Sets or returns the width of a Image
  • hspace -Sets or returns the white space on the left and right side of the image
  • isMap -Returns whether or not an image is a server-side image map
  • longDesc -Sets or returns a URL to a document containing a description of the image
  • lowsrc -Sets or returns a URL to a low-resolution version of an image
  • src -Sets or returns the URL of an image
  • useMap -Sets or returns the value of the usemap attribute of an client-side image map
  • vspace -Sets or returns the white space on the top and bottom of the image
  • title -Sets or returns an element's advisory title
  • className -Sets or returns the class attribute of an element

The following code snippets explains you the HTML Image in the web form.

in .aspx.cs page,

    
       void Image2_Click(object sender, EventArgs e) 
       {
          img1.Src="orange.jpg";
          img1.Height=300;
          img1.Width=250;
          img1.Border=7;
          img1.Align="left";
          img1.Alt="Image 2";
       }
        

in .aspx page,

 
<form id="Form2" runat="server">
        <h3>Example</h3>
        <center>
           <button id="btn1"
                  OnServerClick="img1_Click" 
                  runat="server">
          Image 1
          </button>
        </center>
        <br><br>
        <img id ="img1"
            Src="apple.jpg"
            Width="200"
            Height="150"
            Alt="Image 1"
            Border="5"
            Align="center" 
            runat=server/>
    </form>
 
Related Links

Posted by: Admin
Posted on: 9/18/2009 at 4:51 PM
Tags: , ,
Categories: Asp.net
Actions: E-mail | Kick it! | DZone it! | del.icio.us
Post Information: Permalink | Comments (16) | Post RSSRSS comment feed

ToolBox Standard Control Image

Image Web Server Control

in ASP.NET environment,The Image Web server control is very similar to the HTML img Element. Image Web Control allows you to display images on an ASP.NET Web page and manage the images in your own code. This article provides information about that how to working with Image Web Control.

Specify Image Files

An user can provides Image Files to the Image Control through one of the following ways:

  • you can specify image files at design time declarativly
  • you can specify image files through programmaticaly

You can also bind the control's ImageUrl property to a data source to display graphics based on database information. Unlike most other Web server controls, the Image control does not support any events. For example, the Image control does not respond to mouse clicks. Instead, you can create an interactive image by using the ImageMap or the ImageButton Web server controls.

Specify Image Property
  • ToolTip -This is the text that is displayed in a ToolTip in some browsers.
  • AlternateText -This is the text that is displayed if the graphics file cannot be found. If no ToolTip property is specified, some browsers will use the AlternateText value as a ToolTip.
  • GenerateEmptyAlternateText -If this property is set to true, the alt attribute of the rendered image element will be set to an empty string.
To Add Image Controls in a Page
  • Type an <asp:Image> element into the page.
  • Set the control's ImageUrl property to the URL of a .gif, .jpg, or other Web graphic file.
  • Set the following Properties which are optional
  • Height -specify the height of the Image, for instance, Height="200px".By Default,it sets to the default height of the image
  • Width -specify the width of the Image, for instance, Width="200px".By Default,it sets to the default width of the image
  • ImageAlign -specify the Image Align which is according to the nearest text, which may be Middel,Top,absMiddle,bottom and so on
  • AlternateText -Displays this text in place of the graphic when its not loaded.

the following code snippets describes how to set the Property of Image via programmatically.

protected void Button1_Click (object sender, System.EventArgs e)
{
    this.Image1.ImageAlign = "Middle";
    this.HyperLink1.AlternateText = "apollo";
}
                 
 
Related Links

Posted by: Admin
Posted on: 9/11/2009 at 7:31 AM
Tags: , ,
Categories: Asp.net
Actions: E-mail | Kick it! | DZone it! | del.icio.us
Post Information: Permalink | Comments (33) | Post RSSRSS comment feed